JavaScript 继承与构造函数属性

在 JavaScript 中,继承是一种常见的编程模式,允许一个对象获取另一个对象的属性和方法。构造函数属性是 JavaScript 继承机制中的一个关键概念之一。

构造函数与实例对象

在 JavaScript 中,构造函数是用于创建对象的特殊函数。通常情况下,构造函数被用来创建多个对象,并且这些对象都具有相同的属性和方法。当使用关键字 new 来调用构造函数时,会创建一个新的实例对象,并且该对象会自动继承构造函数的属性和方法。

以下是一个简单的构造函数示例:

-------- ------------ ---- -
  --------- - -----
  -------- - ----
-

--- ------- - --- -------------- ----
--- ------- - --- -------------- ----

-------------------------- -- -- ------
------------------------- -- -- --

在上面的示例中,我们定义了一个 Person 构造函数,并通过 new 关键字创建了两个实例对象 person1person2。每个实例对象都有自己的 nameage 属性,它们都继承自 Person 构造函数。

原型链继承

在 JavaScript 中,原型链继承是最常见的继承方式之一。每个对象都有一个内部属性 __proto__,该属性指向其原型对象。原型对象也有自己的原型对象,这样就形成了一个原型链。

当我们访问一个对象的属性或方法时,JavaScript 引擎会先查找该对象自身是否具有该属性或方法,如果没有,则会沿着原型链一直向上查找,直到找到该属性或方法为止。

以下是原型链继承的示例代码:

-------- ------------ ---- -
  --------- - -----
  -------- - ----
-

------------------------ - ---------- -
  --------------- ---- -- - - -----------
--

-------- ------------- ---- ------ -
  ---------- - ------
  ----------------- ----- ----- -- ------
-

----------------- - --------------------------------
----------------------------- - -------- -- --------

-------------------------- - ---------- -
  --------------- ----- -- - - ------------
--

--- -------- - --- --------------- --- -----
--- -------- - --- --------------- --- -----

--------------------------- -- -- ------
-------------------------- -- -- --
------------------- -- -- --- ---- -- -----
-------------------- -- -- --- ----- -- --

在上面的示例中,我们定义了一个 Person 构造函数,并将其原型对象设置为一个包含 sayName 方法的对象。然后我们定义了一个 Student 构造函数,该构造函数继承自 Person 构造函数。

我们通过调用 Object.create(Person.prototype) 来创建一个新的原型对象,该原型对象继承自 Person.prototype。然后我们将 Student.prototype 设置为该原型对象,并修复了 constructor 属性指针。最后,我们在 Student.prototype 中添加了一个新方法 sayGrade

当我们创建 student1student2 实例对象时,它们都继承了 Person 的构造函数和原型对象,以及 Student 的构造函数和原型对象。因此,它们既可以调用 Person 的方法 sayName,也可以调用 Student 自己的方法 sayGrade

class 继承

在 ES6 中,JavaScript 引入了一种新的语法糖——classclass 声明允许我们更方便地定义对象的

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/27283