JS複習 原型鏈小結

2021-09-14 00:50:42 字數 1919 閱讀 7775

一段簡單**引入

1.概念簡單理解

foo.prototype.constructor

console.log(foo.prototype.constructor === foo);//true

console.log(f1._proto_=== foo.prototype);//true

console.log(f1._proto_.constructor=== foo);//true

console.log(f1.constructor === foo);//true

console.log(f1.hasownproperty('constructor'));//false

2.結合demo原型鏈是對於建構函式而言的,首先定義乙個建構函式,再例項化生成乙個例項物件,可能在例項物件中沒有定義某個屬性,但是在建構函式中有,那麼它就會往上(向建構函式中)查詢,這個查詢的過程就叫做原型鏈。

function foo(){};

foo.prototype.name = "ziziyaya";

var foo=new foo();

console.log(foo.name); //ziziyaya

3.為什麼需要原型鏈為了實現繼承,具有相同特性的**不需要重複編寫,放在建構函式裡面,例項化的物件都會擁有裡面的屬性了,也就是可以共享屬性和方法。

function dog() 

let dog1 = new dog();

let dog2 = new dog();

dog1.name = 'huang';

dog2.name = 'hei';

console.log(dog1.name+','+dog1.eat+','+dog1.smell);//huang,food,smart

console.log(dog2.name+','+dog2.eat+','+dog2.smell);//hei,food,smart

推薦文章:

4.繼續往上引申--foo.prototype的建構函式是object(),原型物件是object.prototype

console.log(foo.prototype.__proto__ === object.prototype);//true
例項物件foo.prototype本身具有constructor屬性,所以它會覆蓋繼承自原型物件object.prototype的constructor屬性

下面是自身沒有constructor屬性,繼承自原型物件的f1和 自身有constructor屬性覆蓋了原型物件的foo.prototype 截圖對比

再往上引申 如果object.prototype作為例項物件的話,其原型物件是什麼,結果是null

附加一篇簡潔易懂的原型鏈理解的文章

JS複習 繼承 原型鏈

繼承 介面繼承和實現繼承。介面繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由於函式沒有簽名,在esmascript中無法實現介面繼承。esmascript只支援實現繼承,而且其實現繼承主要是依靠 原型鏈來實現的。原型鏈 基本思想 利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。建構函式 原...

原型鏈複習參考

自己去看方法總結 function fn fn.prototype.getx function fn.prototype.gety function var f1 new fn 檢測某乙個函式是否是乙個類的例項 用instanceof var f2 new fn 1.所有的函式資料型別 普通函式 類...

JS 物件 JS原型 原型鏈

參考學習 js物件 構造器函式 建立物件的函式。物件分為普通物件和函式物件。所有物件都有 proto 屬性 函式物件不止有 proto 屬性,還有prototype屬性 稱為原型物件 1.new function 產生的物件都是函式物件。2.所有函式物件的 proto 都指向function.pro...