js高階,函式的原型和原型鏈

2021-09-27 19:06:37 字數 4898 閱讀 9595

函式的prototype屬性(圖)

- 每個函式都有乙個propotype屬性,它預設指向乙個object空物件(即稱為:原型物件)

- 原型物件就相當於乙個公共區域,所有同乙個類的例項都可以訪問到這個原型物件

- 我們可以將物件中共有的內容,統一設定到原型物件中

- 查詢時:

當我們訪問物件的乙個屬性或方法時,它會在物件自身中尋找,如果有則直接使用,如果沒有則他會在原型物件中尋找,如果找則直接使用

- 設定時:

- 當我們設定物件的屬性值時,不會查詢原型鏈,如果當前物件中沒有此屬性,直接新增此屬性並設定其值

- - 也就是說新增的屬性直接新增到物件上,而不是原型上。

- 方法一般定義在原型中,屬性一般通過建構函式定義在物件上

- - 以後我們建立建構函式時,可以將這些物件共有的屬性和方法,統一新增到建構函式的原型物件中,這樣不用分別為每乙個物件新增,也不會影響到全域性作用域,就可以使每乙個物件都具有這些屬性和方法啦

給原型物件新增屬性(一般都是方法)

- 作用:函式的所有例項物件自動擁有原型中的屬性(方法)

如果函式是普通函式呼叫prototype沒有任何作用

當函式以建構函式形式呼叫時,它所建立的物件中都有乙個隱含的屬性

- 指向該建構函式的原型物件,我們可以通過__proto__來訪問該屬性 (物件的隱式原型的值為其對應的建構函式的的顯示原型的值)

function

myclass()

//向myclass的原型中新增屬性a

myclass.prototype.a=

123;

//向mc中新增a屬性

mc.a=

"我是mc中的a"

;var mc=

newmyclass()

;var mc2=

newmyclass()

;// 指向該建構函式的原型物件,通過__proto__來訪問該屬性

console.

log(mc.__proto__ === myclass.prototype)

;//true

console.

log(mc2.__proto__ === myclass.prototype)

;//true

//先檢視自身,再檢視原型裡有沒有

console.

log(mc.a)

;//我是mc中的a

console.

log(mc2.a)

;//123

補充js建構函式修改部分

/*

建立乙個person建構函式

*/function

person

(name,age,gender)

;*/}//將sayname方法在全域性作用域中定義

/*將函式定義在全域性作用域,汙染了全域性作用域的命名空間

而且定義在全域性作用域中很不安全

*//*function fun();*/

//向原型中新增sayname的方法

person.prototype.

sayname

=function()

;//建立乙個person的例項

var per=

newperson

("a",18

,"男");

per.

sayname()

;per2.

sayname()

;var per2=

newperson

("b",28

,"男");

console.

log(per.sayname == per2.sayname)

;//true

原型物件中有乙個屬性constructor,它指向函式物件

console.

log(date.prototype,

typeof

(date.prototype));

function

fun(

)fun.prototype.

test

=function()

console.

log(fun.prototype)

;//預設指向乙個object空物件(沒有我們的屬性)

console.

log(date.prototype.constructor===date)

//true

console.

log(fun.prototype.constructor===fun)

//給原型物件新增新增屬性==》例項物件可以訪問

fun.prototype.

test

=function()

沒搞懂啥意思啊

每個函式function都有乙個prototype,即顯示原型屬性

- 原型物件也是物件,所以它也有原型

-隱式原型鏈:

- 當我們在使用乙個物件的屬性或方法時,會先在自身中尋找,自身中如果有則直接使用;

- 如果沒有則去原型物件中尋找,如果原型物件中有,則使用;

- 如果沒有則去原型的原型中尋找,直到找到object物件原型,object物件的原型沒有原型,如果在object中依然沒有找到,則返回undefined

- object的原型物件時原型鏈的盡頭

-console.log(object.prototype.__proto__);//null

- 一般最多只有兩層原型

- - 以下幾個關係說明了幾條原型鏈

-fn.__proto__= fn.prototype;

-fn.__proto__.__proto__==>object.prototype;

-fn.prototype.__proto__==>object.prototype;

-object.prototype.__prototype__=null;

-fn.__proto__==>function.prototype;

-fn.__proto__.__proto__==>object.prototype;

//原型中沒找到

console.

log(mac.__proto__.

hasownproperty

("hasownproperty"))

;//false

//在原型的原型中找到了

console.

log(mac.__proto__.__proto__.

hasownproperty

("hasownproperty"))

;//true

每個例項物件都有乙個_proto_,即隱式原型屬性

物件的隱式原型的值為其對應的建構函式的的顯示原型的值

//定義建構函式

functionfn(

)//建立例項物件

var fn=

newfn()

//給原型新增方法

fn.prototype.

test

=function()

//通過例項呼叫原型的方法

fn.test

()

在js物件和建構函式中講到instanceof的使用,這裡結合原型進行補充:

- 語法:例項物件 instanceof 建構函式

- 如果建構函式的顯示原型物件在例項物件的原型鏈上,返回true,否則返回false

-總結:

- 函式的prototype屬性:在定義函式時自動新增的,預設值是乙個空object物件,內部語句:this.prototype={};

- 物件的__proto__屬性:建立物件時自動新增的,預設值為建構函式的prototype屬性值,內部語句:fn.__proto__=fn.prototype;

- 程式設計師能直接操作顯示原型,但不能直接操作隱式原型 (es6之前)

- 所有函式都是function的例項(包含function自身)

-console.log(function__proto__ === function.prototype)

functiona(

)a.prototype.n=

1var b=

newa()

a.prototype=

var c=

newa()

//開始b的原型就是a的原型,後來a的原型改變,c的原型為新的a的原型

console.

log(b.n,b.m,c.n,c.m)

//1 undefined 2 3

varf=

function()

object.prototype.a=

function()

function.prototype.b=

function()

var f=

newf()

f.a()

//a()f.b

()//報錯,function.prototype不和f在一條原型鏈上,f.

a()//a()f.

b()//b()

console.

log(f)

console.

log(object.prototype)

console.

log(function.prototype)

JS高階 原型和原型鏈

原型鏈是一種關係,例項物件和原型物件之間的關係,關係是通過例項物件中瀏覽器使用的原型 proto 來聯絡的 自定義建構函式,通過例項化,建立例項物件 例項物件中 proto 是原型,瀏覽器使用的 建構函式中的prototype是原型,程式設計師使用的 使用物件 使用物件中的屬性和物件中的方法,使用物...

js 高階 原型與原型鏈

所有函式都有乙個特別的屬性 prototype 顯式原型屬性 所有例項物件都有乙個特別的屬性 proto 隱式原型屬性 1.每個函式都有乙個prototype屬性,它預設指向乙個物件 objectg 即稱為 原型物件 顯式原型與隱式原型的關係 函式的prototype 定義函式時被自動賦值,值預設為...

JS高階 原型鏈

大綱 主體 1 建立函式 注意 object內建原生物件原來就有2 新增例項方法 3 根據建構函式建立例項物件 原型鏈尋找 1 本身有在本身找 2 本身沒有往摸著隱式原型鏈往裡找 或者再上層 4 原型鏈盡頭 object.prototype.prop 為null 5 原型鏈理解 本質為隱式原型鏈 小...