函式的prototype解析

2021-08-15 16:31:14 字數 3258 閱讀 4519

(1) 每個函式都有乙個prototype屬性,它預設指向乙個object空物件。(稱為原型物件)

例1:console.log(typeof date.prototype,date.prototype);

執行結果顯示:

例2:定義乙個新的函式:function fun()

console.log(fun.prototype);

執行結果顯示為:

可以看出,例1,2都指向了預設的object空物件。那麼什麼是空物件?就是沒有後定義(fun())自己的屬性。

(2)原型物件中有乙個屬性constructor,它指向函式物件。

可以驗證一下:

console.log(date.prototype.constructor === date);   //結果為true

console.log(fun.prototype.constructor === fun);//結果為true

示意圖如下:

當我們給原型物件新增屬性(一般為方法),目的是讓例項物件去訪問。

例如:fun.prototype.test = function()

var fun = new fun();//建立例項fun

fun.test();//輸出test()

作用:函式中的所有例項物件,自動擁有原型中的屬性或方法。

(1)每個函式function都有乙個prototype,即顯示原型。(預設指向乙個空的object物件)

可參考上例2。

其中,prototype屬性是在函式建立之後自動新增的。

(2)每個例項物件都有乙個__proto__,可稱為隱式原型。

可以通過console.log(fun.__proto__);來驗證例項fun的__proto__屬性。

其中,__proto__屬性是在例項建立完之後自動新增的。

(3)物件的隱式原型的指對應其建構函式顯式原型的值。

可以通過console.log(fun.__proto__ === fun.prototype);//結果為true來驗證。

通過上圖可以看出例項物件呼叫原型方法的內部過程。

當訪問物件的屬性時,先在自身屬性中查詢,找到就返回;如果沒有,則沿著__proto__這條鏈向上尋找,找到則返回。如果最後沒有找到,則返回undefined。結構圖如下:

首先在在fun中查詢test1,可以在fun例項物件中找到test1方法,並返回結果test1;接下來找test2方法,先在自身中查詢,不能找到,則檢視__proto__屬性,查詢隱式原型物件,找到則返回test2;然後是查詢tostring方法,自身和根據隱式原型屬性的隱式原型物件中都沒有,然後根據object的隱式原型屬性找隱式原型物件則可以找到。最後找test3,可以知道自身、自身的隱式原型物件以及object的隱式原型物件中都找不到,則返回undefined。可以知道原型鏈是按照隱式原型尋找的。原型鏈的本質就是隱式原型鏈。

補充:(1)函式的顯示原型指向的物件預設是object的空物件。(但object不滿足,因為object.__proto__=null)

例:console.log(fun.prototype instanceof object);//結果為true

console.log(object.prototype instanceof object);//結果為false

console.log(function.prototype instanceof object);//結果為true

(2)所有函式都是function的例項(包含function本身)

例:console.log(function.__proto__ === function.prototype);//結果為true

(3)object的原型物件是原型鏈的盡頭

例:console.log(object.prototype.__proto__);//結果為null

(1)讀取物件屬性值時,會自動到原型鏈中查詢。

(2)設定物件屬性值時,不會查詢原型鏈,如果當前物件中沒有此屬性,則直接新增並且設定其值。

例:fun.prototype.a = 'aaa';

var fun1 = new fun();

console.log(fun1.a);//結果為aaa

var fun2 = new fun();

fun2.a = 'bbb';

console.log(fun1.a,fun2.a);//結果為aaa bbb

(3)方法一般定義在原型中,屬性一般通過建構函式定義在物件本身上。

例:function person(name,age)

person.prototype.setname = function(name);

var p1 = new person("tom",12);

p1.setname("bob");

console.log(p1);

var p2 = new person("helen",18);

p1.setname("tina");

console.log(p2);

console.log(p1.__proto__ === p2.__proto__);//結果為true

結果顯示為:

PROTOTYPE模式難點解析

這個模式在c 中什麼時候才會使用,為什麼不直接new,大家只要明白乙個場景,就會知道它的用處。比如,現在讓你設計乙個遊戲,一共有8個關卡,每關的小兵有四種,但是第一關的小兵最弱,第八關的小兵最強,你怎麼設計?你可能認為這還不簡單,需要小兵的時候,直接new乙個相應的小兵,就可以了。但是這樣做會遇見乙...

JS高階 函式的prototype

思維導圖 棧堆翻譯為為stack 1 原型與原型鏈 概念一 原型物件 驗證步驟 1 列印data函式的原型prototype 原型屬性指向原型物件 es原始碼結構分析示意 2 空物件 3 js特點 動態新增屬性 小結 prototype原型 constructor構造 1 每個函式有乙個protot...

singleton和prototype的區別

默 認情況下,從bean工廠所取得的例項為singleton bean的singleton屬性 singleton spring容器只存在乙個共享的bean例項,預設的配置。prototype 每次對bean的請求都會建立乙個新的bean例項。二者選擇的原則 有狀態的bean都使用prototype...