js類與原型鏈

2021-10-17 14:31:12 字數 3069 閱讀 2453

js中建立乙個類很容易,如下所示:

class

person

let p1 =

newperson()

;let p2 =

newperson()

; console.

log(p1)

; console.

log(p2)

;<

/script>

以上建立乙個類,並且建立它的例項p1 和p2,輸出可以看到輸出兩個person例項

但是,我們例項兩個物件卻無法區分(輸出 都一樣啊),所以我們需要對類進行傳參,讓每乙個例項物件都有自己的屬性

class

person

}let p1 =

newperson

('小明',18

);let p2 =

newperson

('小紅',17

);console.

log(p1)

; console.

log(p2)

;<

/script>

同樣我們可以在類中定義一些方法,讓例項區呼叫

class

person

say(

),我今年$了`

);}}

let p1 =

newperson

('小明',18

);let p2 =

newperson

('小紅',17

);console.

log(p1)

; console.

log(p2)

; p1.

say();

p2.say(

);

我們剛才建立了乙個類persion,並且例項了它的物件p1,類和例項之間還有一層關係,那就是原型,原型也是乙個物件,它裡面有一些屬性和方法可以被類和例項繼承。

類裡面有乙個屬性,叫做prototype,它可以指向這個原型,同樣,類的例項也有乙個屬性,叫做 proto,它也可以指向這個原型,而原型有乙個屬性,叫做constructor,它可以指向類,這樣,他們三個的關係可以用圖來表示。

同樣,從瀏覽器中我們也能看出來這種關係,比如我們 剛才例項了p1,並把p1輸出,那麼從剛才那張圖中我們就可以從p1中去找到原型,從原型中找到類

可以看到,輸出的例項p1中有乙個屬性_proto_,它指向乙個物件,這個物件就是 原型,我們展開原型

可以看到,展開原型,發現原型裡面有乙個constructor屬性,它指向person類,我們展開類

可以看到類裡面有個prototype屬性,它指向乙個物件,開啟物件發現還是 之前那個原型,因此,類,例項物件,原型之間的關係就可以解釋的通了。還有乙個細節,p1通過_proto_找到原型鏈的時候,原型鏈上有乙個方法say(),而接著找到類的時候,類中卻沒有say()方法,這就驗證類我們之前的話,類的一些方法放在了原型中,例項可以從原型中繼承方法來使用。

下面來看 類的繼承

class

person

say(

),我今年$了`

);}}

class

student

extends

person

let s1 =

newstudent

('張三',13

) console.

log(s1)

s1.say(

)

這裡建立了乙個studengt類,它繼承了prson,並且例項了乙個物件s1 ,呼叫了say()方法,我們知道,student裡面沒有say()方法,說嗎student原型裡面 也沒有say()方法,那麼他是怎麼找到say()方法並呼叫呢?我們輸出s1,發現了這樣一層關係

即student原型上如果沒有找到所需函式,原型會通過_proto_找到繼承的父類的原型,在父類原型上找,這就構成了原型鏈。

如果我們在student上重寫方法

class

person

say(

),我今年$了`

);}}

class

student

extends

person

say()`

)}}let s1 =

newstudent

('張三',13

,'畫畫'

) console.

log(s1)

s1.say(

)

那麼這裡輸出的say() 方法則是在student上定義的方法,原因也可以在原型鏈上解釋

當student的例項s1首先會在其自己的原型上查詢say(),如果沒有找到,則通過_proto_去上層原型上查詢,如果找到,則不會再去上層原型查詢

還有乙個細節,我們知道,js中有個object類,它是所有物件的父類,那麼person的原型肯定可以通過_proto_,找到object的原型

js 原型與原型鏈

5條原型規則 1.所有的引用型別 陣列 物件 函式 都具有物件特性,即可自由擴充套件屬性 除了 null 除外 2.所有的引用型別 陣列 物件 函式 都有乙個 proto 隱式原型 屬性,屬性值是乙個普通的物件。3.所有的函式,都有乙個prototype 顯式原型 屬性,屬性值也是乙個普通的物件。4...

JS原型與原型鏈

凡是通過new function 建立的物件都是函式物件,其他的是普通物件。var o1 var o2 new object var o3 new f1 function f1 var f2 function var f3 new function str console.log str conso...

js原型與原型鏈

定義函式的時候都建立了乙個函式物件,裡面有個prototype屬性指向了乙個object空物件,這個物件就是函式的原型物件。原型物件中有個constructor屬性,指向函式物件 通過new建立的物件,有個 proto 屬性 左右都是兩個下劃線 它等於對應建構函式的的prototype的值,如上圖。...