一文完全理解JS原型鏈,實現完美繼承

2021-09-12 18:24:55 字數 1575 閱讀 4272

全文沒有廢話,需字斟句酌

需要理解的兩個重要概念

原型鏈只是js搜尋物件屬性的機制,和繼承沒有本質上的關係,你需要先掌握js是如何在原型鏈裡搜尋物件屬性的

繼承的本質是復用父物件的屬性,而這些屬性分為兩類:例項屬性和原型屬性(位於原型鏈上的屬性)

繼承的最終目標:

子物件的例項屬性包括:父物件的例項屬性+子物件自定義的例項屬性

子物件的原型屬性:父原型的屬性(__proto__和constructor不同,這是重點後面解釋) + 子原型自定義的屬性

理解object.create()方法:

// 解析object.create(o) 以o為原型建立物件(o作為新物件原型鏈上一級 且o沒有例項屬性)

function create(o)

f.prototype = o;

return new f();

}

要理解object.create()又得先理解new操作符:

// 解析new操作符

function mynew(func)

先說new操作符:

o.__proto__ = func.prototype 建立原型鏈,指定物件的原型屬性

接著就能看懂object.create(o)的**:

建立的物件以o為原型,o指定了物件的原型屬性

以乙個空函式定義例項屬性 所以 新物件沒有例項屬性

最後再來看實現繼承的邏輯就很清楚了:

子建構函式很簡單 呼叫父建構函式就可以了

構造子原型物件sp是重點 sp要復用父原型的屬性,然後sp.__proto__ = 父原型,sp.constructor = 子建構函式

復用父原型屬性很簡單,var sonprototype = object.create(parent.prototype); 同時完成了原型鏈的連線

子建構函式本身復用了父建構函式,直接指定它即可 sonprototype.constructor = son;

具體**如下,

// 定義物件 建構函式定義例項屬性(一般是屬性) 原型物件定義共享屬性(一般是方法)

// 定義父物件

function parent(name)

parent.prototype.sayname = function()

// 繼承 借用父建構函式復用父例項屬性 原型物件復用父原型屬性 想要理解 必須理解object.create()和new

// 定義子物件

function son(name, age)

// 兩步構造子原型物件

var sonprototype = object.create(parent.prototype); // 提取出父原型屬性 建構函式為空函式

sonprototype.constructor = son; // 建構函式改為子建構函式 復用父例項屬性

son.prototype = sonprototype; // 將上面構造好的子原型物件賦給子原型

// 建立子物件

var s = new son('mm', 18);

js 原型 原型鏈理解

執行發現如下 自定義乙個函式,函式包含兩個關鍵資料 prototype,proto 1 原型 prototype person具有prototype屬性 包含我們定義的屬性name,age以及constructor,並且constructor指向我們的person函式,可以理解為prototype就...

js原型鏈理解

關於原型鏈的問題也是領悟了很久,有時候突然覺得什麼都懂了,但下乙個問題出現令人一臉蒙比,好像又什麼都不懂,這是最近的一點經驗,記下來方便以後複習。先貼上最經典的原型煉圖,說實話,這圖是真的很精髓了 首先我們要知道這句話 js中所有的東西 當然都是物件 都有 proto 所有的函式除了有 proto ...

理解js原型和原型鏈

一.普通物件和函式物件 js中,萬物皆物件,大體分為兩種 普通物件,函式物件。凡是通過new function 建立的都是函式物件,其他的則為普通物件。下面舉例說明 function fun1 function var fun2 function function var fun3 new func...