JavaScript 继承原理：原型链、构造函数与对象拷贝实战

JavaScript 原型链基础

概述 JavaScript 中所有对象均拥有自己的继承链，即每个对象都继承自另一个被称为“原型”（prototype）的对象。唯一的例外是 null，它没有原型对象。

原型对象的核心作用在于属性与方法共享：若 A 是 B 的原型，则 B 可访问 A 的所有属性和方法。可通过 Object.getPrototypeOf 方法获取当前对象的原型。


var p = Object.getPrototypeOf(obj);

上述代码中，对象 p 即为对象 obj 的原型对象。

Object.create 方法用于创建一个新对象，并指定其继承的原型对象。


var obj = Object.create(p);

在上述代码中，新生成的 obj 对象的原型指向对象 p。

非标准的 __proto__ 属性（前后各两个下划线）可用于修改对象的原型。建议尽量避免直接使用该属性，而应采用 Object.getPrototypeOf() 和 Object.setPrototypeOf() 进行原型读写操作。


var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true

上述代码通过 __proto__ 属性，将 p 对象设置为 obj 对象的原型。

下面是一个实际应用的例子。


var a = {x: 1};
var b = {__proto__: a};
b.x // 1

在上述代码中，b 对象通过 __proto__ 属性将其原型设为 a 对象，因此 b 可以访问 a 的所有属性和方法。尽管 b 自身没有 x 属性，但 JavaScript 引擎会通过 __proto__ 查找其原型对象 a，进而读取 a 的 x 属性。

new 命令通过构造函数创建实例对象，其本质是将实例对象的原型绑定到构造函数的 prototype 属性，并在实例上执行构造函数。


var o = new Foo();

// 等同于
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);

原型对象自身的 __proto__ 属性可指向其他对象，从而逐级形成“原型链”（prototype chain）。


var a = { x: 1 };
var b = { __proto__: a };
var c = { __proto__: b };

c.x // 1

需注意，沿原型链向上查找属性会影响性能。属性所在的原型层级越高，性能影响越大。若查找不存在的属性，引擎将遍历整个原型链。

this 指向与构造函数继承

this 的动作指向无论 this 在哪里定义，使用时它始终指向当前对象，而非原型对象。


var o = {
 a: 2,
 m: function(b) {
  return this.a + 1;
 }
};

var p = Object.create(o);
p.a = 12;

p.m() // 13

在上述代码中，p 对象的 m 方法来自其原型对象 o。此时，m 方法内部的 this 指向 p，而非 o。

构造函数的继承本节介绍如何让一个构造函数继承另一个构造函数。

假设存在一个 Shape 构造函数。


function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function (x, y) {
 this.x += x;
 this.y += y;
 console.info('Shape moved.');
};
Rectangle构造函数继承Shape。

function Rectangle() {
 Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
 this.base = Shape;
 this.base();
}

// 子类继承父类的方法
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

rect instanceof Rectangle // true
rect instanceof Shape // true

rect.move(1, 1) // 'Shape moved.'

上述代码表明，构造函数的继承包含两部分：子类调用父类的构造方法，以及子类的原型指向父类的原型。

上述代码中，子类整体继承父类。有时仅需继承单个方法，可采用以下写法。


ClassB.prototype.print = function() {
 ClassA.prototype.print.call(this);
 // some code
}

上述代码中，子类 B 的 print 方法先调用父类 A 的 print 方法，再执行自身代码，从而实现了父类 print 方法的继承。

proto 属性与原型获取方法

__proto__ 属性 __proto__ 属性指向当前对象的原型对象，即构造函数的 prototype 属性。


var obj = new Object();

obj.__proto__ === Object.prototype
// true
obj.__proto__ === obj.constructor.prototype
// true

上述代码首先新建对象 obj，其 __proto__ 属性指向构造函数（Object 或 obj.constructor）的 prototype 属性。因此，两者比较后返回 true。

因此，获取实例对象 obj 的原型对象有三种方法。

obj.__proto__
obj.constructor.prototype
Object.getPrototypeOf(obj)

上述三种方法中，前两种可靠性较低。最新 ES6 标准规定，__proto__ 属性仅在浏览器中需要部署，其他环境可不部署。而 obj.constructor.prototype 在手动修改原型对象时可能失效。


var P = function () {};
var p = new P();

var C = function () {};
C.prototype = p;
var c = new C();

c.constructor.prototype === p // false

上述代码中，C 构造函数的原型对象被改为 p，导致 c.constructor.prototype 失真。因此，修改原型对象时，通常需同时设置 constructor 属性。


C.prototype = p;
C.prototype.constructor = C;

c.constructor.prototype === p // true

因此，推荐使用第三种 Object.getPrototypeOf 方法获取原型对象。其用法如下。


var o = new Object();

Object.getPrototypeOf(o) === Object.prototype
// true

可使用 Object.getPrototypeOf 方法检查浏览器是否支持 __proto__ 属性，老式浏览器不支持该属性。


Object.getPrototypeOf({ __proto__: null }) === null

上述代码将一个对象的 __proto__ 属性设为 null，然后使用 Object.getPrototypeOf 获取该对象的原型，判断是否等于 null。若当前环境支持 __proto__ 属性，两者比较结果应为 true。

有了 __proto__ 属性，即可方便地设置实例对象的原型。假设有三个对象 machine、vehicle 和 car，其中 machine 是 vehicle 的原型，vehicle 又是 car 的原型，只需两行代码即可设置。


vehicle.__proto__ = machine;
car.__proto__ = vehicle;

下面是一个实例，通过 __proto__ 属性与 constructor.prototype 属性两种方法，分别读取定义在原型对象上的属性。


Array.prototype.p = 'abc';
var a = new Array();

a.__proto__.p // abc
a.constructor.prototype.p // abc

显然，__proto__ 看起来更为简洁。

通过构造函数生成实例对象时，实例对象的 __proto__ 属性会自动指向构造函数的 prototype 对象。


var f = function (){};
var a = {};

f.prototype = a;
var o = new f();

o.__proto__ === a
// true

对象属性与继承机制

属性的继承属性分为两种：对象自身的原生属性，以及继承自原型的继承属性。

对象的原生属性对象本身的所有属性，可使用 Object.getOwnPropertyNames 方法获取。


Object.getOwnPropertyNames(Date)
// ["parse", "arguments", "UTC", "caller", "name", "prototype", "now", "length"]

对象本身的属性中，部分可枚举（enumerable），部分不可枚举。仅获取可枚举属性时，使用 Object.keys 方法。


Object.keys(Date) // []
hasOwnProperty()

hasOwnProperty 方法返回布尔值，用于判断属性是定义在对象自身还是原型链上。


Date.hasOwnProperty('length')
// true

Date.hasOwnProperty('toString')
// false

hasOwnProperty 是 JavaScript 中处理对象属性时唯一不遍历原型链的方法。

对象的继承属性使用 Object.create 方法创建的对象，会继承所有原型对象的属性。


var proto = { p1: 123 };
var o = Object.create(proto);

o.p1 // 123
o.hasOwnProperty("p1") // false

获取所有属性判断对象是否具有某属性（无论自身还是继承），使用 in 运算符。


"length" in Date // true
"toString" in Date // true

获取对象的所有可枚举属性（无论自身还是继承），可使用 for-in 循环。


var o1 = {p1: 123};

var o2 = Object.create(o1,{
 p2: { value: "abc", enumerable: true }
});

for (p in o2) {console.info(p);}
// p2
// p1

为了在 for...in 循环中获取对象自身的属性，可采用 hasOwnProperty 方法进行判断。


for ( var name in object ) {
 if ( object.hasOwnProperty(name) ) {
  /* loop code */
 }
}

获取对象的所有属性（无论自身还是继承，以及是否可枚举），可使用以下函数。


function inheritedPropertyNames(obj) {
 var props = {};
 while(obj) {
  Object.getOwnPropertyNames(obj).forEach(function(p) {
   props[p] = true;
  });
  obj = Object.getPrototypeOf(obj);
 }
 return Object.getOwnPropertyNames(props);
}

用法如下：


inheritedPropertyNames(Date)
// ["caller", "constructor", "toString", "UTC", "call", "parse", "prototype", "__defineSetter__", "__lookupSetter__", "length", "arguments", "bind", "__lookupGetter__", "isPrototypeOf", "toLocaleString", "propertyIsEnumerable", "valueOf", "apply", "__defineGetter__", "name", "now", "hasOwnProperty"]

对象拷贝与多重继承

对象的拷贝若要拷贝一个对象，需完成以下两件事。

确保拷贝后的对象与原对象具有相同的 prototype 原型对象。确保拷贝后的对象与原对象具有相同的属性。以下是根据上述两点编写的对象拷贝函数。


function copyObject(orig) {
 var copy = Object.create(Object.getPrototypeOf(orig));
 copyOwnPropertiesFrom(copy, orig);
 return copy;
}

function copyOwnPropertiesFrom(target, source) {
 Object
 .getOwnPropertyNames(source)
 .forEach(function(propKey) {
  var desc = Object.getOwnPropertyDescriptor(source, propKey);
  Object.defineProperty(target, propKey, desc);
 });
 return target;
}

多重继承 JavaScript 不提供多重继承功能，即不允许一个对象同时继承多个对象。但可通过变通方法实现此功能。


function M1(prop) {
 this.hello = prop;
}

function M2(prop) {
 this.world = prop;
}

function S(p1, p2) {
 this.base1 = M1;
 this.base1(p1);
 this.base2 = M2;
 this.base2(p2);
}
S.prototype = new M1();

var s = new S(111, 222);
s.hello // 111
s.world // 222

上述代码中，子类 S 同时继承了父类 M1 和 M2。从继承链看，S 只有一个父类 M1，但由于在 S 的实例上同时执行了 M1 和 M2 的构造函数，因此它同时继承了这两个类的方法。

JavaScript 原型链与继承机制详解

JavaScript 原型链基础

this 指向与构造函数继承

proto 属性与原型获取方法

对象属性与继承机制

对象拷贝与多重继承

实用工具推荐

JavaScript 原型链与继承机制详解

JavaScript 原型链基础

this 指向与构造函数继承

__proto__ 属性与原型获取方法

对象属性与继承机制

对象拷贝与多重继承

实用工具推荐

proto 属性与原型获取方法