JavaScript原型链与继承详解：从原型到Class关键字

JavaScript原型继承基础

对于熟悉Java或C++等基于类的面向对象语言的开发者而言，JavaScript的语法可能显得独特。这主要是因为JavaScript属于动态语言，且传统上并不具备“类”的概念。尽管ES6引入了class关键字，但这仅是一种语法糖，JavaScript底层依然基于原型机制运行。

在继承方面，JavaScript仅存在一种结构：对象。每个对象内部都包含一个指向其原型（prototype）对象的链接。该原型对象自身也可能拥有原型，直至某个对象的原型为null，即不再有原型指向，从而形成一条完整的链条。这种层级相连的结构被称为原型链（prototype chain）。

尽管原型继承常被视为JavaScript的短板，但实际上其原型继承模型比经典的继承模型更为强大。例如，基于原型继承模型来构建经典的继承模型是相对容易实现的。

基于原型链的继承机制

一、基于原型链的继承

1.继承属性

JavaScript对象本质上是动态的属性集合（指其自身的属性）。每个JavaScript对象都持有一个指向原型对象的链。当尝试访问对象的属性时，JavaScript不仅会在该对象自身上搜索，还会依次搜索该对象的原型、原型的原型，层层向上，直到找到匹配的属性名或到达原型链的末端。以下代码演示了访问对象属性时的行为：


// 假定有一个对象 o, 其自身的属性（own properties）有 a 和 b： 
// {a: 1, b: 2} 
// o 的原型 o.[[Prototype]]有属性 b 和 c： 
// {b: 3, c: 4} 
// 最后, o.[[Prototype]].[[Prototype]] 是 null. 
// 这就是原型链的末尾，即 null， 
// 根据定义，null 没有[[Prototype]]. 
// 综上，整个原型链如下:  
// {a:1, b:2} ---> {b:3, c:4} ---> null 
 
console.log(o.a); // 1 
// a是o的自身属性吗？是的，该属性的值为1 
 
console.log(o.b); // 2 
// b是o的自身属性吗？是的，该属性的值为2 
// o.[[Prototype]]上还有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽 (property shadowing)". 
 
console.log(o.c); // 4 
// c是o的自身属性吗？不是，那看看o.[[Prototype]]上有没有. 
// c是o.[[Prototype]]的自身属性吗？是的,该属性的值为4 
 
console.log(o.d); // undefined 
// d是o的自身属性吗？不是,那看看o.[[Prototype]]上有没有. 
// d是o.[[Prototype]]的自身属性吗？不是，那看看o.[[Prototype]].[[Prototype]]上有没有. 
// o.[[Prototype]].[[Prototype]]为null，停止搜索， 
// 没有d属性，返回undefined

设置对象属性是创建其自身属性的方法。获取和设置行为的唯一例外情况是当某个getter或setter被定义为继承属性时。

2.继承方法

JavaScript并未像其他基于类的语言那样定义“方法”。在JavaScript中，任何函数都可以添加到对象上作为其属性。函数的继承方式与其他属性的继承完全相同，包括上述提到的“属性遮蔽”现象（这相当于其他语言中的方法重写）。

当调用继承的函数时，this关键字指向的是当前继承的对象，而非该函数所在的原型对象。


var o = { 
 a: 2, 
 m: function(){ 
  return this.a + 1; 
 } 
}; 
 
console.log(o.m()); // 3 
// 当调用 o.m 时,'this'指向了o. 
 
var p = Object.create(o); 
// p是一个对象, p.[[Prototype]]是o. 
 
p.a = 12; // 创建 p 的自身属性a. 
console.log(p.m()); // 13 
// 调用 p.m 时, 'this'指向 p.  
// 又因为 p 继承 o 的 m 函数 
// 此时的'this.a' 即 p.a，即 p 的自身属性 'a'

创建对象与生成原型链的方法

二、使用不同的方法来创建对象和生成原型链

1.使用普通语法创建对象


var o = {a: 1}; 
 
// o这个对象继承了Object.prototype上面的所有属性 
// 所以可以这样使用 o.hasOwnProperty('a'). 
// hasOwnProperty 是Object.prototype的自身属性。 
// Object.prototype的原型为null。 
// 原型链如下: 
// o ---> Object.prototype ---> null 
 
var a = ["yo", "whadup", "?"]; 
 
// 数组都继承于Array.prototype  
// (indexOf, forEach等方法都是从它继承而来). 
// 原型链如下: 
// a ---> Array.prototype ---> Object.prototype ---> null 
 
function f(){ 
 return 2; 
} 
 
// 函数都继承于Function.prototype 
// (call, bind等方法都是从它继承而来): 
// f ---> Function.prototype ---> Object.prototype ---> null

2.使用构造器创建对象

在JavaScript中，构造器实际上就是一个普通函数。当使用new操作符来调用这个函数时，它便被称为构造方法（构造函数）。


function Graph() { 
 this.vertexes = []; 
 this.edges = []; 
} 
 
Graph.prototype = { 
 addVertex: function(v){ 
  this.vertexes.push(v); 
 } 
}; 
 
var g = new Graph(); 
// g是生成的对象,他的自身属性有'vertices'和'edges'. 
// 在g被实例化时,g.[[Prototype]]指向了Graph.prototype.

3.使用 Object.create 创建对象

ECMAScript 5引入了一个新方法：Object.create()。通过调用此方法可以创建一个新对象。新对象的原型即为调用create方法时传入的第一个参数：


var a = {a: 1};  
// a ---> Object.prototype ---> null 
 
var b = Object.create(a); 
// b ---> a ---> Object.prototype ---> null 
console.log(b.a); // 1 (继承而来) 
 
var c = Object.create(b); 
// c ---> b ---> a ---> Object.prototype ---> null 
 
var d = Object.create(null); 
// d ---> null 
console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype

4.使用 class 关键字

ECMAScript6引入了一套新的关键字来实现class。对于熟悉基于类语言的开发人员来说，这些结构看似熟悉，但本质不同。JavaScript依然基于原型。这些新关键字包括class、constructor、static、extends和super。


"use strict"; 
 
class Polygon { 
 constructor(height, width) { 
  this.height = height; 
  this.width = width; 
 } 
} 
 
class Square extends Polygon { 
 constructor(sideLength) { 
  super(sideLength, sideLength); 
 } 
 get area() { 
  return this.height * this.width; 
 } 
 set sideLength(newLength) { 
  this.height = newLength; 
  this.width = newLength; 
 } 
} 
 
var square = new Square(2);

5.性能

在原型链上查找属性较为耗时，会对性能产生副作用，这在性能要求苛刻的场景下尤为重要。此外，访问不存在的属性时会遍历整个原型链。枚举对象属性时，原型链上的每个可枚举属性都会被枚举出来。

为了检测对象的属性是定义在自身上还是在原型链上，有必要使用hasOwnProperty方法，所有继承自Object.prototype的对象都包含此方法。

hasOwnProperty是JavaScript中唯一一个仅涉及对象自身属性而不遍历原型链的方法。

注意：仅通过判断值是否为undefined不足以检测属性是否存在，因为属性可能存在而其值恰好为undefined。

6.不好的实践：扩展原生对象的原型

一种常见的错误做法是扩展Object.prototype或其他内置对象的原型。该技术被称为monkey patching，它破坏了原型链的封装性。尽管一些流行框架（如Prototype.js）使用此技术，但并没有足够好的理由用其他非标准方法扰乱内置类型系统。扩展内置对象原型的唯一合理理由是引入新JavaScript引擎的某些新特性，例如Array.forEach。

示例EDIT

B将继承自A：


function A(a){ 
 this.varA = a; 
} 
 
// 以上函数 A 的定义中，既然 A.prototype.varA 总是会被 this.varA 遮蔽， 
// 那么将 varA 加入到原型（prototype）中的目的是什么？ 
A.prototype = { 
 varA : null, // 既然它没有任何作用，干嘛不将 varA 从原型（prototype）去掉？ 
   // 也许作为一种在隐藏类中优化分配空间的考虑？ 
   // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables 
   // 将会验证如果 varA 在每个实例不被特别初始化会是什么情况。 
 doSomething : function(){ 
  // ... 
 } 
} 
 
function B(a, b){ 
 A.call(this, a); 
 this.varB = b; 
} 
B.prototype = Object.create(A.prototype, { 
 varB : { 
  value: null,  
  enumerable: true,  
  configurable: true,  
  writable: true  
 }, 
 doSomething : {  
  value: function(){ // override 
   A.prototype.doSomething.apply(this, arguments); // call super 
   // ... 
  }, 
  enumerable: true, 
  configurable: true,  
  writable: true 
 } 
}); 
B.prototype.constructor = B; 
 
var b = new B(); 
b.doSomething();

最重要的部分是：

类型被定义在 .prototype 中
而你用 Object.create() 来继承

prototype与Object.getPrototypeOf的区别

三、prototype 和 Object.getPrototypeOf

对于从Java或C++转来的开发人员来说，JavaScript可能会令人困惑，因为它是完全动态的、基于运行时的，且不存在类（classes）。所有的一切都是实例（对象）。即使我们模拟出的“类（classes）”，也仅仅是一个函数对象。

你可能已经注意到，我们的函数A有一个特殊的属性叫做原型。这个特殊属性与JavaScript的new运算符协同工作。对原型对象的引用会被复制到新实例内部的[[Prototype]]属性中。例如，当你执行：var a1 = new A()时，JavaScript会设置：a1.[[Prototype]] = A.prototype（在内存中创建对象后，并在运行this绑定的函数A()之前）。随后在你访问实例的属性时，JavaScript首先检查它们是否直接存在于该对象中（即是否是该对象的自身属性），如果不是，它会在[[Prototype]]中查找。也就是说，你在原型中定义的元素将被所有实例共享，即使稍后对原型进行修改，这种变更也将影响到所有现存实例。

如上面的例子中，如果你执行var a1 = new A(); var a2 = new A();那么a1.doSomething事实上会指向Object.getPrototypeOf(a1).doSomething，它就是你在A.prototype.doSomething中定义的内容。例如：Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething。

简而言之，prototype用于类型，而Object.getPrototypeOf()用于实例（instances），两者功能一致。

[[Prototype]]看起来就像递归引用，如a1.doSomething，Object.getPrototypeOf(a1).doSomething，Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething等等，直到它找到doSomething这个属性或者Object.getPrototypeOf返回null。

因此，当你执行：


var o = new Foo();

JavaScript实际上执行的是：


var o = new Object(); 
o.[[Prototype]] = Foo.prototype; 
Foo.call(o);

（或者类似上面这样的），然后当你执行：


o.someProp;

它会检查是否存在someProp属性。如果没有，它会查找Object.getPrototypeOf(o).someProp，如果仍旧没有，它会继续查找Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp，一直查找下去，直到它找到这个属性或者Object.getPrototypeOf()返回null。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

深入理解JavaScript原型链与继承机制

JavaScript原型继承基础

基于原型链的继承机制

创建对象与生成原型链的方法

prototype与Object.getPrototypeOf的区别

实用工具推荐