跳至正文
首页 » 博客 » How to Create Basic Inheritance in JavaScript Constructors

How to Create Basic Inheritance in JavaScript Constructors

在JavaScript中创建对象有四种方法。它们如下:

  1. 对象作为文字
  2. 构造函数调用模式
  3. create() 方法
  4. 使用类后ES6

继承的实现因对象创建方法而异。在这篇文章中,我将解释在函数构造函数之间创建继承。

假设你有一个函数:

功能动物 (姓名、年龄) {这个 .name = 名称;这个 .age = 年龄;} 

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

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

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

animal.prototype.ca nRun = 函数 () { console.log (“是”这个。姓名“能跑!”);} 

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

var dog = 动物 ('foo' ,5);dog.ca nRun(); 是 // foo可以运行var cat = 动物 ('koo' ,3);nRun(); cat.ca // yes koo可以运行 

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

功能人 (姓名,年龄,金钱) {这个 .name = 名称;这个 .age = 年龄;这个 .钱 = 钱;}human.prototype.ca nEarn = 函数 () {console.log ('' 是 '.name' '可以赚');} 

此时,人类和动物的功能没有任何关系。我们知道,人也是动物。人类构造函数有两个问题。

  1. 它具有用于名称和年龄初始化的重复代码。它应该使用动物构造函数来实现此目的。
  2. 它没有任何链接与动物构造函数

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

您可以通过修改以下人类功能来解决代码重复的问题1:

功能人 (姓名,年龄,金钱) {animal.ca ll( 这个 ,名字,年龄);这个 .钱 = 钱;} 

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

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

到目前为止,我们已经解决了代码重复的问题1; 然而,人类的功能仍然没有与动物的功能联系起来。如果你试图在h1对象上调用canRun方法,JavaScript会抛出一个错误。

h1.canRun() // 抛出错误canRun不是函数

您可以通过将human函数的原型与animal函数构造函数的原型链接来解决此问题。有两种方法可以做到这一点。

  1. 使用 __proto__
  2. 使用Object.create() 方法

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

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

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

human.prototype.__proto__ = animal.prototype;

我更喜欢Object.create() 方法,因为许多浏览器可能不支持 __proto__。链接原型后,在某种程度上,您已经在动物和人类函数构造函数之间创建了继承。人类的对象实例可以读取动物函数的所有属性,并可以执行动物函数方法。

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

功能动物 (姓名、年龄) { 这个 .name = 名称;这个 .age = 年龄; } animal.prototype.ca nRun = 函数 () { console.log (“是”这个。姓名“能跑!”);} var dog = 动物 ('foo' ,5);dog.ca nRun(); var cat = 动物 ('koo' ,3);cat.ca nRun();人的功能 (姓名、年龄、金钱) {animal.ca ll( 这个 ,名字,年龄);这个 .钱 = 钱;} human.prototype = Object.create(animal.prototype); human.prototype.ca nEarn = 函数 () {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. 将子构造函数的原型链接到父构造函数原型

我希望现在您了解如何在JavaScript中实现函数构造函数之间的继承。

</p