JS中的原型及原型鏈

2021-10-06 11:31:02 字數 2553 閱讀 4066

什麼是原型?

原型的作用:資料共享

1.1原型的資料共享

在建構函式內部新增say方法

function

person

(name)

}// 例項化

var p =

newperson

('小明'

)var p1 =

newperson

('小紅'

) console.

log(p.say === p1.say)

//false

總結:不同例項上的同名方法是不相等的例項兩個相同業務的建構函式實在沒有必要,通過把函式定義轉移到建構函式外部來解決以上問題

function

person

(name)

function

say(

)// 例項化

var p =

newperson

('小明'

)var p1 =

newperson

('小紅'

) console.

log(p.say === p1.say)

//true

總結:通過把建構函式中say方法轉移到外部,但是如果方法多了就要建立很多個全域性函式。在原型物件中新增say方法

// person建構函式

function

person

(name)

// 在原型物件中新增say方法

person.prototype.

say=

function()

// 例項化

var p =

newperson

('小明'

)var p1 =

newperson

('小紅'

) console.

log(p.say === p1.say)

//true

總結:p和p1的say方法指向同一塊記憶體,實現了資料共享,和上面在建構函式內部及外部建立物件相比就在效能方面就要好的多1.2查詢機制

// person建構函式

function

person

(name)

}// 在原型物件中新增say方法

person.prototype.

say=

function()

// 例項化

var p =

newperson

('小明'

)

p.say(

)

總結:在呼叫p.say方法時,首先會去例項物件上查詢是否有這個方法,如果有即呼叫,如果沒有則呼叫prototype物件中say方法。其實它的查詢機制還遠不止如此,這樣我們可以引申出第二個概念----"原型鏈"在2.2中可能有人會奇怪,為什麼例項物件中如果沒有,會去原型物件中找呢?

1. 首先我們知道例項物件中的__proto__是指向建構函式中prototype的,所以例項物件身上沒有,才會去原型物件身上查詢

這裡又引申出來乙個問題,如果原型物件身上也沒有這個方法呢?

在上面原型的介紹中說了,prototype也是乙個物件,而每乙個物件中都__proto__物件,而所有物件中的__proto__都指向它的prototype,這樣一層一層向上查詢的的鏈式結構,被稱為"原型鏈"

2.1 案列

// person建構函式

function

person

(name)

}// 例項化

var p =

newperson

('小明'

)// 判斷p例項物件是否有tostring方法

var res = p.

tostring()

?true

:false

console.

log(res)

這裡我的例項物件和原型物件中都沒有這個tostring方法,那這個方法是從那來的呢?

總結:當例項物件呼叫tostring方法時,發現在例項物件和原型物件上查詢時並沒有這個方法,於是通過person.prototype查詢,發現還是沒有,再通過person.prototype.__person__查詢,最後在object.prototype身上找到了這個tostring方法,之所以能按照這種機制找到tostring方法,就是因為原型鏈的存在

js中的原型及原型鏈

1.什麼是原型 a.每乙個物件都有原型,使用屬性 proto 引用,除了null 用於指向建立它的建構函式的prototype b.原型就是該物件表示從 繼承。通過它可以實現屬性繼承。2.proto 和prototype 的區別 proto 是每乙個物件都有的屬性。原型鏈中真正起作用的是 proto...

js原型及原型鏈

在建構函式建立出來的時候,系統會預設幫建構函式建立乙個原型物件。原型物件中的屬性和方法可以被建構函式建立出來的物件訪問。建構函式.prototyoe 屬性 方法 的查詢原則 當訪問物件的成員的時候,會在自身找有沒有,如果有直接使用,如果沒有找到,則去當前物件的原型物件中找,如果找到了直接使用 如果沒...

js原型及原型鏈

每個物件都有proto屬性用於指向建立它的建構函式的原型物件。function animal name animal.prototype.getname function animal.prototype.getage function var animal1 newanimal kate var ...