JavaScript基础：原型链与继承

面向对象

1.原型链

JavaScript只有一种结构：对象（object），变量、函数都是对象。对象都有原型，原型也是对象，像俄罗斯套娃一层套一层。

每个对象都有一个私有属性 __proto__，指向它的原型对象。任意一个对象，沿着__proto__一层层往上找原型对象，最终顶端都是Object对象。Object的原型对象为 null，根据定义，null没有原型，并作为原型链中的最后一个环节。这条通过__proto__属性一层层连接到最终null的链条，就是所谓的原型链。

这个__proto__在ES标准定义中原本的名字是[[Prototype]]。Chrome在具体实现的时候，将其命名为__proto__，读作"dunder proto"（"double underscore proto"的缩写）。

2.构造函数
 每个对象都有一个constructor属性，指向一个函数，表示这个对象的构造函数。一层一层往上找，最终都是由Function构造函数得来。Function的构造函数就是它自己，也是constructor属性的终点。

创建对象的前提是要有构造函数，因此所有对象都有constructor属性，除了null。这个构造函数可以是自己本身定义的，也可以通过__proto__在原型链中找到。

3.显示原型和隐式原型

Function(函数)是一个特殊对象，除了有__proto__以外，还有一个特有的原型属性prototype，指向这个函数的原型对象。所有函数都可以作为构造函数，创建出来的实例的原型对象，就是原函数的prototype。

函数在定义的时候会自动添加prototype, 默认值是一个空Object对象。它作用通常是修改所有实例共享的属性和方法。举个例子，你可以定义一下 Array.prototype.add = function(){}，这样所有的数组都有了add()方法。

由于函数同时拥有prototype和__proto__，为了区分，通常我们称prototype为显式原型，__proto__为隐式原型。

4.继承

当试图访问一个对象的属性时候，会优先在对象本身上查找。如果查找不到，就沿着原型链查找父对象的属性，层层向上搜索，直到找到一个名字匹配的属性。如果直到原型链末尾都没找到，则返回undefined。

// 创建一个对象o，自身拥有属性a和b：
let f = function () {
   this.a = 1;
   this.b = 2;
}
let o = new f();

// 在f函数的原型上定义属性
f.prototype.b = 3;
f.prototype.c = 4;

// 整个原型链如下:
// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); // 1
// a是o自身属性，值为1

console.log(o.b); // 2
// b是o自身属性，值为2

console.log(o.c); // 4
// c不是o自身属性，去o.__proto__找，找到c为4

console.log(o.d); // undefined
// d不是o自身属性，去o.__proto__没找到找，o.__proto__.__proto__也没找到，o.__proto__.__proto__.__proto__是null，停止搜索
// 找不到 d 属性，返回 undefined

继承方法和继承属性是一样的。唯一需要注意的是，继承方法时，this 指向的当前继承的对象，而不是原型对象。

四种创建对象的方式

1.语法结构

在变量声明的时候直接传入数据结构：

let a = {a: 1};
// 原型链如下:
// a ---> Object.prototype ---> null

let b = [1, 2, 3];
// 原型链如下:
// b ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 1;
}
// 原型链如下:
// f ---> Function.prototype ---> Object.prototype ---> null

2.构造函数

构造器其实就是一个普通的函数。使用 new 操作符 来作用这个函数时，就称为构造函数：

let f = function () {
  this.a = 1;
  this.b = 2;
}
f.prototype = {
  b: 3,
  c: 4,
}
let o = new f();
// o 为 {b: 3, d: 4}
// 因为 o 在实例化时，__proto__指向的是重新定义的f.prototype

3.使用 Object.create

ECMAScript 5 中引入了一个新方法：Object.create()，IE9以上支持。调用这个方法创建的对象，原型就是传入的第一个参数：

let a = {a: 1};
// 原型链如下:
// a ---> Object.prototype ---> null

let b = Object.create(a);
// 原型链如下:
// b ---> a ---> Object.prototype ---> null

let c = Object.create(b);
// 原型链如下:
// c ---> b ---> a ---> Object.prototype ---> null

4.使用 class 关键字

ECMAScript6 引入一套关键字 class、constructor、static、extends 和
 super。但其实本质上还是基于原型链的继承，支持语法让习惯类语言的开发人员更熟悉而已：

"use strict";

class Parent {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}

class Child extends Parent {
  constructor(a) {
    super(a, 2);
  }
  get sum() {
    return this.a + this.b;
  }
}

let o = new Child(2);

console.log(o); // Child {a: 2, b: 2}
// o是一个Child实例，Child继承了Parent

console.log(o.sum); //4
// 属性和方法也会被继承

六种继承对象的方式

1.原型链继承

// Child继承Parent
function Parent() {
  this.list = [1, 2, 3];
}
function Child() {
}
Child.prototype = new Parent();

// 新建两个Child实例，list属性是共享的
const c1 = new Child();
const c2 = new Child();
c1.list.push(4);
console.log(c1.list) // [1, 2, 3, 4]
console.log(c2.list) // [1, 2, 3, 4]

在变量声明的时候直接传入数据结构，简单易懂。缺点有两个：

1.创建子类型的时候，无法向父类构造函数传参

2.所有实例继承的属性是共享的。如上所示，一个实例修改了引用类型的属性，其他实例就受到了影响。

2.构造函数继承

// Child继承Parent
function Parent() {
  this.list = [1, 2, 3];
}
Parent.prototype.getList = function() {
  return this.list;
}
function Child() {
  Parent.call(this);
}

// 新建两个Child实例，list属性不共享
const c1 = new Child();
const c2 = new Child();
c1.list.push(4);
console.log(c1.list) // [1, 2, 3, 4]
console.log(c2.list) // [1, 2, 3]

// 无法继承原型上的属性和方法
child.getList(); // TypeError: child.getList is not a function

构造函数的本质，是在new内部实现的一个复制过程，把父类实例的属性复制一份到子类。继承的时候，通过call方法把父构造函数在子构造函数中重现了一遍。

虽然解决了实例共享问题，但整个过程完全没有用到原型prototype，自然也无法继承原型上的属性和方法了。

3.组合继承（前两种方式结合）

// Child继承Parent
function Parent() {
  this.list = [1, 2, 3];
}
Parent.prototype.getList = function() {
  return this.list;
}
function Child() {
  // 第二次调用 Parent()，避免继承属性共享
  Parent.call(this);
}
// 第一次调用 Parent()，继承父类方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;

第一次通过 Child.prototype = new Parent(); 创建父类实例作为子类原型。第二次 Parent.call(this)；从父类拷贝了一份父类实例属性，并且不再共享父类的属性。

结合了前两种的优点，但是Parent构造函数被调用了两次。虽然有“属性遮蔽” (property shadowing)，避免了共用父类属性，但实际上父类原型还有多余的第一次拷贝来的属性，还是会占用内存。

4.原型式继承

// 实现一个函数对传入的对象进行浅拷贝
function clone(obj){
  function F(){}
  F.prototype = obj;
  return new F();
}


// 使用这个函数来继承Parent对象
let Parent={
    val: 'a',
    list: [1, 2, 3]
};
let c1 = clone(Parent);
let c2 = clone(Parent);

// 属性共享
c1.list.push(4);
console.log(c1) // [1, 2, 3, 4]
console.log(c2) // [1, 2, 3, 4]

基于已有的对象来创建一个新的对象，更像是在”克隆“一个对象。父对象作为新构造函数的原型，引用类型的属性指向同一块内存，还是会有互相篡改的缺点。

上文提到的Object.create()，内部就是原型式继承，跟上述代码自己实现的clone()是一致的。

5.寄生式继承

function clone(parent) {
  let child = Object.create(parent);
  child.attr1 = 1;
  child.attr2 = 2;
  return child;
}

跟原型式继承差不多，只不过创建完新对象之后增强了一下再返回新的对象。可为子类增加更多方法，但是原型继承的缺点也都一样存在。

6.寄生组合式继承

function Parent() {
  this.list = [1, 2, 3];
}
Parent.prototype.getList = function() {
  return this.list;
}
function Child() {
  Parent.call(this);
}

Child.prototype = Object.create(Parent.prototype);

对组合继承优化，用 Object.create(Parent.prototype) 去掉了父类原型上多余的属性。无明显缺点，是最佳方案。

总结

原型链与继承，是前端笔试、面试中的必问题。本文介绍了JS原型链和继承的基础，并列举了常用的创建对象和继承对象的方式。

参考文献

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

本文未经许可禁止转载，如需转载关注微信公众号【工程师加一】并留言。