理解js的原型鏈及繼承方法

2021-10-02 10:00:11 字數 2231 閱讀 7580

一. 認識原型鏈

js的建構函式

在es6之前沒有class關鍵字,使用建構函式來例項化乙個物件,建構函式方式方法首字母需要大寫,如下:

function getmsg(name, age)

我們使用new關鍵字去例項化這個物件:

const msg = new getmsg(『tom』, 18);

每次new乙個物件都會建立新的mymsg方法,這個時候我們就需要用到原型。

es6提供的class關鍵字,也只是乙個語法糖,本質js的結構還是乙個物件。

2. 原型和原型物件

每乙個例項物件都有乙個屬性_proto_,指向建構函式的原型物件(prototype),這個屬性就是它的原型。

3. 原型鏈

乙個js物件存在指向原型物件的鏈,就是原型鏈,當開發者想要訪問,這個物件的屬性或者方法的時候,就需要訪問該物件 的原型,通過這個鏈一直往下找,直到結束或者找為止,層層向上到原型鏈的末尾為null。

4. 小結

簡單來理解上面內容的話,是這樣的:

我們使用建構函式來建立乙個例項化物件,這個物件有乙個內建的屬性_proto_,它的值指向的就是最開始宣告的建構函式,這個建構函式就是這個它的原型,我們訪問這個物件的屬性或者方法的時候,就會在它的原型中尋找,如果不存在這個屬性或者方法,我們就要去它的原型物件上尋找,也就是建構函式的prototype屬性中,這個原型物件也有原型屬性 _proto_,一層一層形成乙個原型鏈,末尾為null,如:

二. 如何使用

呼叫建構函式

// 使用prototype屬性給建構函式宣告乙個方法

msg.prototype.getname = function()

const name = new getmsg(『jerry』);

name.getname();// jerry

2. object.create()

let obj = {};

let obj1 = object.create(obj);// 傳入obj作為obj1的原型

上面方法可以實現繼承

function takeage(name)

takeage.prototype.getage = function()

// temp的原型是takeage.prototype

let temp = object.create(takeage.prototype);

function bar(age,label)

// bar的原型是temp,temp的原型是takeage.prototype,所以bar.prototype和有了繼承的關係

bar.prototype = temp;

let barinfo = new bar(12, 『obj a』);

barinfo.getage();// 12

三. js如何實現繼承

建構函式繫結

function bb(name)

2. 也可以用上述的方法:將父建構函式的原型prototype賦給子函式的prototype

function parent(){}

function son(){}               

let temp = function(){}

temp.prototype = parent.prototype;

son.prototype = new temp();

son.prototype.constructor = son;

son.uber = parent.prototype;

3. es6中引入extends

class example extends eg1

}4. 小結

這裡主要小結一下原型鏈的繼承,例如有兩個物件,child和parent物件,我們首先命名乙個中間的建構函式ex,

1)將parent物件的prototype賦值給中間函式

ex.prototype.prototype = parent.prototype;

2)例項化中間函式賦值給子物件,這樣子物件對應的就是ex的原型屬性

child.prototype = new ex();

3) 宣告子函式的建構函式就是它本身

child. prototype.constructor = child;

4)父函式的原型物件給子物件的uber(這裡指的的super:為了拿到父物件的屬性方法)

child.uber = parent. prototype;

這樣就實現了繼承。

js繼承,原型鏈繼承

1 乙個型別的物件能夠訪問另外乙個型別的屬性和方法 2 類與類之間的關係 類就是眾多例項共有的屬性和方法的乙個抽象 function animal name animal.prototype.say function function dog 把子類的原型指向父類的例項 dog.prototype ...

js 原型鏈繼承

建構函式的prototype的 proto 預設指向object.prototype,是繼承object。function animal age animal.prototype.getage function animal.prototype.eat function function dog n...

js原型鏈繼承

function foo var foo newfoo console.log foo.proto foo.prototype true console.log foo.proto foo.constructor.prototype ture function foo var foo newfoo ...