JavaScript 基于原型的继承

  |   0 评论   |   0 浏览

面向对象中的继承特性,有三种实现方案:

  • 基于类(class-based)
  • 基于原型(prototype-based)
  • 基于元类(metaclass-based)

JavaScript 采用的是基于原型的实现方案,这也是 JavaScript 最重要的语言特性之一。

ES6之前,在 JavaScript 中没有类(class)的概念,对象实例是通过构造函数来创建的。构造函数中有个 prototype属性,该属性的值就是原型。

原型也是一个对象实例,当使用构造函数创建对象实例时,新创建的对象实例就是从这个原型实例“复制”出来的。

每个对象都有一个 __proto__属性,当用构造函数创建对象实例时,构造函数的属性 prototype的值会赋给对象实例的 __proto__属性。

空的对象

所有的对象都继承自 Object.prototype,而 Object.prototype的原型是 null

1Object.prototype.__proto__;  // null

Object.prototype是一个“空”的对象,“空”的对象只有预定义的属性(包括方法)。这些属性会被所有的对象继承,使用下面的语句可以查看这些预定义的属性。

 1Object.getOwnPropertyNames(Object.prototype).forEach(function log(element, index, array) {
 2  console.log('[' + index + '] = ' + element);
 3});
 4[0] = constructor
 5[1] = __defineGetter__
 6[2] = __defineSetter__
 7[3] = hasOwnProperty
 8[4] = __lookupGetter__
 9[5] = __lookupSetter__
10[6] = isPrototypeOf
11[7] = propertyIsEnumerable
12[8] = toString
13[9] = valueOf
14[10] = __proto__
15[11] = toLocaleString

原型链

__proto__ 主要是安放在一个实际的对象中,用它来产生一个原型链,用于寻找方法名或属性,等等。

示例:

 1var a = {
 2x: 10,
 3calculate: function (z) {
 4return this.x + this.y + z;
 5}
 6};
 7
 8var b = {
 9y: 20,
10__proto__: a
11};
12
13var c = {
14y: 30,
15__proto__: a
16};
17
18// call the inherited method
19b.calculate(30); // 60
20c.calculate(40); // 80

以上示例中的原型链如下图所示:
Aprototypechain.png

注意:ES5 中,规定原型继承需要使用 Object.create() 函数。如下所示:

1var b = Object.create(a, {y: {value: 20}});
2var c = Object.create(a, {y: {value: 30}});

相关资料

36 | 编程范式游记(7)- 基于原型的编程范式
A prototype chain
《JavaScript语言精髓与编程实践》