(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...