动态

详情 返回 返回

JavaScript的原型鏈詳解 - 动态 详情

最近在項目中經常遇到,且與同事經常探討關於js原型鏈的知識。發現其實很多工作經驗好多年的同事也記不太清楚原型鏈的整個環節,今天在這裏專門的把鏈圖畫出來,並且加以講解,希望能夠幫到更多前端的朋友。

原型鏈其實就是一個三角關係,如下圖所示,我們編寫了一個構造函數Student,通過構造函數創建了對象s1const s1 = new Student()),也就是我們經常説的s1是構造函數Student實例

0a531da356cd1b4a80130d004f8de3d.png

此時構造函數Student和實例對象s1的原型都指向Student的原型對象,只是叫法不一樣,構造函數上指向原型對象的地址名叫做prototype,實例對象s1指向原型對象的地址名叫做__proto__,這些屬性名其實在我們日常開發時經常會見到。同時原型對象中的constructor又指向構造函數Student

整體構成了構造函數的三角關係,那麼原型鏈是什麼呢,還要繼續往上走,我們可以清楚的看到,即便是原型對象,它始終還是一個對象,它也有自己的__proto__屬性(所有對象都有__proto__這個屬性,什麼是對象?typeof 變量/常量 === 'object'),如下圖所示。

cbcdbd96decc17fec7bd42def46f71b.png

Student的原型對象的__proto__屬性,指向了Object的原型對象,這就是為什麼你平時創建的對象字面量,或者是生成的實例對象可以使用Object上所有方法的原因(這個原因我們最後贅述)
同時我們反推可以知道,Object原型對象一定是Object構造函數的prototype

以下這塊內容不太容易看懂的話可以多品味 構造函數 -> 實例對象 -> 原型對象,這個單層的三角關係
這時候我們會不太理解為什麼Object構造函數為什麼指向了Student的原型對象,是因為所有的對象都是通過構造函數生成的,所以在創建構造函數Student時,Object構造函數就同時成了一個原型對象,這個原型對象被地址名為Student的構造函數所引用,同時與s1也發生了關聯。

當我們繼續順着Object原型對象再往上找__proto__時,你會發現,Object原型對象的__proto__null,如下圖

4a9c62b2170cb43390b81705fc58472.png

有興趣的話,大家可以一層一層的找找看。

那麼我們常説的原型鏈其實就是圖中右側所有被__proto__關聯起來的一條鏈,這個鏈就是原型鏈

這其中還包含着繼承的概念,繼承的概念在本文不再贅述。

我們最後再説為什麼我們自己創建的所有對象,都可以使用Object原型上的所有方法,是因為實例對象使用的所有方法,都會順着原型鏈一層一層往上去尋找,知道找到第一個匹配的方法,否則就會報錯。這也是我們需要了解原型鏈的意義之一,同時我們還可以利用原型鏈這個特點,找到更多自定義的方法來解決我們實際開發中的問題。

Add a new 评论

Some HTML is okay.