JavaScript原型鏈源碼分析

這篇文章主要講解了“JavaScript原型鏈源碼分析”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript原型鏈源碼分析”吧！

instanceof 簡介

在 JavaScript 中，判斷一個(gè)變量的類型通常會(huì)用 typeof 運(yùn)算符，在使用 typeof 運(yùn)算符時(shí)采用引用類型存儲(chǔ)值會(huì)出現(xiàn)一個(gè)問題，無論引用的是什么類型的對(duì)象，它都返回 "object"。例如：

var arr = new Array();
console.log( typeof arr ); // object

如果想要確定原型和實(shí)例之間的關(guān)系就需要用到 instanceof 操作符， 例如：

var arr = new Array();
var Fn = function() {};
var foo = new Fn();
console.log( arr instanceof Array ); // true
console.log( arr instanceof Object ); // true
console.log( foo instanceof Fn); // true
console.log( foo instanceof Function ); // false
console.log( foo instanceof Object ); // true

Function instanceof Function ?

console.log( String instanceof String );
console.log( Function instanceof Function );
console.log( Function instanceof Object );
console.log( Object instanceof Function );
console.log( Object instanceof Object );

要解釋這個(gè)問題就需要了解 1.JavaScript 語言規(guī)范中是如何定義 instanceof 運(yùn)算符的，2.JavaScript 原型繼承機(jī)制。

instanceof 運(yùn)算符的定義

在 ECMAScript-262 中 instanceof 運(yùn)算符的定義是這樣的。

12.9.4 Runtime Semantics: InstanceofOperator(O, C)

The abstract operation InstanceofOperator(O, C) implements the generic algorithm for determining if an object O inherits from the inheritance path defined by constructor C. This abstract operation performs the following steps:

1. If Type(C) is not Object, throw a TypeError exception.
2. Let instOfHandler be GetMethod(C,@@hasInstance).
3. ReturnIfAbrupt(instOfHandler).
4. If instOfHandler is not undefined, then
a. Return ToBoolean(Call(instOfHandler, C, ?O?)).
5. If IsCallable(C) is false, throw a TypeError exception.
6. Return OrdinaryHasInstance(C, O).
NOTE Steps 5 and 6 provide compatibility with previous editions of ECMAScript that did not use a @@hasInstance method to define the instanceof operator semantics. If a function object does not define or inherit @@hasInstance it uses the default instanceof semantics.

7.3.19 OrdinaryHasInstance (C, O)

The abstract operation OrdinaryHasInstance implements the default algorithm for determining if an object O inherits from the instance object inheritance path provided by constructor C. This abstract operation performs the following steps:

1. If IsCallable(C) is false, return false.
2. If C has a [[BoundTargetFunction]] internal slot, then
    a. Let BC be the value of C's [[BoundTargetFunction]] internal slot.
    b. Return InstanceofOperator(O,BC) (see 12.9.4).
3. If Type(O) is not Object, return false.
4. Let P be Get(C, "prototype").
5. ReturnIfAbrupt(P).
6. If Type(P) is not Object, throw a TypeError exception.
7. Repeat
    a. Let O be `O.[[GetPrototypeOf]]()`.
    b. ReturnIfAbrupt(O).
    c. If O is null, return false.
    d. If SameValue(P, O) is true, return true.

官網(wǎng)的定義非常晦澀，上面的翻譯成代碼大概就是：

function instanceOf( L, R ) { //L 表示左表達(dá)式，R 表示右表達(dá)式
    var P = R.prototype; // 取 R 的顯示原型
    L = L.__proto__; // 取 L 的隱式原型
    while ( true ) { 
        if ( L === null ) return false;
        if ( P === L ) return true; 
        L = L.__proto__; 
    } 
}

再直接點(diǎn)的表達(dá)就是 instanceof 會(huì)一直在 obj 的原型鏈上查找，直到找到右邊那個(gè)構(gòu)造函數(shù)的 prototype 屬性，或者為 null 的時(shí)候才停止。

類似：

obj.__proto__.__proto__ ... = Obj.prototype

instanceof 會(huì)一直沿著隱式原型鏈 __proto__ 向上查找直到 obj.__proto__.__proto__ ...... === Obj.prototype 為止，如果找到則返回 true，也就是 obj 為 Obj 的一個(gè)實(shí)例。否則返回 false，obj 不是 Obj 的實(shí)例。

JavaScript 原型繼承機(jī)制

原型與原型鏈

在 JavaScript 每個(gè)函數(shù)都有一個(gè) prototype 屬性，該屬性存儲(chǔ)的就是原型對(duì)象。JavaScript 構(gòu)造函數(shù)的繼承都是通過 prototype 屬性， 真正的原型鏈的實(shí)現(xiàn)是通過 __proto__ 實(shí)現(xiàn)的，__proto__其實(shí)是指向‘父類’的 prototype 屬性。例如：

var Foo = function() {}
var foo = new Foo;
console.log(foo.__proto__ === Foo.prototype) // true
console.log(Foo.__proto__ === Function.prototype) // true

原型繼承

JavaScript 是單繼承的，Object.prototype 是原型鏈的頂端，所有對(duì)象從它繼承了包括 valueOf、toString 等等方法和屬性。

Object 本身是構(gòu)造函數(shù)，繼承了 Function.prototype。 Function 也是對(duì)象，繼承了 Object.prototype。

Object instanceof Object

ObjectL = Object, ObjectR = Object; 

R = ObjectR.prototype = Object.prototype 
L = ObjectL.__proto__ = Function.prototype 

R != L 
// 循環(huán)查找 L 是否還有 __proto__ 
L = Function.prototype.__proto__ = Object.prototype 

R == L 
// 返回 true

String instanceof String

StringL = String, StringR = String;

R = StringR.prototype = String.prototype
L = StringL.__proto__ = Object.prototype

R != L
// 循環(huán)查找 L 是否還有 __proto__ 
L = Object.prototype.__proto__ = null
// 返回 false

一切皆對(duì)象？

常常說 JavaScript 中一切皆對(duì)象，那么就有這樣一個(gè)問題了：

'string'.__proto__ === String.prototype // true
'string' instanceof String // false

按照上面的推導(dǎo)，'string' instanceof String 應(yīng)該為 true，但是我們得到的卻是 false。 其實(shí)問題的關(guān)鍵在于：

console.log(typeof 'string'); // string

'string' 并不是一個(gè) object 對(duì)象，MDN 上對(duì) instanceof 的定義是：

The instanceof operator tests whether an object in its prototype chain has the prototype property of a constructor.

 這樣又有一個(gè)問題了，既然字符串不是對(duì)象那為什么有對(duì)象才有的屬性和方法呢？

var s1 = "string";
var s2 = s1.substring(2);

為了便于操作基本類型值，ECMAScript 還提供了 3 個(gè)特殊的引用類型: Boolean、Number 和 String。 實(shí)際上，每當(dāng)讀取一個(gè)基本類型值的時(shí)候，后臺(tái)就會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的基本包裝類型的對(duì)象，從而讓我們 能夠調(diào)用一些方法來操作這些數(shù)據(jù)。

《JavaScript高級(jí)程序設(shè)計(jì)》中是這么解釋的：

上面的例子其實(shí)當(dāng)?shù)诙写a訪問 s1 時(shí)，訪問過程處于一種讀取模式，也就是要 從內(nèi)存中讀取這個(gè)字符串的值。而在讀取模式中訪問字符串時(shí)，后臺(tái)都會(huì)自動(dòng)完成： (1) 創(chuàng)建 String 類型的一個(gè)實(shí)例; (2) 在實(shí)例上調(diào)用指定的方法; (3) 銷毀這個(gè)實(shí)例。

可以將以上三個(gè)步驟想象成是執(zhí)行了下列 ECMAScript 代碼。

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

《Javascript權(quán)威指南》里說：

其實(shí)（包裝對(duì)象）在實(shí)現(xiàn)上并不一定創(chuàng)建或銷毀這個(gè)臨時(shí)對(duì)象，然而整個(gè)過程看起來是這樣的。

這樣 Boolean、Number 是一樣的邏輯。還剩下兩種基本類型：null 和 undefined。

undefined 當(dāng)我們對(duì)變量只聲明沒有初始化時(shí)，輸出為 undefined，typeof undefined 返回的是 undefined 也不是 object 類型，所以 undefined 并不是任何對(duì)象的實(shí)例。

null 表示的是空對(duì)象，雖然 typeof null 是 object，但是 null 和 undefined 一樣并沒有任何屬性和方法，在 instanceof 定義中也有判斷，如果類型不是 object（這個(gè)類型判斷并不是跟 typeof 返回值一樣），就返回 false。

感謝各位的閱讀，以上就是“JavaScript原型鏈源碼分析”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)JavaScript原型鏈源碼分析這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！