Javascript 深入淺出原型

wpw 發布于2019-08-21 11:21 / 2677人閱讀

摘要：重點實例對象是通過原型對象與構造函數取得聯系的。原型鏈的形成是真正是靠的，而不是。函數對象和原型對象通過和屬性進行相互關聯。

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、other2、other3 為普通對象，而 example、example2、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 屬性進行相互關聯。

該文章部分知識網絡整理

GPU云服務器云服務器 javascript原型深入淺出javascript 深入javascript javascript深入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86600.html

JavaScript深入之從原型到原型鏈

摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。構造函數創建對象我們先...

Songlcy 2019-08-21 15:32 評論0 收藏0
JavaScript深入之new的模擬實現

摘要：深入系列第十二篇，通過的模擬實現，帶大家揭開使用獲得構造函數實例的真相一句話介紹運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一也許有點難懂，我們在模擬之前，先看看實現了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實現，帶大家揭開使用new獲得構造函數實例的真相 new 一句話介紹 new: new 運算符創建一個用戶定義的對象類型的實例或具...

tianlai 2019-08-20 16:17 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
JavaScript深入之創建對象的多種方式以及優缺點

摘要：深入系列第十四篇，講解創建對象的各種方式，以及優缺點。也就是說打著構造函數的幌子掛羊頭賣狗肉，你看創建的實例使用都無法指向構造函數這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇，講解創建對象的各種方式，以及優缺點。寫在前面這篇文章講解創建對象的各種方式，以及優缺點。但是注意：這篇文章更像是筆記，因為《JavaScript高級程序設計》寫得真是太好了！ 1....

Terry_Tai 2019-08-21 11:40 評論0 收藏0
深入理解Javascript原型關系

摘要：如下所示在規范中，已經正式把屬性添加到規范中也可以通過設置和獲取對象的原型對象對象之間的關系可以用下圖來表示但規范主要介紹了如何利用構造函數去構建原型關系。前言在軟件工程中，代碼重用的模式極為重要，因為他們可以顯著地減少軟件開發的成本。在那些主流的基于類的語言（比如Java,C++）中都是通過繼承(extend)來實現代碼復用，同時類繼承引入了一套類型規范。而JavaScript是...

ethernet 2019-08-22 14:06 評論0 收藏0