這次帶給大家JSprototype物件使用教學,JSprototype物件使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
我們透過原型方式,解決了多個實例的方法共享問題,接下來,我們就來搞清楚原型(prototype),原型鏈的來龍去脈。
function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄');
1,每個函數都有一個原型屬性(prototype) , 這個屬性是一個指針,指向建構子的原型物件( CreateObj.prototype), 如上圖的第1根綠色的線
2,在預設情況下,所有原型物件都會自動取得一個constructor屬性,該屬性的作用上文已經解釋過,該屬性包含一個指向prototype屬性所在的函數,如上圖的第2根綠色的線
3,所有的實例( 透過建構函式new出來的, 原型物件[ 如CreateObj.prototype, 上圖我還沒畫出來]等)都包含一個隱式原型(proto),該指標指向實例的建構子的原型物件,
如上圖的第3根線和第4根線. obj1的建構子是CreateObj, CreateObj的原型物件是CreateObj.prototype, obj2同理,所以:
obj1.proto === CreateObj.prototype //true
obj2.proto === CreateObj.prototype //true
4,寫在建構函數中, 為this賦值的屬性與方法, 在畫圖的過程中,把他們畫在物件上面,如userName這個是給物件賦值的屬性,所以在obj1和obj2這兩個物件上都會存在一個屬性userName
# 5,寫在原型物件上的方法或屬性,應該把他們畫在原型物件上,如
CreateObj.prototype.showUserName = function(){ return this.userName; }
showUserName這個方法就要畫在圖中CreateObj.prototype上面
6,當一個物件存取屬性和方法的時候,他的存取規則叫(就近原則), 規則如下:
當實例上面,存在屬性或方法時,直接用實例上面的,#
## 如果實例上面不存在屬性和方法,就會沿著實例的proto指標所指向的原型物件繼續往上查找,如果找不到,值就是undefined.console.log( obj1.showUserName() ); //ghostwu console.log( obj2.showUserName() ); //卫庄
// CreateObj.prototype.showUserName = function(){ // return this.userName; // }
function CreateObj(uName) { this.userName = uName; this.showUserName = function(){ return '100'; } } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄'); console.log( obj1.showUserName() ); //100 console.log( obj2.showUserName() ); //100
console.log( obj1.showUserName === obj2.showUserName ); //false
function CreateObj(uName) { this.userName = uName; this.showUserName = function () { return '100'; } } CreateObj.prototype.showUserName = function () { return this.userName; } console.log( CreateObj.prototype.proto ); //指向Object.prototype console.log( CreateObj.prototype.proto === Object.prototype ); //true
運算子 (===) 測試之後為true
# Object.prototype.proto 指向的是NULL 這就是原型鏈,透過隱式原型把一些建構函式層層的串起來,透過上面這個圖,就知道,為什麼自訂的物件能呼叫toString, valueOf,等方法了吧? 因為所有的物件都是繼承自Object.相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是JSprototype物件使用教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!