怎么使用Javascript的prototype鏈

這篇文章主要介紹“怎么使用Javascript的prototype鏈”，在日常操作中，相信很多人在怎么使用Javascript的prototype鏈問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Javascript的prototype鏈”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

我們知道，在Js中一切皆為對象(Object)，但是Js中并沒有類(class);Js是基于原型(prototype-based)來實現的面向對象(OOP)的編程范式的，但并不是所有的對象都擁有  prototype 這一屬性：

var a = {};

console.log(a.prototype); //=> undefined

var b = function(){};

console.log(b.prototype); //=> {}

var c = 'Hello';

console.log(c.prototype); //=> undefined

prototype 是每個 function 定義時自帶的屬性，但是Js中 function 本身也是對象，我們先來看一下下面幾個概念的差別：

1. function 、 Function 、 Object 和 {}

function 是Js的一個關鍵詞，用于定義函數類型的變量，有兩種語法形式：

function f1(){

console.log('This is function f1!');

}

typeof(f1); //=> 'function'

var f2 = function(){

console.log('This is function f2!');

}

typeof(f2); //=> 'function'

如果用更加面向對象的方法來定義函數，可以用 Function ：

var f3 = new Function("console.log('This is function f3!');");

f3(); //=> 'This is function f3!'

typeof(f3); //=> 'function'

typeof(Function); //=> 'function'

實際上 Function 就是一個用于構造函數類型變量的類，或者說是函數類型實例的構造函數(constructor);與之相似有的 Object 或  String 、 Number 等，都是Js內置類型實例的構造函數。比較特殊的是 Object ，它用于生成對象類型，其簡寫形式為 {} ：

var o1 = new Object();

typeof(o1); //=> 'object'

var o2 = {};

typeof(o2); //=> 'object'

typeof(Object); //=> 'function'

2. prototype VS __proto__

清楚了上面的概念之后再來看 prototype ：

Each function has two properties: length and prototype

prototype 和 length  是每一個函數類型自帶的兩個屬性，而其它非函數類型并沒有(開頭的例子已經說明)，這一點之所以比較容易被忽略或誤解，是因為所有類型的構造函數本身也是函數，所以它們自帶了  prototype 屬性：

// Node

console.log(Object.prototype); //=> {}

console.log(Function.prototype);//=> [Function: Empty]

console.log(String.prototype); //=> [String: '']

除了 prototype 之外，Js中的所有對象( undefined 、 null 等特殊情況除外)都有一個內置的 [[Prototype]]  屬性，指向它“父類”的 prototype ，這個內置屬性在ECMA標準中并沒有給出明確的獲取方式，但是許多Js的實現(如Node、大部分瀏覽器等)都提供了一個  __proto__ 屬性來指代這一 [[Prototype]] ，我們通過下面的例子來說明實例中的 __proto__ 是如何指向構造函數的  prototype的：

var Person = function(){};

Person.prototype.type = 'Person';

Person.prototype.maxAge = 100;

var p = new Person();

console.log(p.maxAge);

p.name = 'rainy';

Person.prototype.constructor === Person; //=> true

p.__proto__ === Person.prototype; //=> true

console.log(p.prototype); //=> undefined

上面的代碼示例可以用下圖解釋：

Person 是一個函數類型的變量，因此自帶了 prototype 屬性， prototype 屬性中的 constructor 又指向 Person  本身;通過 new 關鍵字生成的 Person 類的實例 p1 ，通過 __proto__ 屬性指向了 Person 的原型。這里的 __proto__  只是為了說明實例 p1 在內部實現的時候與父類之間存在的關聯(指向父類的原型)，在實際操作過程中實例可以直接通過 .  獲取父類原型中的屬性，從而實現了繼承的功能。

3. 原型鏈

清楚了 prototype 與 __proto__ 的概念與關系之后我們會對“Js中一切皆為對象”這句話有更加深刻的理解。進而我們會想到，既然  __proto__ 是(幾乎)所有對象都內置的屬性，而且指向父類的原型，那是不是意味著我們可以“逆流而上”一直找到源頭呢?我們來看下面的例子：

// Node

var Obj = function(){};

var o = new Obj();

o.__proto__ === Obj.prototype; //=> true

o.__proto__.constructor === Obj; //=> true

Obj.__proto__ === Function.prototype; //=> true

Obj.__proto__.constructor === Function; //=> true

Function.__proto__ === Function.prototype; //=> true

Object.__proto__ === Object.prototype; //=> false

Object.__proto__ === Function.prototype; //=> true

Function.__proto__.constructor === Function;//=> true

Function.__proto__.__proto__; //=> {}

Function.__proto__.__proto__ === o.__proto__.__proto__; //=> true

o.__proto__.__proto__.__proto__ === null; //=> true

從上面的例子和圖解可以看出， prototype 對象也有 __proto__ 屬性，向上追溯一直到 null 。

new 關鍵詞的作用就是完成上圖所示實例與父類原型之間關系的串接，并創建一個新的對象; instanceof  關鍵詞的作用也可以從上圖中看出，實際上就是判斷__proto__ (以及 __proto__.__proto__ …)所指向是否父類的原型：

var Obj = function(){};

var o = new Obj();

o instanceof Obj; //=> true

o instanceof Object; //=> true

o instanceof Function; //=> false

o.__proto__ === Obj.prototype; //=> true

o.__proto__.__proto__ === Object.prototype; //=> true

o.__proto__.__proto__ === Function; //=> false

到此，關于“怎么使用Javascript的prototype鏈”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！