js三座大三,這是第二座山,今天來和大家一起翻山越嶺。閱讀前請記住這句話js里萬物皆對象。
js原型、原型鏈一鏡到底開始:
1、知道什么是原型和原型鏈
首先請想下你平常寫代碼數(shù)組的常用方法有哪幾個,答:map、forEach、concat、some....等等,你有沒有想過這些方法從哪里來的?
當(dāng)然是有人寫出來的?。。?!為了方便,提前寫好的?。。。?br>
沒錯,就是這樣的,接下來我們直接瀏覽器f12看一下數(shù)組的其他方法,怎么看?控制臺輸入下面這段話:
window.Array.prototype
Arrary代表數(shù)組,prototype可以看數(shù)組原型的方法,別人寫好的東西就在這里,prototype翻譯過來就是原型的意思,即數(shù)組的原型。這就是原型

我們試著寫個代碼,用原型里的方法concat:
let a = [1,2,3]
a.concat([4]) //[1,2,3,4]

再來寫一個,不在Arrary原型里的方法:
let a = [1,2]
a.toString() // "1,2"

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

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

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

- 好,我們現(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)該大概理解了。
以上是我的個人理解,不足之處,評論指正下唄。