Javascript 深刻淺出原型

JavaScript 使用 prototypal 原型模型，雖然這常常被看成缺點說起，可是隻要善於運用，其實基於原型的繼承模型比傳統的類繼承還要強大。

我的博客排版更佳：https://haonancx.github.io/

先聊一聊對象的事情

JavaScript 中，萬物皆對象！但對象也是有區別的，主要分爲普通對象（Object）和函數對象（Function）。

說好的只聊技術，怎麼聊上我的問題了！？

好了,安慰一下,請你吃下面 這道菜！

function example(){};
var example2 = function(){};
var example3 = new Function('str','console.log(str)');

var other = {};
var other2 =new Object();
var other3 = new example();

console.log(typeof other); //object 下面檢測一下他們都是些什麼類型函數
console.log(typeof other2); //object
console.log(typeof other3); //object
console.log(typeof example); //function
console.log(typeof example2); //function
console.log(typeof example3); //function

怎麼區分普通對象和函數對象呢？！其實很簡單，凡是經過 new Function() 建立的對象都是函數對象，其餘的都是普通對象；因此 other、other二、other3 爲普通對象，而 example、example二、example3 爲函數對象。

在 JavaScript 中，每當定義一個函數對象時候，對象中都會包含一些預約義的屬性（意思就是這個函數對象一旦被定義就必然會有這些屬性）。

其中函數對象的一個屬性就是原型對象 prototype；這個屬性會指向函數的原型對象。

默認狀況下每一個原型對象又都會獲取一個 constructor 屬性，這個屬性包含一個指向 prototype 屬性所在函數的指針。

普通對象沒有prototype,但有 _proto _屬性。

讓你現出'原型'

來來來,瞭解完對象,咱們該開車上路了（老司機秒懂）

function Dogs(){
}
Dogs.prototype.name = "Collie";
Dogs.prototype.age = 3;
Dogs.prototype.DogsName = function(){
alert(this.name); 
};

var DogsA = new Dogs();
DogsA.DogsName();//"Collie"

上面的代碼中，建立了一個 Dogs 函數，這時候它就會擁有一個 prototype 屬性，這個屬性指向了 Dogs Prototype 原型對象，而這個原型對象擁有一個 constructor (構造函數) 屬性，其指針指向了 Dogs,就是 prototype 屬性所在的函數 Dogs；當你建立一個對象實例（ DogsA，就是這條語句：var DogsA = new Dogs(); ）的時候，一樣會擁有一個 prototype 屬性；這個 prototype 屬性會指向其原型對象，而不是直接指向其構造函數 Dogs。

重點：實例對象是經過原型對象與構造函數取得聯繫的。

原型鏈，老司機，深刻一些！

JS 在建立對象（不管是普通對象仍是函數對象）的時候，都有一個叫作 proto 的內置屬性，用於指向建立它的函數對象的原型對象 prototype。

咱們能夠測試一下，以上面的代碼爲例：

console.log(DogsA._proto_ === Dogs.prototype) //true

一樣，Dogs.prototype對象也有 _proto _ 屬性，它指向建立它的函數對象（Object）的 prototype

console.log(Dogs.prototype._proto_ === Object.prototype) //true

你瞧，證實了你 DogsA 是我 Dogs 實例化出來的對象出來的。

好了繼續，Object.prototype對象也有 _proto _屬性，但它比較特殊，爲 NULL

console.log(Object.prototype._proto_) //null

咱們把這個有 proto 串起來，直到 Object.prototype.__proto_ _爲 NULL 的鏈就叫作原型鏈。

總結

• 原型和原型鏈是 JS 實現繼承的一種模型。

• 原型鏈的造成是真正是靠 _proto _ 的，而不是 prototype。

• 全部的原型對象都有 constructor 屬性，該屬性對應建立全部指向該原型的實例構造函數。

• 函數對象和原型對象經過 prototype 和 constructor 屬性進行相互關聯。

該文章部分知識網絡整理