一文理解js原型和原型鏈?zhǔn)鞘裁匆约白饔?/h2>

js三座大三,這是第二座山,今天來和大家一起翻山越嶺。閱讀前請記住這句話js里萬物皆對象。

js原型、原型鏈一鏡到底開始:

1、知道什么是原型和原型鏈

首先請想下你平常寫代碼數(shù)組的常用方法有哪幾個,答:map、forEach、concat、some....等等,你有沒有想過這些方法從哪里來的?
當(dāng)然是有人寫出來的?。。?!為了方便,提前寫好的?。。。?br> 沒錯,就是這樣的,接下來我們直接瀏覽器f12看一下數(shù)組的其他方法,怎么看?控制臺輸入下面這段話:

window.Array.prototype

Arrary代表數(shù)組,prototype可以看數(shù)組原型的方法,別人寫好的東西就在這里,prototype翻譯過來就是原型的意思,即數(shù)組的原型。這就是原型

這就是數(shù)組的原型啦,數(shù)組的方法在里面

我們試著寫個代碼,用原型里的方法concat:

let a = [1,2,3]
a.concat([4])    //[1,2,3,4]

結(jié)果

再來寫一個,不在Arrary原型里的方法:

let a = [1,2]
a.toString()   // "1,2"

結(jié)果不報錯,正常運行

嗯?奇怪了為啥數(shù)組原型里面沒有這個方法為啥定義的a數(shù)組還能有這個toString正常運行,這就是_ proto _的作用了,它就是原型鏈。
我們來打印看下Object原型的方法有沒有這個toString:

window.Object.prototype

為了方便記住它,你可以通過proto左右的 " _ " 這個符號,跟鏈子一樣,所以叫原型鏈...

原型鏈如何“鏈”:

Object作為原型鏈的頂端,它的原型鏈最后指向null

2、原型和原型鏈作用是啥

原型就是能放公用方法、屬性的地方
原型鏈方便代碼自己去調(diào)用共享每種數(shù)據(jù)類型(就是對象啦)的方法、屬性的鏈子。

你要把它放在其他地方也可以(前提你自己能寫出一門語言),你叫他方法存儲池也可以,叫他屬性倉庫存放點也行,但是js里就必須叫原型鏈,人家寫好的,你就得遵循規(guī)則哈哈。所以這就是原型和原型鏈的作用。


去掉原型鏈

如上圖所示,假設(shè)沒有原型鏈,那我想在Arrary數(shù)組類型數(shù)據(jù)去使用toString方法,是不是得在數(shù)組上寫一個呢,答案是的。那么數(shù)組寫一個,Object寫一個,都是相同的代碼,顯得重復(fù),所以原型鏈的作用就是這,鏈接每個對象,看有沒找到這個方法,有直接使用,就很方便。

3、實踐:自己搞個原型方法看它能不能“鏈”到

非非非非非非非非非非常簡單。

  • 先來給Object的原型添加個方法,隨意點就叫做aa吧。
//直接復(fù)制到控制臺可運行
window.Object.prototype.aa = function(){
return this + 1   //返回 + 1的結(jié)果
}
  • 接著看控制臺看下有無這個方法
//直接復(fù)制到控制臺可運行
window.Object.prototype
window.Object.prototype
  • 好,我們現(xiàn)在不用數(shù)組類型數(shù)據(jù)(數(shù)組也是可以的,這里不講),用Number數(shù)據(jù)類型的對象來測試。
//直接復(fù)制到控制臺可運行
let test = 3
test.aa()    // 結(jié)果返回 4

非常完美,不出意外。Number數(shù)字對象數(shù)據(jù)在使用aa方法時候自己本身原型上沒有,這時候就會通過原型鏈去一層層找到我們給Object原型添加的aa方法。

實踐的結(jié)果總結(jié):什么數(shù)據(jù)類型就會去什么數(shù)據(jù)類型的原型上找方法,找不到就繼續(xù)往上找,直到Object為止(開頭的萬物皆對象),Object的原型鏈指向null(理解為連對象里都沒有那就沒有了)
至此,你應(yīng)該大概理解了。

以上是我的個人理解,不足之處,評論指正下唄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容