JavaScript 面向?qū)ο缶幊讨瓻CMAScript實現(xiàn)（推薦）

介紹

英文原文：http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/

ECMAScript is an object-oriented programming language supporting delegating inheritance based on prototypes.
ECMAScript是一種面向?qū)ο笳Z言，支持基于原型的委托式繼承。

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

alert(typeof null); // "object"

Object is an unordered collection of key-value pairs.
對象是一個包含key-value對的無序集合

var x = { // 對象"x"有3個屬性: a, b, c
  a: 10, // 原始值
  b: {z: 100}, // 對象"b"有一個屬性z
  c: function () { // 函數(shù)(方法)
    alert('method x.c');
  }
};

alert(x.a); // 10
alert(x.b); // [object Object]
alert(x.b.z); // 100
x.c(); // 'method x.c'

var foo = {x: 10};

// 添加新屬性
foo.y = 20;
console.log(foo); // {x: 10, y: 20}

// 將屬性值修改為函數(shù)
foo.x = function () {
  console.log('foo.x');
};

foo.x(); // 'foo.x'

// 刪除屬性
delete foo.x;
console.log(foo); // {y: 20}

var foo = {x: 10};

// 凍結(jié)對象
Object.freeze(foo);
console.log(Object.isFrozen(foo)); // true

// 不能修改
foo.x = 100;

// 不能擴展
foo.y = 200;

// 不能刪除
delete foo.x;

console.log(foo); // {x: 10}

var foo = {x : 10};

Object.defineProperty(foo, "y", {
  value: 20,
  writable: false, // 只讀
  configurable: false // 不可配置
});

// 不能修改
foo.y = 200;

// 不能刪除
delete foo.y; // false

// 防治擴展
Object.preventExtensions(foo);
console.log(Object.isExtensible(foo)); // false

// 不能添加新屬性
foo.z = 30;

console.log(foo); {x: 10, y: 20}

var c = new Boolean(true);
var d = new String('test');
var e = new Number(10);

// 轉(zhuǎn)換成原始值
// 使用不帶new關(guān)鍵字的函數(shù)
с = Boolean(c);
d = String(d);
e = Number(e);

// 重新轉(zhuǎn)換成對象
с = Object(c);
d = Object(d);
e = Object(e);

// 等價于new Array(1, 2, 3);
// 或者array = new Array();
// array[0] = 1;
// array[1] = 2;
// array[2] = 3;
var array = [1, 2, 3];

// 等價于
// var object = new Object();
// object.a = 1;
// object.b = 2;
// object.c = 3;
var object = {a: 1, b: 2, c: 3};

// 等價于new RegExp("^\d+$", "g")
var re = /^\d+$/g;

var getClass = Object.prototype.toString;

Object = Number;

var foo = new Object;
alert([foo, getClass.call(foo)]); // 0, "[object Number]"

var bar = {};

// Rhino, SpiderMonkey 1.7中 - 0, "[object Number]"
// 其它: still "[object Object]", "[object Object]"
alert([bar, getClass.call(bar)]);

// Array也是一樣的效果
Array = Number;

foo = new Array;
alert([foo, getClass.call(foo)]); // 0, "[object Number]"

bar = [];

// Rhino, SpiderMonkey 1.7中 - 0, "[object Number]"
// 其它: still "", "[object Object]"
alert([bar, getClass.call(bar)]);

// 但對RegExp,字面量的語義是不被改變的。 semantics of the literal
// isn't being changed in all tested implementations

RegExp = Number;

foo = new RegExp;
alert([foo, getClass.call(foo)]); // 0, "[object Number]"

bar = /(?!)/g;
alert([bar, getClass.call(bar)]); // /(?!)/g, "[object RegExp]"

for (var k = 0; k < 4; k++) {
  var re = /ecma/g;
  alert(re.lastIndex); // 0, 4, 0, 4
  alert(re.test("ecmascript")); // true, false, true, false
}

// 對比

for (var k = 0; k < 4; k++) {
  var re = new RegExp("ecma", "g");
  alert(re.lastIndex); // 0, 0, 0, 0
  alert(re.test("ecmascript")); // true, true, true, true
}

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;

// 等等，任意對象的子類型"subtype"

Object.prototype.x = 10;

var a = {}; // 創(chuàng)建空"hash"

alert(a["x"]); // 10, 但不為空
alert(a.toString); // function

a["y"] = 20; // 添加新的鍵值對到 "hash"
alert(a["y"]); // 20

Object.prototype.y = 20; // 添加原型屬性

delete a["y"]; // 刪除
alert(a["y"]); // 但這里key和value依然有值 – 20

var aHashTable = Object.create(null);
console.log(aHashTable.toString); // 未定義

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

a = {}
a.class # Hash

a.length # 0

# new "key-value" pair
a['length'] = 10;

# 語義上，用點訪問的是屬性或方法，而不是key

a.length # 1

# 而索引器訪問訪問的是hash里的key

a['length'] # 10

# 就類似于在現(xiàn)有對象上動態(tài)聲明Hash類
# 然后聲明新屬性或方法

class Hash
  def z
    100
  end
end

# 新屬性可以訪問

a.z # 100

# 但不是"key"

a['z'] # nil

var a = new Number(1);
var primitiveA = Number(a); // 隱式"valueOf"調(diào)用
var alsoPrimitiveA = a.valueOf(); // 顯式調(diào)用

alert([
  typeof a, // "object"
  typeof primitiveA, // "number"
  typeof alsoPrimitiveA // "number"
]);

var a = new Number(1);
var b = new Number(2);

alert(a + b); // 3

// 甚至

var c = {
  x: 10,
  y: 20,
  valueOf: function () {
    return this.x + this.y;
  }
};

var d = {
  x: 30,
  y: 40,
  // 和c的valueOf功能一樣
  valueOf: c.valueOf
};

alert(c + d); // 100

var a = {};
alert(a.valueOf() === a); // true, "valueOf"返回this

var d = new Date();
alert(d.valueOf()); // time
alert(d.valueOf() === d.getTime()); // true

var a = {
  valueOf: function () {
    return 100;
  },
  toString: function () {
    return 'test';
  }
};

// 這個操作里，toString方法自動調(diào)用
alert(a); // "test"

// 但是這里，調(diào)用的卻是valueOf()方法
alert(a + 10); // 110

// 但，一旦valueOf刪除以后
// toString又可以自動調(diào)用了
delete a.valueOf;
alert(a + 10); // "_test10"

var n = Object(1); // [object Number]
var s = Object('test'); // [object String]

// 一些類似，使用new操作符也可以
var b = new Object(true); // [object Boolean]

// 應(yīng)用參數(shù)new Object的話創(chuàng)建的是簡單對象
var o = new Object(); // [object Object]

// 如果參數(shù)是一個現(xiàn)有的對象
// 那創(chuàng)建的結(jié)果就是簡單返回該對象
var a = [];
alert(a === new Object(a)); // true
alert(a === Object(a)); // true

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;

// 隱式
var c = a + b; // 3, number
var d = a + b + '5' // "35", string

// 顯式
var e = '10'; // "10", string
var f = +e; // 10, number
var g = parseInt(e, 10); // 10, number

// 等等

var foo = {};

Object.defineProperty(foo, "x", {
  value: 10,
  writable: true, // 即{ReadOnly} = false
  enumerable: false, // 即{DontEnum} = true
  configurable: true // 即{DontDelete} = false
});

console.log(foo.x); // 10

// 通過descriptor獲取特性集attributes
var desc = Object.getOwnPropertyDescriptor(foo, "x");

console.log(desc.enumerable); // false
console.log(desc.writable); // true
// 等等

var getClass = Object.prototype.toString;

getClass.call({}); // [object Object]
getClass.call([]); // [object Array]
getClass.call(new Number(1)); // [object Number]
// 等等

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

Constructor is a function that creates and initializes the newly created object.
構(gòu)造函數(shù)是一個函數(shù)，用來創(chuàng)建并初始化新創(chuàng)建的對象。

function A() {
  // 更新新創(chuàng)建的對象
  this.x = 10;
  // 但返回的是不同的對象
  return [1, 2, 3];
}

var a = new A();
console.log(a.x, a); undefined, [1, 2, 3]

F = new NativeObject();

F.[[Class]] = "Function"

.... // 其它屬性

F.[[Call]] = <reference to function> // function自身

F.[[Construct]] = internalConstructor // 普通的內(nèi)部構(gòu)造函數(shù)

.... // 其它屬性

// F構(gòu)造函數(shù)創(chuàng)建的對象原型
objectPrototype = {};
objectPrototype.constructor = F // {DontEnum}
F.prototype = __objectPrototype

// IE瀏覽器中 - "Object", "object", 其它瀏覽器 - "Function", "function"
alert(Object.prototype.toString.call(window.alert));
alert(typeof window.alert); // "Object"

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

// 不傳參數(shù)的話，括號也可以省略
var a = new A; // or new A();
alert(a.x); // 10

// 顯式傳入?yún)?shù)x
var b = new A(20);
alert(b.x); // 20

F.[Construct]:

O = new NativeObject();

// 屬性[[Class]]被設(shè)置為"Object"
O.[[Class]] = "Object"

// 引用F.prototype的時候獲取該對象g
var objectPrototype = F.prototype;

// 如果objectPrototype是對象，就:
O.[[Prototype]] = __objectPrototype
// 否則:
O.[[Prototype]] = Object.prototype;
// 這里O.[[Prototype]]是Object對象的原型

// 新創(chuàng)建對象初始化的時候應(yīng)用了F.[[Call]]
// 將this設(shè)置為新創(chuàng)建的對象O
// 參數(shù)和F里的initialParameters是一樣的
R = F.[Call]; this === O;
// 這里R是[[Call]]的返回值
// 在JS里看，像這樣:
// R = F.apply(O, initialParameters);

// 如果R是對象
return R
// 否則
return O

讓我們來詳細(xì)了解一下原型

原型

每個對象都有一個原型（一些系統(tǒng)對象除外）。原型通信是通過內(nèi)部的、隱式的、不可直接訪問[[Prototype]]原型屬性來進行的，原型可以是一個對象，也可以是null值。

屬性構(gòu)造函數(shù)(Property constructor)

上面的例子有有2個重要的知識點，第一個是關(guān)于函數(shù)的constructor屬性的prototype屬性，在函數(shù)創(chuàng)建的算法里，我們知道constructor屬性在函數(shù)創(chuàng)建階段被設(shè)置為函數(shù)的prototype屬性，constructor屬性的值是函數(shù)自身的重要引用：

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

通常在這種情況下，存在著一個誤區(qū)：constructor構(gòu)造屬性作為新創(chuàng)建對象自身的屬性是錯誤的，但是，正如我們所看到的的，這個屬性屬于原型并且通過繼承來訪問對象。

通過繼承constructor屬性的實例，可以間接得到的原型對象的引用：

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

var a = new A();
alert(a.constructor.prototype); // [object Object]

alert(a.x); // 10, 通過原型
// 和a.[[Prototype]].x效果一樣
alert(a.constructor.prototype.x); // 10

alert(a.constructor.prototype.x === a.x); // true

但請注意，函數(shù)的constructor和prototype屬性在對象創(chuàng)建以后都可以重新定義的。在這種情況下，對象失去上面所說的機制。如果通過函數(shù)的prototype屬性去編輯元素的prototype原型的話（添加新對象或修改現(xiàn)有對象），實例上將看到新添加的屬性。

然而，如果我們徹底改變函數(shù)的prototype屬性（通過分配一個新的對象），那原始構(gòu)造函數(shù)的引用就是丟失，這是因為我們創(chuàng)建的對象不包括constructor屬性：

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

var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // false!

因此，對函數(shù)的原型引用需要手工恢復(fù)：

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

var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // true

注意雖然手動恢復(fù)了constructor屬性，和原來丟失的原型相比，{DontEnum}特性沒有了，也就是說A.prototype里的for..in循環(huán)語句不支持了，不過第5版規(guī)范里，通過[[Enumerable]] 特性提供了控制可枚舉狀態(tài)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]]屬性

通常，一個對象的原型通過函數(shù)的prototype屬性顯式引用是不正確的，他引用的是同一個對象，對象的[[Prototype]]屬性：

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

此外， 實例的[[Prototype]]值確實是在構(gòu)造函數(shù)的prototype屬性上獲取的。

然而，提交prototype屬性不會影響已經(jīng)創(chuàng)建對象的原型（只有在構(gòu)造函數(shù)的prototype屬性改變的時候才會影響到)，就是說新創(chuàng)建的對象才有有新的原型，而已創(chuàng)建對象還是引用到原來的舊原型（這個原型已經(jīng)不能被再被修改了）。

// 在修改A.prototype原型之前的情況
a.[[Prototype]] ----> Prototype <---- A.prototype

// 修改之后
A.prototype ----> New prototype // 新對象會擁有這個原型
a.[[Prototype]] ----> Prototype // 引導(dǎo)的原來的原型上

例如：

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

var a = new A();
alert(a.x); // 10

A.prototype = {
  constructor: A,
  x: 20
  y: 30
};

// 對象a是通過隱式的[[Prototype]]引用從原油的prototype上獲取的值
alert(a.x); // 10
alert(a.y) // undefined

var b = new A();

// 但新對象是從新原型上獲取的值
alert(b.x); // 20
alert(b.y) // 30

因此，有的文章說“動態(tài)修改原型將影響所有的對象都會擁有新的原型”是錯誤的，新原型僅僅在原型修改以后的新創(chuàng)建對象上生效。

這里的主要規(guī)則是：對象的原型是對象的創(chuàng)建的時候創(chuàng)建的，并且在此之后不能修改為新的對象，如果依然引用到同一個對象，可以通過構(gòu)造函數(shù)的顯式prototype引用，對象創(chuàng)建以后，只能對原型的屬性進行添加或修改。

非標(biāo)準(zhǔn)的proto屬性

然而，有些實現(xiàn)（例如SpiderMonkey），提供了不標(biāo)準(zhǔn)的proto顯式屬性來引用對象的原型：

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

var a = new A();
alert(a.x); // 10

var newPrototype = {
  constructor: A,
  x: 20,
  y: 30
};

// 引用到新對象
A.prototype = newPrototype;

var b = new A();
alert(b.x); // 20
alert(b.y); // 30

// "a"對象使用的依然是舊的原型
alert(a.x); // 10
alert(a.y); // undefined

// 顯式修改原型
a.proto = __newPrototype;

// 現(xiàn)在"а"對象引用的是新對象
alert(a.x); // 20
alert(a.y); // 30

注意，ES5提供了Object.getPrototypeOf(O)方法，該方法直接返回對象的[[Prototype]]屬性——實例的初始原型。 然而，和proto相比，它只是getter，它不允許set值。

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

對象獨立于構(gòu)造函數(shù)

因為實例的原型獨立于構(gòu)造函數(shù)和構(gòu)造函數(shù)的prototype屬性，構(gòu)造函數(shù)完成了自己的主要工作（創(chuàng)建對象）以后可以刪除。原型對象通過引用[[Prototype]]屬性繼續(xù)存在：

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

var a = new A();
alert(a.x); // 10

// 設(shè)置A為null - 顯示引用構(gòu)造函數(shù)
A = null;

// 但如果.constructor屬性沒有改變的話，
// 依然可以通過它創(chuàng)建對象
var b = new a.constructor();
alert(b.x); // 10

// 隱式的引用也刪除掉
delete a.constructor.prototype.constructor;
delete b.constructor.prototype.constructor;

// 通過A的構(gòu)造函數(shù)再也不能創(chuàng)建對象了
// 但這2個對象依然有自己的原型
alert(a.x); // 10
alert(b.x); // 10

instanceof操作符的特性

我們是通過構(gòu)造函數(shù)的prototype屬性來顯示引用原型的，這和instanceof操作符有關(guān)。該操作符是和原型鏈一起工作的，而不是構(gòu)造函數(shù)，考慮到這一點，當(dāng)檢測對象的時候往往會有誤解：

if (foo instanceof Foo) {
  ...
}

這不是用來檢測對象foo是否是用Foo構(gòu)造函數(shù)創(chuàng)建的，所有instanceof運算符只需要一個對象屬性——foo.[[Prototype]]，在原型鏈中從Foo.prototype開始檢查其是否存在。instanceof運算符是通過構(gòu)造函數(shù)里的內(nèi)部方法[[HasInstance]]來激活的。

讓我們來看看這個例子：

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

var a = new A();
alert(a.x); // 10

alert(a instanceof A); // true

// 如果設(shè)置原型為null
A.prototype = null;

// ..."a"依然可以通過a.[[Prototype]]訪問原型
alert(a.x); // 10

// 不過，instanceof操作符不能再正常使用了
// 因為它是從構(gòu)造函數(shù)的prototype屬性來實現(xiàn)的
alert(a instanceof A); // 錯誤，A.prototype不是對象

另一方面，可以由構(gòu)造函數(shù)來創(chuàng)建對象，但如果對象的[[Prototype]]屬性和構(gòu)造函數(shù)的prototype屬性的值設(shè)置的是一樣的話，instanceof檢查的時候會返回true：

function B() {}
var b = new B();

alert(b instanceof B); // true

function C() {}

var proto = {
  constructor: C
};

C.prototype = proto;
b.proto = __proto;

alert(b instanceof C); // true
alert(b instanceof B); // false

原型可以存放方法并共享屬性

大部分程序里使用原型是用來存儲對象的方法、默認(rèn)狀態(tài)和共享對象的屬性。

事實上，對象可以擁有自己的狀態(tài) ，但方法通常是一樣的。 因此，為了內(nèi)存優(yōu)化，方法通常是在原型里定義的。 這意味著，這個構(gòu)造函數(shù)創(chuàng)建的所有實例都可以共享找個方法。

function A(x) {
  this.x = x || 100;
}

A.prototype = (function () {

  // 初始化上下文
  // 使用額外的對象

  var _someSharedVar = 500;

  function _someHelper() {
    alert('internal helper: ' + _someSharedVar);
  }

  function method1() {
    alert('method1: ' + this.x);
  }

  function method2() {
    alert('method2: ' + this.x);
    _someHelper();
  }

  // 原型自身
  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

// 2個對象使用的是原型里相同的方法
alert(a.method1 === b.method1); // true
alert(a.method2 === b.method2); // true

讀寫屬性

正如我們提到，讀取和寫入屬性值是通過內(nèi)部的[[Get]]和[[Put]]方法。這些內(nèi)部方法是通過屬性訪問器激活的：點標(biāo)記法或者索引標(biāo)記法：

// 寫入
foo.bar = 10; // 調(diào)用了[[Put]]

console.log(foo.bar); // 10, 調(diào)用了[[Get]]
console.log(foo['bar']); // 效果一樣

讓我們用偽代碼來看一下這些方法是如何工作的：

[[Get]]方法

[[Get]]也會從原型鏈中查詢屬性，所以通過對象也可以訪問原型中的屬性。

O.[Get]:

// 如果是自己的屬性，就返回
if (O.hasOwnProperty(P)) {
  return O.P;
}

// 否則，繼續(xù)分析原型
var proto = O.[[Prototype]];

// 如果原型是null，返回undefined
// 這是可能的：最頂層Object.prototype.[[Prototype]]是null
if (proto === null) {
  return undefined;
}

// 否則，對原型鏈遞歸調(diào)用[[Get]]，在各層的原型中查找屬性
// 直到原型為null
return __proto.[Get]

請注意，因為[[Get]]在如下情況也會返回undefined：

if (window.someObject) {
  ...
}

這里，在window里沒有找到someObject屬性，然后會在原型里找，原型的原型里找，以此類推，如果都找不到，按照定義就返回undefined。

注意：in操作符也可以負(fù)責(zé)查找屬性（也會查找原型鏈）：

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

這有助于避免一些特殊問題：比如即便someObject存在，在someObject等于false的時候，第一輪檢測就通不過。

[[Put]]方法

[[Put]]方法可以創(chuàng)建、更新對象自身的屬性，并且掩蓋原型里的同名屬性。

O.[Put]:

// 如果不能給屬性寫值，就退出
if (!O.[CanPut]) {
  return;
}

// 如果對象沒有自身的屬性，就創(chuàng)建它
// 所有的attributes特性都是false
if (!O.hasOwnProperty(P)) {
  createNewProperty(O, P, attributes: {
    ReadOnly: false,
    DontEnum: false,
    DontDelete: false,
    Internal: false
  });
}

// 如果屬性存在就設(shè)置值，但不改變attributes特性
O.P = V

return;

例如：

Object.prototype.x = 100;

var foo = {};
console.log(foo.x); // 100, 繼承屬性

foo.x = 10; // [[Put]]
console.log(foo.x); // 10, 自身屬性

delete foo.x;
console.log(foo.x); // 重新是100,繼承屬性

請注意，不能掩蓋原型里的只讀屬性，賦值結(jié)果將忽略，這是由內(nèi)部方法[[CanPut]]控制的。

// 例如，屬性length是只讀的，我們來掩蓋一下length試試

function SuperString() {
  / nothing /
}

SuperString.prototype = new String("abc");

var foo = new SuperString();

console.log(foo.length); // 3, "abc"的長度

// 嘗試掩蓋
foo.length = 5;
console.log(foo.length); // 依然是3

但在ES5的嚴(yán)格模式下，如果掩蓋只讀屬性的話，會保存TypeError錯誤。

屬性訪問器

內(nèi)部方法[[Get]]和[[Put]]在ECMAScript里是通過點符號或者索引法來激活的，如果屬性標(biāo)示符是合法的名字的話，可以通過“.”來訪問，而索引方運行動態(tài)定義名稱。

var a = {testProperty: 10};

alert(a.testProperty); // 10, 點
alert(a['testProperty']); // 10, 索引

var propertyName = 'Property';
alert(a['test' + propertyName]); // 10, 動態(tài)屬性通過索引的方式

這里有一個非常重要的特性——屬性訪問器總是使用ToObject規(guī)范來對待“.”左邊的值。這種隱式轉(zhuǎn)化和這句“在JavaScript中一切都是對象”有關(guān)系，（然而，當(dāng)我們已經(jīng)知道了，JavaScript里不是所有的值都是對象）。

如果對原始值進行屬性訪問器取值，訪問之前會先對原始值進行對象包裝（包括原始值），然后通過包裝的對象進行訪問屬性，屬性訪問以后，包裝對象就會被刪除。

例如：

var a = 10; // 原始值

// 但是可以訪問方法（就像對象一樣）
alert(a.toString()); // "10"

// 此外，我們可以在a上創(chuàng)建一個心屬性
a.test = 100; // 好像是沒問題的

// 但，[[Get]]方法沒有返回該屬性的值，返回的卻是undefined
alert(a.test); // undefined

那么，為什么整個例子里的原始值可以訪問toString方法，而不能訪問新創(chuàng)建的test屬性呢？

答案很簡單：

首先，正如我們所說，使用屬性訪問器以后，它已經(jīng)不是原始值了，而是一個包裝過的中間對象（整個例子是使用new Number(a)），而toString方法這時候是通過原型鏈查找到的：

// 執(zhí)行a.toString()的原理:

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

接下來，[[Put]]方法創(chuàng)建新屬性時候，也是通過包裝裝的對象進行的：

// 執(zhí)行a.test = 100的原理：

1. wrapper = new Number(a);
2. wrapper.test = 100;
3. delete wrapper;

我們看到，在第3步的時候，包裝的對象以及刪除了，隨著新創(chuàng)建的屬性頁被刪除了——刪除包裝對象本身。

然后使用[[Get]]獲取test值的時候，再一次創(chuàng)建了包裝對象，但這時候包裝的對象已經(jīng)沒有test屬性了，所以返回的是undefined：

// 執(zhí)行a.test的原理:

1. wrapper = new Number(a);
2. wrapper.test; // undefined

這種方式解釋了原始值的讀取方式，另外，任何原始值如果經(jīng)常用在訪問屬性的話，時間效率考慮，都是直接用一個對象替代它；與此相反，如果不經(jīng)常訪問，或者只是用于計算的話，到可以保留這種形式。

繼承

我們知道，ECMAScript是使用基于原型的委托式繼承。鏈和原型在原型鏈里已經(jīng)提到過了。其實，所有委托的實現(xiàn)和原型鏈的查找分析都濃縮到[[Get]]方法了。

如果你完全理解[[Get]]方法，那JavaScript中的繼承這個問題將不解自答了。

經(jīng)常在論壇上談?wù)揓avaScript中的繼承時，我都是用一行代碼來展示，事實上，我們不需要創(chuàng)建任何對象或函數(shù)，因為該語言已經(jīng)是基于繼承的了，代碼如下：

alert(1..toString()); // "1"

我們已經(jīng)知道了[[Get]]方法和屬性訪問器的原理了，我們來看看都發(fā)生了什么：

1. 首先，從原始值1，通過new Number(1)創(chuàng)建包裝對象
2. 然后toString方法是從這個包裝對象上繼承得到的

為什么是繼承的？ 因為在ECMAScript中的對象可以有自己的屬性，包裝對象在這種情況下沒有toString方法。 因此它是從原理里繼承的，即Number.prototype。

注意有個微妙的地方，在上面的例子中的兩個點不是一個錯誤。第一點是代表小數(shù)部分，第二個才是一個屬性訪問器：

1.toString(); // 語法錯誤！

(1).toString(); // OK

1..toString(); // OK

1'toString'; // OK

原型鏈

讓我們展示如何為用戶定義對象創(chuàng)建原型鏈，非常簡單：

function A() {
  alert('A.[[Call]] activated');
  this.x = 10;
}
A.prototype.y = 20;

var a = new A();
alert([a.x, a.y]); // 10 (自身), 20 (繼承)

function B() {}

// 最近的原型鏈方式就是設(shè)置對象的原型為另外一個新對象
B.prototype = new A();

// 修復(fù)原型的constructor屬性，否則的話是A了 
B.prototype.constructor = B;

var b = new B();
alert([b.x, b.y]); // 10, 20, 2個都是繼承的

// [[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構(gòu)造函數(shù)也是這樣期望的。盡管原型繼承正常情況是沒問題的，但B構(gòu)造函數(shù)有時候可能不需要x屬性，與基于class的繼承相比，所有的屬性都復(fù)制到后代子類里了。

盡管如此，如果有需要（模擬基于類的繼承）將x屬性賦給B構(gòu)造函數(shù)創(chuàng)建的對象上，有一些方法，我們后來來展示其中一種方式。

其次，這不是一個特征而是缺點——子類原型創(chuàng)建的時候，構(gòu)造函數(shù)的代碼也執(zhí)行了，我們可以看到消息"A.[[Call]] activated"顯示了兩次——當(dāng)用A構(gòu)造函數(shù)創(chuàng)建對象賦給B.prototype屬性的時候，另外一場是a對象創(chuàng)建自身的時候！

下面的例子比較關(guān)鍵，在父類的構(gòu)造函數(shù)拋出的異常：可能實際對象創(chuàng)建的時候需要檢查吧，但很明顯，同樣的case，也就是就是使用這些父對象作為原型的時候就會出錯。

function A(param) {
  if (!param) {
    throw 'Param required';
  }
  this.param = param;
}
A.prototype.x = 10;

var a = new A(20);
alert([a.x, a.param]); // 10, 20

function B() {}
B.prototype = new A(); // Error

此外，在父類的構(gòu)造函數(shù)有太多代碼的話也是一種缺點。

解決這些“功能”和問題，程序員使用原型鏈的標(biāo)準(zhǔn)模式（下面展示），主要目的就是在中間包裝構(gòu)造函數(shù)的創(chuàng)建，這些包裝構(gòu)造函數(shù)的鏈里包含需要的原型。

function A() {
  alert('A.[[Call]] activated');
  this.x = 10;
}
A.prototype.y = 20;

var a = new A();
alert([a.x, a.y]); // 10 (自身), 20 (集成)

function B() {
  // 或者使用A.apply(this, arguments)
  B.superproto.constructor.apply(this, arguments);
}

// 繼承：通過空的中間構(gòu)造函數(shù)將原型連在一起
var F = function () {};
F.prototype = A.prototype; // 引用
B.prototype = new F();
B.superproto = A.prototype; // 顯示引用到另外一個原型上, "sugar"

// 修復(fù)原型的constructor屬性，否則的就是A了
B.prototype.constructor = B;

var b = new B();
alert([b.x, b.y]); // 10 (自身), 20 (集成)

注意，我們在b實例上創(chuàng)建了自己的x屬性，通過B.superproto.constructor調(diào)用父構(gòu)造函數(shù)來引用新創(chuàng)建對象的上下文。

我們也修復(fù)了父構(gòu)造函數(shù)在創(chuàng)建子原型的時候不需要的調(diào)用，此時，消息"A.[[Call]] activated"在需要的時候才會顯示。

為了在原型鏈里重復(fù)相同的行為（中間構(gòu)造函數(shù)創(chuàng)建，設(shè)置superproto，恢復(fù)原始構(gòu)造函數(shù)），下面的模板可以封裝成一個非常方面的工具函數(shù)，其目的是連接原型的時候不是根據(jù)構(gòu)造函數(shù)的實際名稱。

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); // 連接原型

var b = new B();
alert(b.x); // 10, 在A.prototype查找到

也有很多語法形式（包裝而成），但所有的語法行都是為了減少上述代碼里的行為。

例如，如果我們把中間的構(gòu)造函數(shù)放到外面，就可以優(yōu)化前面的代碼（因此，只有一個函數(shù)被創(chuàng)建），然后重用它：

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創(chuàng)建的child.prototype可以從child.prototype的當(dāng)前值里獲取[[Prototype]]：

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

function B() {}
inherit(B, A);

B.prototype.y = 20;

B.prototype.foo = function () {
  alert("B#foo");
};

var b = new B();
alert(b.x); // 10, 在A.prototype里查到

function C() {}
inherit(C, B);

// 使用"superproto"語法糖
// 調(diào)用父原型的同名方法

C.ptototype.foo = function () {
  C.superproto.foo.call(this);
  alert("C#foo");
};

var c = new C();
alert([c.x, c.y]); // 10, 20

c.foo(); // B#foo, C#foo

注意，ES5為原型鏈標(biāo)準(zhǔn)化了這個工具函數(shù)，那就是Object.create方法。ES3可以使用以下方式實現(xiàn)：

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

此外，所有模仿現(xiàn)在基于類的經(jīng)典繼承方式都是根據(jù)這個原則實現(xiàn)的，現(xiàn)在可以看到，它實際上不是基于類的繼承，而是連接原型的一個很方便的代碼重用。

結(jié)論

本章內(nèi)容已經(jīng)很充分和詳細(xì)了，希望這些資料對你有用，并且消除你對ECMAScript的疑問，如果你有任何問題，請留言，我們一起討論。

其它參考

• 4.2 — Language Overview;
• 4.3 — Definitions;
• 7.8.5 — Regular Expression Literals;
• 8 — Types;
• 9 — Type Conversion;
• 11.1.4 — Array Initialiser;
• 11.1.5 — Object Initialiser;
• 11.2.2 — The new Operator;
• 13.2.1 — [[Call]];
• 13.2.2 — [[Construct]];
• 15 — Native ECMAScript Objects.