ECMA-262-3深入解析第七章：2、OOP ECMAScript 实现

踏浪

发布于 2021-06-09 19:56:03

6060

发布于 2021-06-09 19:56:03

文章被收录于专栏：踏浪的文章

从来没有深入了解ECMA，网上找了一下，发现早在2010年就有大佬 Dmitry Soshnikov 总结了ECMA中的核心内容，我这里只是翻译记录，加深自己的印象。文章原文来自 ECMA-262-3 in detail. Chapter 7.2. OOP: ECMAScript implementation.

介绍

这是ECMAScript中关于面向对象编程（OOP）的第二部分。在第一部分中我们讨论了一般理论，并与ECMAScript进行了比较。在阅读这部分内容之前，如果有必要，我还是建议你先读一读OOP的第一部分，因为在本文中我们会用到第一部分的术语。你可以在这里找到：ECMA-262-3 详解：7.1、OOP一般理论

ECMAScript OOP 实现

通过一般理论的重点介绍以后，终于到了ECMAScript自身。现在，当我们知道其面向对象的方法时，我们再一次进行准确的定义：

ECMAScript是一种面向对象编程的语言，支持基于原型的委托继承。

我们才考虑数据类型开始分析。首先要注意到的就是ECMAScript区分原始值与对象上的实体。因此有时在各种文章中出现的“JavaScript中万物皆对象”的习语是不正确的（不完整的）。原始值涉及到某些类型的数据，我们详细来讨论一下。

数据类型

虽然ECMAScript是一个动态的弱类型语言，带有“鸭子”类型，以及自动类型转换，但它仍然具有某些数据类型。也就是说，某一时刻，一个对象属于一种具体类型。

标准定义了9个类型，但是在ECMAScript进程中只有6个是可以直接访问的：

Undefined
Null
Boolean
String
Number
Object

（译者注：当前2020年添加了Symbol以及BigInt类型）。

其他三个只有在实现级别可以访问（ECMAScript对象都不具有这种类型），并由规范用域解释某些操作行为，存储中间值等。它们是：

Reference
List
Completion

因此（简要概述）, Reference 类型用于解释诸如 delete ， typeof ， this 等，并且由基础对象和属性名构成。 List 类型描述参数列表（在 new 表达式以及函数调用中）的表现。反过来， Completion 类型用域解释 break ， continue ， return 和 throw 语句行为。

回到ECMAScript程序中使用的6个类型，前面的5个： Undefined ， Null ， Boolean ， String 和 Number 是原始值类型。（译者注： Symbol 和 BigInt 也是原始值类型，也叫原始数据）。

原始值?：

var a = undefined;
var b = null;
var c = true;
var d = 'test';
var e = 10;

这些值直接在底层实现中表现。他们不是对象，他们没有原型，也没有构造器。

如果不能正确理解，typeof 操作符可能就不太直观了。典型的例子就是使用 typeof 操作符操作 null。当 typeof 操作符操作 null 时，无论是否将 null 指定给 Null，结果都是 "object" 。

console.log(typeof null); // "object"

原因是因为 typeof 操作符返回从标准表中获取的值，简单地说：“对于 null 值应该返回 "object" 字符串”。

规范并没有澄清此事，但是 Brendan Eich（Javascript创造者）注意到， null 与 undefined 相比， null 主要用于出现对象的地方，即与对象密切相关的本质（意味着对象的“空”引用，很可能是为未来目的保留了一个位置）。但是，在一些草稿中，这种“现象”被当作一个平常bug描述的地方提供了文档。而且，这个bug出现的Brendan Eich也参与的一个bug跟踪程序中。结果，尽管ECMA-262-3标准将 null 类型定义为 Null ，但是还是决定保留 typeof null 不变，即 "object" 。

对象类型

反过来， Object 类型（不要被 Object 构造函数混淆，我们只讨论抽象的类型）是代表ECMAScirpt对象的唯一类型。

对象是一个键值对的无序集合。

对象的键成为属性。属性是原始值与其他对象的容器。如果属性包含函数作为值，那它们被称为方法。

?：

var x = { // object "x" with three properties: a, b, c
  a: 10, // primitive value
  b: {z: 100}, // object "b" with property z
  c: function () { // function (method)
    console.log('method x.c');
  }
};
 
console.log(x.a); // 10
console.log(x.b); // [object Object]
console.log(x.b.z); // 100
x.c(); // 'method x.c'

动态性质

正如我们在7.1章节中提到的，ES中的对象是完全动态的。这就意味着我们可以在程序执行的任何时候对对象的属性进行添加，修改以及移除。

例如：

var foo = {x: 10};
 
// add new property
foo.y = 20;
console.log(foo); // {x: 10, y: 20}
 
// change property value to function
foo.x = function () {
  console.log('foo.x');
};
 
foo.x(); // 'foo.x'
 
// delete property
delete foo.x;
console.log(foo); // {y: 20}

一些属性不能被修改，不可配置的属性，即只读属性或者是已删除的属性。我们将在下面的章节考虑这些。

Note：ES5标准定化了静态对象，不能用新属性扩展，任何属性也不能被修改或者删除。这些成为冻结对象，可以通过 Object.freeze(o) 方法获得。

var foo = {x: 10};
 
// freeze the object
Object.freeze(foo);
console.log(Object.isFrozen(foo)); // true
 
// can't modify
foo.x = 100;
 
// can't extend
foo.y = 200;
 
// can't delete
delete foo.x;
 
console.log(foo); // {x: 10}

而且，使用 Object.preventExtensions(o) 方法只阻止扩展也是可以的，或者，使用 Object,defineProperty(o) 方法控制特殊的属性。

var foo = {x : 10};
 
Object.defineProperty(foo, "y", {
  value: 20,
  writable: false, // read-only
  configurable: false // non-configurable
});
 
// can't modify
foo.y = 200;
 
// can't delete
delete foo.y; // false
 
// prevent extensions
Object.preventExtensions(foo);
console.log(Object.isExtensible(foo)); // false
 
// can't add new properties
foo.z = 30;
 
console.log(foo); {x: 10, y: 20}

想要了解详情，阅读这篇文章。

内置，原生与宿主对象

有必要注意的是，规范区分了本地对象，内置对象以及宿主对象。

内置对象和原生对象是由ECMAScript规范和实现定义，他们之前的区别不明显。原生对象是ECMAScript实现提供的所有对象（其中一些可以内置，一些可以在程序执行期间创建，例如用户定义的对象）。

内置对象可以算是原生对象的一个子类，在程序开始之前已经内置到了ECMAScript中（例如 parseInt ， Math 等）。

所有的宿主对象都是由宿主环境提供，代表是浏览器，包含了许多宿主对象，例如 window ， console.log 等等。

注意，宿主对象可以使用ES自身实现，并且完全遵循规范语义。从这点来看，他们可以被叫做“原生宿主”对象（非正式的叫法），虽然主要是理论上的。规范并没有定义任何“原生宿主”的概念。

Boolean， String和Number对象

对于一些原始事物，规范定义了特殊的包装对象。他们是以下对象：

Boolean 对象
String 对象
Number 对象

这些对象是由相应的内置构造函数创建的，并包含了内置属性作为原始值。对象表示的可以转行为原始值，反之亦然。

var c = new Boolean(true);
var d = new String('test');
var e = new Number(10);
console.log(typeof c); // object
console.log(typeof d); // object
console.log(typeof e); // object
 
// converting to primitive
// conversion: ToPrimitive
// applying as a function, without "new" keyword
с = Boolean(c);
d = String(d);
e = Number(e);
console.log(typeof c); // boolean
console.log(typeof d); // string
console.log(typeof e); // number
 
// back to Object
// conversion: ToObject
с = Object(c);
d = Object(d);
e = Object(e);
console.log(typeof c); // object
console.log(typeof d); // object
console.log(typeof e); // object

除此之外，也有通过特殊内置对象创建的对象： Function （函数对象构造器）， Array （数组构造器）， RegExp （正则表达式构造器）， Math （数学方法）， Date （日期构造器）等等。这些对象也是 Object 类型的值，他们之前的区别是由内部属性管理的，我们将在下面讨论。

文字符号（字面符号）

对于三个对象值：object，array和regular表达式，有短记号，他们分别成为对象初始化程序，数组初始化程序与正则表达式文字：

// equivalent to new Array(1, 2, 3);
// or array = new Array();
// array[0] = 1;
// array[1] = 2;
// array[2] = 3;
var array = [1, 2, 3];
 
// equivalent to
// var object = new Object();
// object.a = 1;
// object.b = 2;
// object.c = 3;
var object = {a: 1, b: 2, c: 3};
 
// equivalent to new RegExp("^\\d+$", "g")
var re = /^\d+$/g;

注意，在重新分配名称（Object，Array，或者RegExp）到新对象的情况下，后续使用文字符号的语义在实现中可能会有所不同。例如在当前（2010.3.4）Rhino实现中或者是在旧的SpiderMonkey 1.7版本中，适当的文字符号将创建一个与构造函数名称的值相对应的对象。在其他的实现中，即使构造函数名称重新绑定到新对象，也不会更改文字符号的语义：

var getClass = Object.prototype.toString;
 
Object = Number;
 
var foo = new Object;
console.log([foo, getClass.call(foo)]); // 0, "[object Number]"
 
var bar = {};
 
// in Rhino, SpiderMonkey 1.7 - 0, "[object Number]"
// in other: still "[object Object]", "[object Object]"
console.log([bar, getClass.call(bar)]);
 
// the same with Array name
Array = Number;
 
foo = new Array;
console.log([foo, getClass.call(foo)]); // 0, "[object Number]"
 
bar = [];
 
// in Rhino, SpiderMonkey 1.7 - 0, "[object Number]"
// in other: still "", "[object Object]"
console.log([bar, getClass.call(bar)]);
 
// but for RegExp, semantics of the literal
// isn't being changed in all tested implementations
 
RegExp = Number;
 
foo = new RegExp;
console.log([foo, getClass.call(foo)]); // 0, "[object Number]"
 
bar = /(?!)/g;
console.log([bar, getClass.call(bar)]); // /(?!)/g, "[object RegExp]"

正则表达式字面量以及RegExp对象

注意，在ES3中，正则表达式在语义上等效的后两种情况仍然有所不同。正则字面量只存在一个实例中，并在解析阶段被创建，而 RegExp 构造函数总是会创建一个新的对象。这可能会造成一些问题，例如当regexp测试失败的时候，regexp对象的lastIndex属性：

for (var k = 0; k < 4; k++) {
  var re = /ecma/g;
  console.log(re.lastIndex); // 0, 4, 0, 4
  console.log(re.test("ecmascript")); // true, false, true, false
}
 
// in contrast with
 
for (var k = 0; k < 4; k++) {
  var re = new RegExp("ecma", "g");
  console.log(re.lastIndex); // 0, 0, 0, 0
  console.log(re.test("ecmascript")); // true, true, true, true
}

注意：在ES5中这个问题被修复了，正则字面量也是创建一个新的对象了。

关联数组？

通常在各种文章或者讨论中，Javascript对象（通常是通过声明形式创建的对象，通过对象初始化 {}）被称为哈希表或者更简单的哈希（Ruby或者Perl中的术语），关联数组（PHP中的术语），词典（Python中的术语）。

使用这种术语是具体技术的习惯。真的，他们足够相似，并且对于“键-值”对，存储完全对应于理论上的“关联数组”或“哈希表”数据结构。而且，哈希表抽象数据类型可能并且通常是用在实现级别。

然而，虽然用术语了的描述概念上的思维方式，但是对于ECMAScript而言，从技术上而言，这是不正确的。正如之前提到的，ECMAScript仅仅只有一个对象类型，并且关于“键-值”对存储的“子类型”互不影响。因此，没有单独的特殊术语（哈希或者其他）。因为任何对象（无论它的内部属性如何）都可以存储以下对：

var a = {x: 10};
a['y'] = 20;
a.z = 30;
 
var b = new Number(1);
b.x = 10;
b.y = 20;
b['z'] = 30;
 
var c = new Function('');
c.x = 10;
c.y = 20;
c['z'] = 30;
 
// etc. – with any object "subtype"

而且，因为委派，ECMAScript中的对象可以是非空的，因此术语“哈希”也可以是不正确的：

Object.prototype.x = 10;
 
var a = {}; // create "empty" "hash"
 
console.log(a["x"]); // 10, but it's not empty
console.log(a.toString); // function
 
a["y"] = 20; // add new pair to "hash"
console.log(a["y"]); // 20
 
Object.prototype.y = 20; // and property into the prototype
 
delete a["y"]; // remove
console.log(a["y"]); // but key and value are still here – 20

注意，ES5标准了无须原型即可创建对象的功能，即他们的原型被设置为 null 。使用 Object.create(null) 方法实现。从这点出发，这种对象是简单的哈希表：

var aHashTable = Object.create(null);
console.log(aHashTable.toString); // undefined

而且，一些属性可能有特殊的 getters/setters，因此也可能造成混淆：

var a = new String("foo");
a['length'] = 10;
console.log(a['length']); // 3

但是，即使考虑到“哈希”可能具有“原型”（例如，在Ruby或者Python中，代表哈希对象的类）。在ECMAScript中这个术语也可能不正确，因为在各种属性访问器之间没有语义上的区别（例如点和括号符号）。

同样在ECMAScript中，“属性”的概念在语义上没有分为“键”， “数组索引”， “方法” 或者“属性”。在这里，他们所有都是用过检查原型链来遵守读/写算法的一般规则的属性。

下面的Ruby的例子中，我们看到语义上的区别，因此，这里这些术语可能不同：

a = {}
a.class # Hash
 
a.length # 0
 
# new "key-value" pair
a['length'] = 10;
 
# but semantics for the dot notation
# remains other and means access
# to the "property/method", but not to the "key"
 
a.length # 1
 
# and the bracket notation
# provides access to "keys" of a hash
 
a['length'] # 10
 
# we can augment dynamically Hash class
# with new properties/methods and they via
# delegation will be available for already created objects
 
class Hash
  def z
    100
  end
end
 
# a new "property" is available
 
a.z # 100
 
# but not a "key"
 
a['z'] # nil

ECMA-262-3标准没有定义“哈希”（以及类似的）的概念。但是，如果要使用理论上的数据结构，也可以这样命名。

类型转换

将一个对象转换为一个原始值，可以使用 valueOf 方法。正如我们提到的，构造函数（对于某些类型）作为函数调用，例如，没有 new 操作符的情况下，将对象类型转换为一个原始值。对于这种转换，隐式调用了 valueOf 方法。

var a = new Number(1);
var primitiveA = Number(a); // implicit "valueOf" call
var alsoPrimitiveA = a.valueOf(); // explicit
 
console.log([
  typeof a, // "object"
  typeof primitiveA, // "number"
  typeof alsoPrimitiveA // "number"
]);

这个方法运行对象参与各种操作，例如，相加：

var a = new Number(1);
var b = new Number(2);
 
console.log(a + b); // 3
 
// or even so
 
var c = {
  x: 10,
  y: 20,
  valueOf: function () {
    return this.x + this.y;
  }
};
 
var d = {
  x: 30,
  y: 40,
  // the same .valueOf
  // functionality as "с" object has,
  // borrow it:
  valueOf: c.valueOf
};
 
console.log(c + d); // 100

默认情况下， valueOf 方法的值（如果没有被覆盖）可以根据对象类型有所不同。对于一些对象返回的是 this 值，例如 Object.prototype.valueOf() ，对于其他的返回任何可计算的值。例如 Date.prototype.valueOf() ，返回的是date的时间：

var a = {};
console.log(a.valueOf() === a); // true, "valueOf" returned this value
 
var d = new Date();
console.log(d.valueOf()); // time
console.log(d.valueOf() === d.getTime()); // true

另外，还有一个对象的原始表示形式 — 字符串表示形式。这个由 toStirng 方法负责，在一些操作中也是自动执行：

var a = {
  valueOf: function () {
    return 100;
  },
  toString: function () {
    return '__test';
  }
};
 
// in this operation
// toString method is
// called automatically
console.log(a); // "__test"  注意：在最新的 chrome 中 并不是作者说的这个值 而是 对象 a
 
// but here - the .valueOf() method
console.log(a + 10); // 110
 
// but if there is no
// valueOf method, it
// will be replaced with the
//toString method
delete a.valueOf;
console.log(a + 10); // "_test10"

toString 方法定义在 Object.prototype 上，有着特殊的意义。他返回了内置的 [[Class]] 属性的值，我们将在下面讨论这个值。

除了 ToPrimitive 转换外，还有 ToObject 转换，反之亦然，将值转换为对象类型。

一个明确的调用 ToObject 的方法就是将内置的 Object 构造函数作为普通函数调用（对于某些类型，使用带有 new 操作符的 Object 也是可能的）：

var n = Object(1); // [object Number]
var s = Object('test'); // [object String]
 
// also for some types it is
// possible to call Object with new operator
var b = new Object(true); // [object Boolean]
 
// but applied without arguments,
// new Object creates a simple object
var o = new Object(); // [object Object]
 
// in case if argument for Object function
// is already object value,
// it simply returns
var a = [];
console.log(a === new Object(a)); // true
console.log(a === Object(a)); // true

就带有 new 与不带有 new 操作符调用内置构造函数而言，没有通用规则，这取决于构造函数。例如 Array 和 Function 构造函数，在作为一个构造函数调用（有 new ）和作为普通函数（没有 new ）调用提供相同的结果。

var a = Array(1, 2, 3); // [object Array]
var b = new Array(1, 2, 3); // [object Array]
var c = [1, 2, 3]; // [object Array]
 
var d = Function(''); // [object Function]
var e = new Function(''); // [object Function]

运用某些操作的时候，还存在显示与隐式的转换：

var a = 1;
var b = 2;
 
// implicit
var c = a + b; // 3, number
var d = a + b + '5' // "35", string
 
// explicit
var e = '10'; // "10", string
var f = +e; // 10, number
var g = parseInt(e, 10); // 10, number
 
// etc.

属性的属性

所有的属性都有大量的属性：

{readOnly} ：尝试重写属性值是被忽略的；但是ReadOnly属性可以被宿主环境操作修改，因此，ReadOnly不意味着“不变的值”。
{DontEnum} ：属性不能通过 for...in 循环枚举
{DontDelete} ： delete 操作用于该属性将被忽视
{Internal} ：属性是内部的，没有名字并且只能用域实现级别；这类属性不能在ECMAScript程序中访问。

注意，在ES5中{ReadOnly}, {DontEnum} and {DontDelete} 被重命名为相应的 [[Writable]] , [[Enumerable]] ， [[Configurable]] 并且可以通过 Object.defineProperty 和相似的方法手动管理。

var foo = {};
 
Object.defineProperty(foo, "x", {
  value: 10,
  writable: true, // aka {ReadOnly} = false
  enumerable: false, // aka {DontEnum} = true
  configurable: true // {DontDelete} = false
});
 
console.log(foo.x); // 10
 
// attributes set is called a descriptor
var desc = Object.getOwnPropertyDescriptor(foo, "x");
 
console.log(desc.enumerable); // false
console.log(desc.writable); // true
// etc.

内部属性与方法

对象也可以拥有大量的内部属性，这些属性是实现的一部分，不能直接供ECMAScript程序访问（但是正如我们下面将看到的，某些实现是允许访问这些属性的）。按照约定，这些属性用双方括号 [[]] 括起来。

我们将会接触到一些（所有对象都是必须的）；其他属性的描述可以在规范中找到。

每个对象都应该实现以下的内部属性与方法：

[[Prototype]] ：对象的原型（将会在下面详细说明）。
[[Class]] ：一个代表对象类型的字符串（例如： Object ， Array ， Function 等等）；用于区分对象。
[[Get]] ：用于获取属性值的方法
[[Put]] ：用于设置属性值的方法
[[CanPut]] ：检测是否可以重写属性
[[HasProperty]] ：检测对象是否已经拥有这个属性
[[Delete]] ：从对象中移除属性
[[DefaultValue]] ：返回与对象相应的原始值（对于获取值， valueOf 方法被调用，对于一些对象，抛出 TypeError 异常）。

要从ECMAScript程序中获得 [[Class]] 属性，通过 Object.property.toString() 方法可以间接获得。这个方法可以返回如下字符串 "[Object " + [[Class]] + "]" 。例如：

var getClass = Object.prototype.toString;
 
getClass.call({}); // [object Object]
getClass.call([]); // [object Array]
getClass.call(new Number(1)); // [object Number]
// etc.

这个特征常用于检测对象的类型，然而，有必要注意的是，通过规范，宿主对象的内部 [[Class]] 属性可以是任何值，包括内置对象的 [[Class]] 值，从理论上将，不会进行100%证明的这种检查。例如，在老版本的IE中， document.childNodes.item(...) 方法的 [[Class]] 属性返回 "String" （在其他的实现中，返回 "Function"）

// in older IE - "String", in other - "Function"
console.log(getClass.call(document.childNodes.item));

构造函数

我们上面提及到，ECMAScript中对象是通过叫做构造函数的东西创建的。

构造函数是一个创建与初始化新创建对象的函数。

对于创建（内存分配），由构造函数内部的 [[Constuct]] 方法负责。指定了这个内部方法的行为，并且所有构造函数都使用这种方法为新对象分配内存。

通过在新创建的对象的上下文中调用函数来管理初始化。构造函数中已经存在的内部 [[Call]] 方法负责此行为。

注意，用户代码中只能访问初始阶段。因此，即使从初始化开始，我们可以忽略第一步中创建的 this 对象返回不同的对象：

function A() {
  // update newly created object
  this.x = 10;
  // but return different object
  return [1, 2, 3];
}
 
var a = new A();
console.log(a.x, a); undefined, [1, 2, 3]

定位到第五章函数中讲到的函数对象的创建法则，我们看到函数是一个本地对象，除其他属性外，还有内部的 [[Construct]] 和 [[Call]] 属性以及显示的 原型 属性 — 对未来对象原型的引用（注意，这里以及下面的 NativeObject 是我对ECMA-262-3中”本地对象”的伪代码命名约定，但不是内置构造函数）。

F = new NativeObject();
 
F.[[Class]] = "Function"
 
.... // other properties
 
F.[[Call]] = <reference to function> // function itself
 
F.[[Construct]] = internalConstructor // general internal constructor
 
.... // other properties
 
// prototype of objects created by the F constructor
__objectPrototype = {};
__objectPrototype.constructor = F // {DontEnum}
F.prototype = __objectPrototype

因此，除了 [[Class]] 属性（等同于 "Function"）之外的 [[Call]] 是区分对象的主要方法。因此，具有内部 [[Call]] 属性的对象被称为 functions。对于这些对象， typeof 操作符返回 "function" 值。因此，它主要与本地对象有关，在主机可以调用对象的情况下，某些实现中的 typeof 操作符（不少于 [[Class]] 属性）可能返回其他的值，例如，在IE中的 window.console.log(...)：

// in IE - "Object", "object", in other - "Function", "function"
console.log(Object.prototype.toString.call(window.console.log));
console.log(typeof window.console.log); // "Object"

内部的 [[Construct]] 方法由用于构造函数的 new 操作符激活。正如我们说的，这个方法负责内存分配以及新对象的创建。如果没有参数，则可以省略构造函数的括号：

function A(x) { // constructor А
  this.x = x || 10;
}

// without arguments, call
// brackets can be omitted
var a = new A; // or new A();
console.log(a.x); // 10

// explicit passing of
// x argument value
var b = new A(20);
console.log(b.x); // 20

并且，构造函数（初始阶段）中的this值被设置为新创建的这个对象。

我们来细想一下对象创建的计算规则。

对象创建的计算规则

内部的 [[Constuct]] 方法的行为可以被表示为：

F.[[Construct]](initialParameters):

O = new NativeObject();

// property [[Class]] is set to "Object", i.e. simple object
O.[[Class]] = "Object"

// get the object on which
// at the moment references F.prototype
var __objectPrototype = F.prototype;

// if __objectPrototype is an object, then:
O.[[Prototype]] = __objectPrototype
// else:
O.[[Prototype]] = Object.prototype;
// where O.[[Prototype]] is the prototype of the object

// initialization of the newly created object
// applying the F.[[Call]]; pass:
// as this value – newly created object - O,
// arguments are the same as initialParameters for F
R = F.[[Call]](initialParameters); this === O;
// where R is the returned value of the [[Call]]
// in JS view it looks like:
// R = F.apply(O, initialParameters);

// if R is an object
return R
// else
return O

注意两个主要的特征：

第一，创建对象的 prototype 属性是来自于当前时刻函数的 prototype 属性（这就意味着从一个构造函数创建的两个对象的属性可以改变，因为函数的 prototype 属性也可以改变）。

第二，我们上面提到，如果在对象初始时 [[Call]] 返回了一个对象，则将其作为整个 new 表达式的结果：

function A() {}
A.prototype.x = 10;

var a = new A();
console.log(a.x); // 10 – by delegation, from the prototype

// set .prototype property of the
// function to new object; why explicitly
// to define the .constructor property,
// will be described below
A.prototype = {
  constructor: A,
  y: 100
};

var b = new A();
// object "b" has new prototype
console.log(b.x); // undefined
console.log(b.y); // 100 – by delegation, from the prototype

// however, prototype of the "a" object
// is still old (why - we will see below)
console.log(a.x); // 10 - by delegation, from the prototype

function B() {
  this.x = 10;
  return new Array();
}

// if "B" constructor had not return
// (or was return this), then this-object
// would be used, but in this case – an array
var b = new B();
console.log(b.x); // undefined
console.log(Object.prototype.toString.call(b)); // [object Array]

我们再来深入的了解一下原型。

Prototype

每一个对象都含有一个原型（某些系统对象可以例外）。通过内部的，隐式的和不可访问的 [[Protorype]] 属性来组织与原型的通信。一个属性可以是一个对象也可以是一个 null 对象。

Property `constructor`

在上面的例子中有两点很重要。第一与函数prototype属性的构造函数属性有关。

正如我们在函数对象创建算法中看到的，在函数创建阶段， constructor 属性设置到函数的 prototype 属性中。此属性的值是对函数本身的循环引用：

function A() {}
var a = new A();
console.log(a.constructor); // function A() {}, by delegation
console.log(a.constructor === A); // true

通常这种情况下有误解 — constructor 属性错误的被当作创建对象的自身属性。然而，正如我们所看到的，这个属性属于原型，并且通过继承访问对象。

通过继承的 constructor 属性实例可以间接的获取原型对象的引用：

function A() {}
A.prototype.x = new Number(10);
 
var a = new A();
console.log(a.constructor.prototype); // [object Object]
 
console.log(a.x); // 10, via delegation
// the same as a.[[Prototype]].x
console.log(a.constructor.prototype.x); // 10
 
console.log(a.constructor.prototype.x === a.x); // true

注意，函数的 constructor 和 prototype 可以在对象创建后重新定义。这种情况下，对象失去通过上面机制的引用。

如果我们在原来的原型中通过函数的prototype 属性添加新的或者修改已经存在的属性，实例将会看到最新的添加的属性。

但是，如果我们完全修改了函数的prototype 属性（通过赋值一个新对象），失去原来构造函数（以及原来的原型）的引用。这是因为新创建的对象没有constructor 属性。

function A() {}
A.prototype = {
  x: 10
};
 
var a = new A();
console.log(a.x); // 10
console.log(a.constructor === A); // false!

因此，引用应该手动修复：

function A() {}
A.prototype = {
  constructor: A,
  x: 10
};
 
var a = new A();
console.log(a.x); // 10
console.log(a.constructor === A); // true

注意，手动添加的 constructor 属性与原来的相比，没有 {DontEnum} 属性，结果就是，在 A.prototype 中可以通过 for...in 循环枚举：

ES5中引入了通过[[Enumerable]]属性控制属性的可枚举状态的能力。

var foo = {x: 10};
 
Object.defineProperty(foo, "y", {
  value: 20,
  enumerable: false // aka {DontEnum} = true
});
  
console.log(foo.x, foo.y); // 10, 20
 
for (var k in foo) {
  console.log(k); // only "x"
}
 
var xDesc = Object.getOwnPropertyDescriptor(foo, "x");
var yDesc = Object.getOwnPropertyDescriptor(foo, "y");
 
console.log(
  xDesc.enumerable, // true
  yDesc.enumerable  // false
);

显示 `prototype` 与隐式的 `[[Prototype]]` 属性

通过函数的prototype属性直接引用原型，通常对象的原型被错误的混淆。是的，真的，他引用了相同的对象，即对象的 [[Prototype]] 属性：

a.[[Prototype]] ----> Prototype <---- A.prototype

而且，在对象创建阶段，实例的 [[Prototype]] 完全从构造函数的prototype属性上获取值。

然而，替换构造函数的prototype属性不影响已经创建的对象的原型。仅仅只是它的构造函数的prototype属性改变了。这意味着新对象会有一个新的原型。但是已经创建的对象（在 prototype 属性修改之前），拥有旧的原型的引用，并且引用不能被修改。

// was before changing of A.prototype
a.[[Prototype]] ----> Prototype <---- A.prototype
 
// became after
A.prototype ----> New prototype // new objects will have this prototype
a.[[Prototype]] ----> Prototype // reference to old prototype

?：

function A() {}
A.prototype.x = 10;
 
var a = new A();
console.log(a.x); // 10
 
A.prototype = {
  constructor: A,
  x: 20
  y: 30
};
 
// object "а" delegates to
// the old prototype via
// implicit [[Prototype]] reference
console.log(a.x); // 10
console.log(a.y) // undefined
 
var b = new A();
 
// but new objects at creation
// get reference to new prototype
console.log(b.x); // 20
console.log(b.y) // 30

因此，有时候在关于JavaScript的文章中会出现声明，声称“动态修改原型将会影响所有的对象，并且他们将会拥有新的原型”是错误的。新的原型只有在这个修改以后创建的新对象才有。

这里主要的规则是：对象的原型是在对象创建那一刻设置的，并且在那之后不能被修改为新对象。如果构造函数仍引用相同的对象，则使用该对象的显示原型引用，只能添加新的属性或者修改对象原型已经存在的属性。

非标准的 `proto` 属性

然而，一些实现中，例如，SpiderMonkey，通过非标准的 __proto__ 属性提供对象原型的显示引用：

function A() {}
A.prototype.x = 10;
 
var a = new A();
console.log(a.x); // 10
 
var __newPrototype = {
  constructor: A,
  x: 20,
  y: 30
};
 
// reference to new object
A.prototype = __newPrototype;
 
var b = new A();
console.log(b.x); // 20
console.log(b.y); // 30
 
// "a" object still delegates
// to the old prototype
console.log(a.x); // 10
console.log(a.y); // undefined
 
// change prototype explicitly
a.__proto__ = __newPrototype;
 
// now "а" object references
// to new object also
console.log(a.x); // 20
console.log(a.y); // 30

注意，ES5中引进了 Object.getPrototypeOf(o) 方法，直接返回对象的 [[Prototype]] 属性 — 实例原来的属性。但是，与 __proto__ 相比，作为一个 getter ，他不被允许设置属性。

var foo = {};
Object.getPrototypeOf(foo) == Object.prototype; // true

对象独立于其构造函数

因为实例的原型独立于构造函数和构造函数的prototype属性，构造函数在完成它的主要目的（创建对象）后，可以移除。原型对象将会继续存在，通过 [[Prototype]] 属性被引用。

function A() {}
A.prototype.x = 10;
 
var a = new A();
console.log(a.x); // 10
 
// set "А" to null - explicit
// reference on constructor
A = null;
 
// but, still possible to create
// objects via indirect reference
// from other object if
// .constructor property has not been changed
var b = new a.constructor();
console.log(b.x); // 10
 
// remove implicit reference
// after it `a.constructor`, and `b.constructor`
// will point to the default Object function, but not `A`
delete a.constructor.prototype.constructor;
 
// it is not possible to create objects
// of "А" constructor anymore, but still
// there are two such objects which
// still have reference to their prototype
console.log(a.x); // 10
console.log(b.x); // 10

`instanceof` 操作的特征

通过构造函数的prototype属性显示引用原型，与 instanceof 操作符的工作相关。

该操作符与对象的原型链完全协同工作，但不与构造函数本身协同工作。考虑到这一点，因为这里经常有误解。因此，有一个检查：

if (foo instanceof Foo) {
	...
}

这并不意味着检查 foo 对象是否由 Foo 构造函数创建。

instanceof 操作符的所有工作只是获取 Foo.prototype 属性的值以及从 foo.[[Prototype]] 开始检查 foo 的作用域链是否存在。 instanceof 操作符是由构造函数内部的 [[HasInstace]] 方法激活。

从例子出发来看看：

function A() {}
A.prototype.x = 10;
 
var a = new A();
console.log(a.x); // 10
 
console.log(a instanceof A); // true
 
// if set A.prototype
// to null...
A.prototype = null;
 
// ...then "a" object still
// has access to its
// prototype - via a.[[Prototype]]
console.log(a.x); // 10
 
// however, instanceof operator
// can't work anymore, because
// starts its examination from the
//prototype property of the constructor
console.log(a instanceof A); // error, A.prototype is not an object

另一方面，可以由一个构造函数创建对象，但是通过另一个对象检测 instanceof 将会返回 true 。很有必要设置对象的 [[Prototype]] 属性和构造函数的 prototype 属性到相同的对象：

function B() {}
var b = new B();
 
console.log(b instanceof B); // true
 
function C() {}
 
var __proto = {
  constructor: C
};
 
C.prototype = __proto;
b.__proto__ = __proto;
 
console.log(b instanceof C); // true
console.log(b instanceof B); // false

原型作为方法和共享属性的存储

在ECMAScript中原型最有用的应用是存储对象的方法、默认状态和共享属性。

的确，对象可以拥有自己的状态，当时方法通常都是相同的。因此，为了优化内存使用，方法通常被定义在原型上面。这意味着所有通过构造函数创建的实例总是共享相同的方法。

function A(x) {
  this.x = x || 100;
}
 
A.prototype = (function () {
 
  // initializing context,
  // use additional object
 
  var _someSharedVar = 500;
 
  function _someHelper() {
    console.log('internal helper: ' + _someSharedVar);
  }
 
  function method1() {
    console.log('method1: ' + this.x);
  }
 
  function method2() {
    console.log('method2: ' + this.x);
    _someHelper();
  }
 
  // the prototype itself
  return {
    constructor: A,
    method1: method1,
    method2: method2
  };
 
})();
 
var a = new A(10);
var b = new A(20);
 
a.method1(); // method1: 10
a.method2(); // method2: 10, internal helper: 500
 
b.method1(); // method1: 20
b.method2(); // method2: 20, internal helper: 500
 
// both objects are use
// the same methods from
// the same prototype
console.log(a.method1 === b.method1); // true
console.log(a.method2 === b.method2); // true

读写属性

我们提到，属性的读写是由内部的 [[Get]] 和 [[Put]] 方法管理。这个方法由属性访问器即操符号和括号符号激活。

// write
foo.bar = 10; // [[Put]] is called
 
console.log(foo.bar); // 10, [[Get]] is called
console.log(foo['bar']); // the same

让我们用伪代码来展示这些方法的工作原理。

`[[Get]]` 方法

[[Get]] 方法也会考虑到来自对象作用域链的属性。因此原型的属性可以作为自己的对象方法。

O.[[Get]](P):
 
// 如果有自己的属性，返回他
if (O.hasOwnProperty(P)) {
  return O.P;
}
 
// 否则分析属性
var __proto = O.[[Prototype]];
 
// 如果没有原型 (这是可能的，在链的最后，
// Object.prototype.[[Prototype]]等于null),
// 返回undefined;
if (__proto === null) {
  return undefined;
}
 
// 否则，递归调用[[Get]]方法，从原型开始，用过原型链找到原型的属性，
// 此后继续 直到[[Prototype]]等于null
return __proto.[[Get]](P)

注意，因为在某些情况下 [[Get]] 方法返回 undefined ，因此可以检查变量是否存在，像下面这样：

if (window.someObject) {
	...
}

这里，属性 someObject 没有在 window 中找到，接着在它的原型找，在原型的原型找，依次递归，在这种情况下，一直没找到，通过算法，返回 undefined 值。

注意，对于确切存在这件事，由 in 操作符负责。他也包含了原型链：

if ('someObject' in window) {
  ...
}

它有助于避免某些情况，例如 someObject 等于 false 以及即使 someObject 存在也不会通过第一次检测。

`[[Put]]` 方法

相反，[[Put]] 方法创建或者更新对象的自身属性，并用原型中相同的名字遮盖属性。

O.[[Put]](P, V):
 
// 如果我们不能写入属性，则退出
if (!O.[[CanPut]](P)) {
  return;
}
 
// 如果对象没有这些属性，创建它，所有属性都设置为false
if (!O.hasOwnProperty(P)) {
  createNewProperty(O, P, attributes: {
    ReadOnly: false,
    DontEnum: false,
    DontDelete: false,
    Internal: false
  });
}
 
// 设置值，如果属性存在，它的属性不能修改
O.P = V
 
return;

例如：

Object.prototype.x = 100;
 
var foo = {};
console.log(foo.x); // 100, inherited
 
foo.x = 10; // [[Put]]
console.log(foo.x); // 10, own
 
delete foo.x;
console.log(foo.x); // again 100, inherited

注意：有可能隐藏内部的只读属性。分配结果将被忽略。这个被内部的 [[CanPut]] 方法控制

// For example, property "length" of
// string objects is read-only; let's make a
// string as a prototype of our object and try
// to shadow the "length" property
 
function SuperString() {
  /* nothing */
}
 
SuperString.prototype = new String("abc");
 
var foo = new SuperString();
 
console.log(foo.length); // 3, the length of "abc"
 
// try to shadow
foo.length = 5;
console.log(foo.length); // still 3

在ES5的严格模式下，尝试隐藏不可写属性会导致TypeError。

属性访问器

在ECMAScript中，内部的 [[Get]] 和 [[Put]] 方法由属性访问器激活，可以通过点符号或者通过括号符号获得。点符号被用于属性名是一个有效的标识符名字以及提前知道的时候，括号符号允许动态生成的属性名称。

var a = {testProperty: 10};
 
console.log(a.testProperty); // 10, dot notation
console.log(a['testProperty']); // 10, bracket notation
 
var propertyName = 'Property';
console.log(a['test' + propertyName]); // 10, bracket notation with dynamic property

有一个很重要的特征 — 属性访问器总是从属性访问器调用位于左侧的对象的 ToObject 转换。并且由于隐式转换，可能被粗糙的说成“JavaScript一切皆对象”（但是，正如我们早就知道的，当然不是所有的东西，因为还有原始的东西）。

如果我们将属性访问器与原始值一起使用，只需要创建具有相应值的中间包装对象。工作完成后，移除这个包装对象。

?：

var a = 10; // 原始值
 
// 但是它有方法，就像他是一个对象
console.log(a.toString()); // "10"
 
// moreover, we can even
// (try) to create a new
// property in the "а" primitive calling [[Put]]
// 而且，我们甚至可以尝试在a上创建一个新属性，调用了原始的 [[Put]]
a.test = 100; // 没有报错，这个生效了
 
// 但是， [[Get]] 方法没有返回这个属性值，而是返回了 undefined
console.log(a.test); // undefined

所以，为什么在这个例子中，原始值 a 可以访问 toString 方法，但是不能访问新创建的 test 属性呢？

答案很简单：

首先，正如我们说的，应用属性访问器后，就不再是原始的，而是中间对象。在这个例子中， new Number(a) 使用了，通过算法找到了作用域链中的 toString 方法。

// 计算 a.toString() 的算法
 
1. wrapper = new Number(a);
2. wrapper.toString(); // "10"
3. delete wrapper;

接下来，当计算 test 属性的时候， [[Put]] 方法也会创建自己的中间对象：

 // 计算 a.test = 100 的算法
 
1. wrapper = new Number(a);
2. wrapper.test = 100;
3. delete wrapper;

我们看到在第三步中中间对象是被删除了，同时新创建的 test 对象当然会随着对象的移除而移除。

接着，调用 [[Get]] 方法，其中属性访问器再次创建新的包装对象，该包装对象当然对任何 test 属性都不知道：

// 计算 a.test 的算法
 
1. wrapper = new Number(a);
2. wrapper.test; // undefined

也就是说，从原语值引用属性/方法只对读取属性有意义。另外，如果任何一个原始值经常使用对属性的访问，为了节省时间资源，有一种直接用对象表示替换它的感觉。相反，如果值只参与一些不要求访问属性的小计算，则可以使用更有效的原始值。

继承

众所周知，ECMAScript使用基于原型的委托继承。

链接，原型生成时已经提到的原型链。

实际上，所有用域实现委托和原型链分析的工作都简化为上述的 [[Get]] 方法的工作。

如果你完全理解了 [[Get]] 方法的简单算法，Javascript中继承的问题将会自己消失，并且答案将会很清晰明了。

通常在论坛上当谈及关于JavaScript的继承的时候，我只展示一行ECMAScript代码的例子，非常精准明确的描述了这门语言对象的结构，并且展示了基于原型的委托。的确，我们不需要创建任何构造函数或者对象，整个语言都已经继承了。这行代码非常简单：

console.log(1..toString()); // "1"

现在我们知道了 [[Get]] 方法和属性访问器的算法，我们可以看看这里发生了什么：

首先，因为原始值 1 ， new Number(1) 作为中间对象被创建了；
接着继承的 toString 方法从中间对象调用。

为什么是继承的？因为ECMASCript中对象有自己的属性，并且创建的中间对象，在这里没有自己的 toString 方法。因此，它从原型上继承，即 Number.prototype 。

注意语法的微妙情况。上面例子中的两个点不是错误，第一个点用于数字的小数部分，第二个点是属性访问器：

1.toString(); // SyntaxError!
 
(1).toString(); // OK
 
1 .toString(); // OK (space after 1)
 
1..toString(); // OK
 
1['toString'](); // OK

原型链

我们来展示如何为用户定义的对象创建作用域链。相当简单：

function A() {
  console.log('A.[[Call]] activated');
  this.x = 10;
}
A.prototype.y = 20;
 
var a = new A();
console.log([a.x, a.y]); // 10 (own), 20 (inherited)
 
function B() {}
 
// the easiest variant of prototypes
// chaining is setting child
// prototype to new object created,
// by the parent constructor
B.prototype = new A();
 
// fix .constructor property, else it would be А
B.prototype.constructor = B;
 
var b = new B();
console.log([b.x, b.y]); // 10, 20, both are inherited
 
// [[Get]] b.x:
// b.x (no) -->
// b.[[Prototype]].x (yes) - 10
 
// [[Get]] b.y
// b.y (no) -->
// b.[[Prototype]].y (no) -->
// b.[[Prototype]].[[Prototype]].y (yes) - 20
 
// where b.[[Prototype]] === B.prototype,
// and b.[[Prototype]].[[Prototype]] === A.prototype

此方法具有两个特点。

第一， B.prototype 将会包含 x 属性。乍一看，像是不正确，因为 x 属性是作为 A 自身属性定义，并预期在 B 构造函数对象中也是自己的。

在原型继承的情况下，这是正确情况，因为后代对象如果没有这样属于自己的属性，将会委托给原型。背后的想法是，由 B 构造函数创建的对象不需要 x 属性。相反，在基于类模型中，所有的属性都复制到类后代。

但是，如果仍然需要（模拟基于类的方法）由 B 构造函数创建的对象拥有 x 属性，则对此有一些方法，我们将在下面显示其中一种方法。

第二，这已经不是功能而是缺点，当后代原型被创建，构造函数的代码也会执行。我们可以看到 A.[[Call]] activated 消息显示了两次，当 A 构造函数创建的对象被用于 B.prototype 的时候，以及对象创建时 a 对象自身。

一个更关键的例子是父构造函数中抛出的异常：对于这个构造函数创建的实际对象，可能需要这样的检查，但显然，使用这些父对象作为原型是完全不可接受的：

function A(param) {
  if (!param) {
    throw 'Param required';
  }
  this.param = param;
}
A.prototype.x = 10;
 
var a = new A(20);
console.log([a.x, a.param]); // 10, 20
 
function B() {}
B.prototype = new A(); // Error

除此之外，父级构造函数中的大量计算可以视为此方法的缺点。

要解决这些“特点”和问题，现在的程序员使用标准模式来连接原型，我面下面将看到的。这个技巧的主要目标是创建中间包装器构造函数，链接所需的原型。

function A() {
  console.log('A.[[Call]] activated');
  this.x = 10;
}
A.prototype.y = 20;
 
var a = new A();
console.log([a.x, a.y]); // 10 (own), 20 (inherited)
 
function B() {
  // or simply A.apply(this, arguments)
  B.superproto.constructor.apply(this, arguments);
}
 
// inheritance: chaining prototypes
// via creating empty intermediate constructor
var F = function () {};
F.prototype = A.prototype; // reference
B.prototype = new F();
B.superproto = A.prototype; // explicit reference to ancestor prototype, "sugar"
 
// fix .constructor property, else it would be A
B.prototype.constructor = B;
 
var b = new B();
console.log([b.x, b.y]); // 10 (own), 20 (inherited)

注意我们是如何在 b 实例上创建自己的 x 属性的：在新创建对象的上面我中，我们通过 B.superproto.constructor 引用调用父级构造函数。

我们也修复了无须使用父级构造函数来创建后代原型的问题。现在，当需要的时候， "A.[[Call]].activated" 消息会显示。

而且不要每次都重复原型链的相同操作（创建中间构造器，设置 superproto 糖，恢复原来的 constructor 等），这个模板可以封装在方便的工具函数中，不管构造函数的名字是什么，目的都是链接原型：

function inherit(child, parent) {
  var F = function () {};
  F.prototype = parent.prototype
  child.prototype = new F();
  child.prototype.constructor = child;
  child.superproto = parent.prototype;
  return child;
}

相应的，继承：

function A() {}
A.prototype.x = 10;
 
function B() {}
inherit(B, A); // chaining prototypes
 
var b = new B();
console.log(b.x); // 10, found in the A.prototype

这种包装有很多变种（关于语法方面），但是，所有这些都简化为上述描述。

例如，如果我们将中间构造函数放在外面（因此，只有一个函数会被创建），可以优化之前的包装，从而重用之前的：

var inherit = (function(){
  function F() {}
  return function (child, parent) {
    F.prototype = parent.prototype;
    child.prototype = new F;
    child.prototype.constructor = child;
    child.superproto = parent.prototype;
    return child;
  };
})();

因为对象的真实的原型是 [[Prototype]] 属性，这意味着 F.prototype 可以被轻易的修改与重用，因为通过 new F 创建的 child.prototype 将会从 child.prototype 的当前值获得他的 [[Prototype]] 。

function A() {}
A.prototype.x = 10;
 
function B() {}
inherit(B, A);
 
B.prototype.y = 20;
 
B.prototype.foo = function () {
  console.log("B#foo");
};
 
var b = new B();
console.log(b.x); // 10, is found in A.prototype
 
function C() {}
inherit(C, B);
 
// and using our "superproto" sugar
// we can call parent method with the same name
 
C.prototype.foo = function () {
  C.superproto.foo.call(this);
  console.log("C#foo");
};
 
var c = new C();
console.log([c.x, c.y]); // 10, 20
 
c.foo(); // B#foo, C#foo

注意，ES5标准化了这个工具函数，以实现更好的链接。它就是 Object.create 方法。

ES3中的简化版本几乎可以通过以下方式实现：

Object.create ||
Object.create = function (parent, properties) {
  function F() {}
  F.prototype = parent;
  var child = new F;
  for (var k in properties) {
    child[k] = properties[k].value;
  }
  return child;

使用：

var foo = {x: 10};
var bar = Object.create(foo, {y: {value: 20}});
console.log(bar.x, bar.y); // 10, 20

关于详情查看这篇文章。

同样，“JS中的经典继承”的现有的所有模仿形式都是基于这个原理。现在我们看到，实际上它甚至不是一个“基于模仿类的继承”，而只是原型链简单的代码重用。

注意：在ES6中“class”的概念标准化了，并被实现为如上所述的构造函数之上的语法糖。从这点出发，原型链变成了基于类继承的实现：

// ES6
class Foo {
  constructor(name) {
    this._name = name;
  }
 
  getName() {
    return this._name;
  }
}
 
class Bar extends Foo {
  getName() {
    return super.getName() + ' Doe';
  }
}
 
var bar = new Bar('John');
console.log(bar.getName()); // John Doe

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除

面向对象编程

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！