JS的原型介紹及原型的繼承

2021-10-03 23:46:35 字數 3497 閱讀 5948

1. __ proto __

眾所周知,js中萬物皆物件,所以每乙個資料都會有乙個__ proto __ 屬性,這個屬性叫隱式原型

乙個物件(obj)的隱式原型( __ proto __ )指向構造該物件的建構函式(object())的原型屬性(object.prototype)。這樣做的原因是為了保證例項(obj)能夠訪問到在建構函式的原型屬性(object.prototype)中定義的屬性和方法。

2.prototype

函式是乙個特殊的物件,除了和其他物件一樣有 __ proto __ 屬性之外,還有自己特有的屬性(prototype),這個屬性被描述成指標。它指向的是乙個物件型別的資料,這個物件的用途就是包含所有將來使用該函式構造出來的可被共享的屬性和方法(我們把這個物件稱之為原型物件)。

原型物件也有乙個屬性,叫做constructor,這個屬性包含乙個指標,指回了原函式。類似於arguments.callee,但是arguments只能在函式內部獲得,而函式原型物件內的constructor屬性,可以在任何能訪問到這個函式的位置使用。

3.建構函式、原型、例項之間的關係

4.例項和原型關係檢測

// 檢視 fn 的 prototype 物件,是否是 f 原型

fn.prototype.

isprototypeof

(f);

// 檢視 f 物件是否是建構函式 fn 的例項

console.

log(f instanceoffn)

;// 檢視 f 物件是否是建構函式 fn 的例項

console.

log(f instanceof

object

);

兩種使用,如果是返回ture,如果不是返回false;

注意:instanceof運算子右側為建構函式,並且js中所有原型都來自object建構函式。

functionfn(

)function

fun(

)var f =

newfn()

; console.

log( f.__proto__ === fn.prototype )

;// t

console.

log( fn.prototype.

isprototypeof

(f))

;// t

console.

log( fun.prototype.

isprototypeof

(f))

;// f

console.

log( object.prototype.

isprototypeof

(f))

;// t

console.

log( f instanceoffn)

;// t

console.

log( f instanceof

fun)

;// f

console.

log( f instanceof

object);

// t

5. js解析器訪問屬性順序

當訪問例項 f的屬性或方法時,會先在當前例項物件 f中查詢,如果沒有,則沿著__proto__繼續向上尋找,如果找到最頂頭的object還是找不到,則會丟擲undefined。如果在例項中找到,或某層原型中找到,就會讀取並使用,同時停止向上找尋。

由此可見,解析器的解析順序遵循就近原則,如果在最近的位置發現屬性存在,便不會繼續向上找尋。

6. 原型的應用

(1)簡單應用:

functionfn(

)fn.prototype.

show

=function()

var f =

newfn()

;console.

log(f);f.

show()

;

(2)陣列去重:

array.prototype.

norepeat

=function()

}return m;

}var arr =[3

,4,5

,6,7

,6,5

,4,3

,2,1

];var res = arr.

norepeat()

;console.

log(res)

;var arr1 =

["a"

,"b"

,"c"

,"b"

,"a"];

var res1 = arr1.

norepeat()

;console.

log(res1)

;

原型的繼承

示例①

function

parent()

parent.prototype.

show

=function()

function

child()

for(

var i in parent.prototype)

child.prototype.

show

=function()

var p =

newparent()

;p.show()

;console.

log(p.name)

;var c =

newchild()

;c.show()

;console.

log(c.name)

;

示例②

function

parent()

parent.prototype.

show

=function()

function

child()

var p =

newparent()

;console.

log(p)

var c =

newchild()

;console.

log(c)

;

js原型物件 原型鏈 繼承

原型物件 只要建立了乙個新函式,就會根據一些特定的規則為該函式建立乙個prototype屬性,這個屬性指向的物件就是該新函式的原型物件。預設情況下,所有原型物件都會自動獲取乙個constructor屬性,這個屬性是乙個指向prototype屬性所在函式的指標 原型物件的優點 可以讓所有物件例項共享它...

js原型及原型鏈

在建構函式建立出來的時候,系統會預設幫建構函式建立乙個原型物件。原型物件中的屬性和方法可以被建構函式建立出來的物件訪問。建構函式.prototyoe 屬性 方法 的查詢原則 當訪問物件的成員的時候,會在自身找有沒有,如果有直接使用,如果沒有找到,則去當前物件的原型物件中找,如果找到了直接使用 如果沒...

js原型及原型鏈

每個物件都有proto屬性用於指向建立它的建構函式的原型物件。function animal name animal.prototype.getname function animal.prototype.getage function var animal1 newanimal kate var ...