【Infragistics教程】在javascript构造函数中创建基本继承

翻译|使用教程|编辑:李爽夏|2019-01-02 09:49:34.000|阅读 85 次

概述:本文介绍了如何在javascript构造函数中创建基本继承 。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

【下载Infragistics Ultimate最新版本】

用javascript创建对象有四种方法。具体如下:

  1. 对象作为文本
  2. 构造函数调用模式
  3. 创建()方法
  4. 在ES6之后使用类

继承的实现因对象创建方法而异。本文将解释如何在函数构造函数之间创建继承。

假设您有一个函数:

function animal(name, age) {
    this.name = name;
    this.age = age;
}

如果使用new操作符调用animal函数,将创建一个对象。这种对象创建方式也称为“构造函数调用模式”。

var dog = new animal('foo', 5);
console.log(dog);
var cat = new animal('koo', 3);
console.log(cat);

对象dog和cat都有自己的名称和年龄属性。如果希望在所有对象之间共享属性或方法,请将其添加到函数原型中。

animal.prototype.canRun = function () {
 
    console.log('yes ' + this.name + ' can run !');
}

使用javascript原型链,dog和cat对象都可以访问canrun方法。

var dog = new animal('foo', 5);
dog.canRun(); // yes foo can run

var cat = new animal('koo', 3);
cat.canRun(); // yes koo can run

接下来,让我们创建另一个构造函数——人:

function human(name, age, money) {
    this.name = name ;
    this.age = age ; 
    this.money = money;
}
human.prototype.canEarn = function () {
    console.log('yes ' + this.name + 'can earn');
}

此时,人与动物的功能没有任何关系。然而,我们知道人也是动物。人工构造有两个问题。

  1. 它有重复的名称和年龄初始化代码。为此,应使用动物建造师。
  2. 它与动物建造师没有任何联系

上述两个问题可以通过在动物和人类功能构建者之间创建继承来消除。

您可以通过如下修改人工函数来解决代码复制的问题1:

function human(name, age, money) {
    animal.call(this, name, age);
    this.money = money;
}

现在,在人类函数中,我们使用call方法手动传递当前对象作为动物函数中“this”的值。这种方法也称为间接调用模式。现在,可以创建一个人类对象实例,如下所示:

var h1 = new human('dj', 30, '2000 $');
console.log(h1); 

到目前为止,我们已经解决了代码复制的第一个问题,但是人类的功能仍然与动物的功能无关。如果您尝试对h1对象调用canrun方法,javascript将向您抛出一个错误。

h1.canRun(); // throw error canRun is not a function 

您可以通过将人类功能原型与动物功能构造函数原型链接来解决这个问题。有两种方法可以做到这一点。

使用γ原型

使用object.create()方法

您可以使用object.create()链接函数构造函数的原型,如下所示:

human.prototype = Object.create(animal.prototype);

您可以使用_uu proto_uuu链接函数构造函数的原型,如下所示:

human.prototype.__proto__ = animal.prototype;

更推荐object.create()方法,因为在许多浏览器中可能不支持_uuProto。在链接原型之后,在一种方式下,您已经在动物和人类函数构造函数之间创建了继承。人的对象实例可以读取动物功能的所有属性,并且可以执行动物功能方法。

下面列出了实现函数构造函数之间继承的完整源代码,供您参考:

function animal(name, age) {
 
    this.name = name;
    this.age = age;
 
}
 
animal.prototype.canRun = function () {
 
    console.log('yes ' + this.name + ' can run !');
}
 
var dog = new animal('foo', 5);
dog.canRun();
 
var cat = new animal('koo', 3);
cat.canRun();
function human(name, age, money) {
    animal.call(this, name, age);
    this.money = money;
}
 
human.prototype = Object.create(animal.prototype);
 
human.prototype.canEarn = function () {
    console.log('yes ' + this.name + 'can earn');
}
// human.prototype.__proto__ = animal.prototype;
var h1 = new human('dj', 30, '2000 $');
h1.canRun();
h1.canEarn();

要在函数构造函数之间创建继承,请始终执行以下两个操作:

  1. 使用call或apply调用父构造函数。
  2. 将子构造函数原型链接到父构造函数原型
购买infragistic正版授权的朋友可以点击"咨询在线客服"哦~~~
Codemix活动


标签:JavaScript infragistics

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Infragistics Windows Forms Test Automation

TestAdvantage™ for WinForms代码调试包=完善的界面+全新的功能!

Infragistics Ultimate UI for ASP.NET

ASP.NET界面包是在任何设备上均为Web应用程序服务中敏捷的工具集

Infragistics Ultimate UI for Windows Forms

Infragistics Ultimate UI for Windows Forms,最丰富全面的WinForms界面包。

Infragistics Ultimate UI for WPF

提供高速的网格和图表,轻松创建仿Office应用程序的WPF界面框架

Infragistics jQuery / HTML5

用于创建跨平台跨设备应用的HTML5 & jQuery开发框架

Infragistics Ultimate

创建高性能跨平台应用程序的完美工具集

Infragistics Ultimate UI for Android

可高速地处理数千行的复杂数据。

Infragistics Ultimate UI for iOS

首款针对native iOS开发的工具包

Infragistics Ultimate UI for Xamarin

你的天赋与我们的Xamarin.Forms相结合,随时都可以创建原生应用

在线
客服
在线
QQ
咨询
电话
177-4994-3557
购物车 反馈 返回
顶部
在线客服系统
live chat