js 原型鏈

wua_wua2012 發布于2019-08-22 14:00 / 2292人閱讀

摘要：當通過原型鏈繼承了之后，就變成了的一個實例，因此它也擁有了一個它自己的屬性就跟專門創建了一個屬性一樣。有鑒于此，再加上前面剛剛討論過的由于原型中包含引用類型值所帶來的問題，實踐中很少會多帶帶使用原型鏈

記錄下自己對js 原型的一些理解
先看一下什么是 ····原型鏈

function Foo(){}
Foo.prototype.num = 3;
// new Foo( ) 將返回一個對象 把這個對象賦值給了 bar 
var bar = new Foo();
// bar 是怎么找到的原型下面的num呢？
alert(bar.num); //3

bar并沒有num 屬性，它是怎么拿到3的呢此處的 bar 就是通過原型鏈找到了值
原型鏈：
JavaScript中的對象有一個特殊的 __proto__ 內置屬性，其實就是對于其他對象的引用(關聯)。當我們使用 function關鍵字聲明一個函數時，系統會自動創建一個對象，訪問這個對象可以通過 函數名.prototype 訪問（我們一般把這個對象叫做原型對象），當使用 new 關鍵字調用函數（這時我們一般把這個函數稱為構造函數）時其中有一個步驟就是對創建的對象進行原型關聯，關聯到聲明函數時創建的那個對象（函數名.prototype指向的那個對象）。

上面例子中使用 new 關鍵字調用 Foo()函數時會創建一個對象我們把這個對象賦值給了 bar ; bar對象內部的.__proto__屬性會關聯到聲明函數時創建的那個對象（Foo.prototype）， bar.num屬性在bar中無法找到時，就會訪問bar.__proto__查找，這個過程會持續到找到匹配的屬性名或者查找完整條prototype鏈（所有普通的[[Prototype]]鏈最終都會指向內置的Object.prototype）
,因此上面例子的原型鏈是這樣的

bar.__proto__ -- 指向 --> Foo.prototype --然后（Foo.prototype.__proto__) -- 指向 --> Object.prototype

因此
每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。那么，假如我們讓原型對象等于另一個類型的實例，結果會怎么樣呢？顯然，此時的原型對象將包含一個指向另一個原型的指針，相應地，另一個原型中也包含著一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的實例，那么上述關系依然成立，如此層層遞進，就構成了實例與原型的鏈條。這就是所謂原型鏈的基本概念
對prototype更詳細的介紹請看這里(https://developer.mozilla.org...

原型鏈的問題

一

包含引用類型值的原型屬性會被所有實例共享；（而這也正是為什么要在構造函數中，而不是在原型對象中定義屬性的原因）在通過原型來實現繼承時，原型實際上會變成另一個類型的實例。于是，原先的實例屬性也就順理成章地變成了現在的原型屬性了。下列代碼可以用來說明這個問題。

function SuperType(){   
  this.colors = ["red", "blue", "green"];
}
function SubType(){}//繼承了SuperType
SubType.prototype = new SuperType();
var instance1 =newSubType();
instance1.colors.push("black");
//"red,blue,green,black"
alert(instance1.colors);
var instance2 = new SubType();
//"red,blue,green,black"
alert(instance2.colors);

SuperType構造函數定義了一個colors屬性，該屬性包含一個數組（引用類型值）。SuperType的每個實例都會有各自包含自己數組的colors屬性。當SubType通過原型鏈繼承了SuperType之后，SubType.prototype就變成了SuperType的一個實例，因此它也擁有了一個它自己的colors屬性——就跟專門創建了一個SubType.prototype.colors屬性一樣。但結果是什么呢？結果是SubType的所有實例都會共享這一個colors屬性。而我們對instance1.colors的修改能夠通過instance2.colors反映出來，就已經充分證實了這一點。

二

在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。實際上，應該說是沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數傳遞參數。有鑒于此，再加上前面剛剛討論過的由于原型中包含引用類型值所帶來的問題，實踐中很少會多帶帶使用原型鏈

GPU云服務器云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

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

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

JS基礎-原型、原型鏈真的不能一知半解

摘要：原型鏈和對象的原型是對象實例和它的構造函數之間建立的鏈接，它的值是構造函數的。對象的原型根據上文提到的構造調用函數的時候會創建一個新對象，自動將的原型指向構造函數的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清...

changfeng1050 2019-08-26 11:00 評論0 收藏0
從實現角度分析js原型鏈

摘要：從實現角度分析原型鏈歡迎來我的博客閱讀從實現角度分析原型鏈網上介紹原型鏈的優質文章已經有很多了，比如說作為補充，就讓我們換個角度，從實現來分析一下吧本文假設你對原型鏈已經有所了解。從實現角度分析js原型鏈歡迎來我的博客閱讀：《從實現角度分析js原型鏈》網上介紹原型鏈的優質文章已經有很多了，比如說： https://github.com/mqyqingfeng/Blog/issu...

CompileYouth 2019-08-20 19:04 評論0 收藏0
理解js的原型與繼承

摘要：相當于在用原型繼承編寫復雜代碼前理解原型繼承模型十分重要。同時，還要清楚代碼中原型鏈的長度，并在必要時結束原型鏈，以避免可能存在的性能問題。 js是一門動態語言,js沒有類的概念,ES6 新增了class 關鍵字，但只是語法糖，JavaScript 仍舊是基于原型。至于繼承,js的繼承與java這種傳統的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個對象都有一...

wthee 2019-08-20 12:25 評論0 收藏0
js 的原型原型鏈原型鏈的繼承

摘要：圖片描述缺點是無法實現多繼承可以在構造函數中，為實例添加實例屬性。對象的方法 Object.assign() 對象可以簡寫，如果 key 和 value 相等則可以簡寫 let name = xm; let age = 2; let obj = { name， age, fn(){ // 可以省略函數關鍵字和冒號： console.log(2...

soasme 2019-08-26 10:13 評論0 收藏0
js原型鏈

摘要：構造函數，實例，原型三者的關系如下圖構造函數是構成整個原型鏈的關鍵，是他利用將原型傳給了后代。因此，通過操縱構造函數的，就能夠操縱原型鏈，從而對原型鏈進行自在的拼接。要理解js的原型鏈主要就是理清楚以下三者的關系：構造函數的protitype屬性對象的__proto__屬性對象的constructor屬性在js中，函數作為一等公民，它是一個對象，可以擁有自己的屬性，可...

NervosNetwork 2019-08-22 17:59 評論0 收藏0
【前端基礎進階】JS原型、原型鏈、對象詳解

摘要：二構造函數我們先復習一下構造函數的知識上面的例子中和都是的實例。這兩個實例都有一個構造函數屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 評論0 收藏0