一文詳解JavaScript中prototype的使用

第一文詳解JavaScript中prototype的使用目錄prototype初步認(rèn)識函數(shù)有prototype屬性，函數(shù)創(chuàng)建的對象沒有獲得當(dāng)前對象的屬性父和子的擴(kuò)展子的proto和prototype的區(qū)別擴(kuò)展得到的東西到底從哪來的

prototype初步認(rèn)識

在學(xué)習(xí)JavaScript中，遇到了prototype，經(jīng)過一番了解，知道它是可以進(jìn)行動態(tài)擴(kuò)展的

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

即最開始創(chuàng)建的函數(shù)Func并沒有var1變量，但是我們可以進(jìn)行擴(kuò)展，并且讓根據(jù)其創(chuàng)建的對象也有var1變量

函數(shù)有prototype屬性，函數(shù)創(chuàng)建的對象沒有

這個時候，嘗試對var1變量進(jìn)行擴(kuò)展，但是居然報錯了

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

獲得當(dāng)前對象的屬性

那我們現(xiàn)在有一個疑問：func1應(yīng)該是有var1變量的，那上面報錯意思是func1沒有prototype屬性/方法咯？我如何查看一個對象到底有沒有這個屬性呢？

我們知道，可以用in來查看對象是否有屬性

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

//totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

console.log("var1"infunc1)//true

console.log("prototype"infunc1)//false

現(xiàn)在我們知道了，func1確實沒有prototype屬性/方法，那func1也就是函數(shù)創(chuàng)建的對象都不能擴(kuò)展了嗎？回答這個問題之前，我們還要明白一個問題，func1中的var1變量是自己的嗎？怎么區(qū)分呢？

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

//totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

console.log("var1"infunc1)//true

console.log("prototype"infunc1)//false

console.log("-----接下來看hasOwnProperty函數(shù)-----")

func1.var2="func1自己的變量"

console.log(func1.hasOwnProperty("var2"))//true

console.log(func1.hasOwnProperty("var1"))//false

我們可以用hasOwnProperty函數(shù)來知道變量是不是擴(kuò)展的了

父和子的擴(kuò)展

這里我把Func當(dāng)成父，把func1當(dāng)成子來作為個人理解

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

//totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

console.log("var1"infunc1)//true

console.log("prototype"infunc1)//false

console.log("-----接下來看hasOwnProperty函數(shù)-----")

func1.var2="func1自己的變量"

console.log(func1.hasOwnProperty("var2"))//true

console.log(func1.hasOwnProperty("var1"))//false

console.log("-----接下來看proto-----")

console.log(Func.hasOwnProperty("__proto__"))//false

console.log(func1.hasOwnProperty("__proto__"))//false

console.log(func1.__proto__===Ftotype)//true

console.log(func1.__proto__==Ftotype)//true

console.log(totype==Ftotype)//false

console.log(func1.__proto__.var1)//Func進(jìn)行了擴(kuò)展

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

這里可以看到func1本身沒有__proto__屬性，但是和Func的protype屬性是一樣的

子的proto和prototype的區(qū)別

到這里你肯定想問，對于子func1的__proto__和prototype有什么區(qū)別呢？

首先子func1并沒有prototype屬性

其實雙下劃線表示隱藏的，不太想讓外界訪問到，這么思考，父Func不僅創(chuàng)建了子func1，而且創(chuàng)建了子func2，這時候如果子func1通過__proto__修改了var1，那么父Func的var1跟著變化，并且func2的var1也會變化，但是如果func1直接修改var1，那么父Func和子func2的var1都不會變化

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

//totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

console.log("var1"infunc1)//true

console.log("prototype"infunc1)//false

console.log("-----接下來看hasOwnProperty函數(shù)-----")

func1.var2="func1自己的變量"

console.log(func1.hasOwnProperty("var2"))//true

console.log(func1.hasOwnProperty("var1"))//false

console.log("-----接下來看proto-----")

console.log(Func.hasOwnProperty("__proto__"))//false

console.log(func1.hasOwnProperty("__proto__"))//false

console.log(func1.__proto__===Ftotype)//true

console.log(func1.__proto__==Ftotype)//true

console.log(totype==Ftotype)//false

console.log(func1.__proto__.var1)//Func進(jìn)行了擴(kuò)展

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log("-----接下來看proto和prototype的區(qū)別-----")

func1.var1="func1進(jìn)行了擴(kuò)展"

console.log(func1.var1)//func1進(jìn)行了擴(kuò)展

console.log(Ftotype.var1)//Func進(jìn)行了擴(kuò)展

擴(kuò)展得到的東西到底從哪來的

那么子func1我們前面使用了hasOwnProperty屬性，但是func1本身并沒有這個屬性，那么它從哪來的？

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

//totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

console.log("var1"infunc1)//true

console.log("prototype"infunc1)//false

console.log("-----接下來看hasOwnProperty函數(shù)-----")

func1.var2="func1自己的變量"

console.log(func1.hasOwnProperty("var2"))//true

console.log(func1.hasOwnProperty("var1"))//false

console.log("-----接下來看proto-----")

console.log(Func.hasOwnProperty("__proto__"))//false

console.log(func1.hasOwnProperty("__proto__"))//false

console.log(func1.__proto__===Ftotype)//true

console.log(func1.__proto__==Ftotype)//true

console.log(totype==Ftotype)//false

console.log(func1.__proto__.var1)//Func進(jìn)行了擴(kuò)展

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log("-----接下來看proto和prototype的區(qū)別-----")

func1.var1="func1進(jìn)行了擴(kuò)展"

console.log(func1.var1)//func1進(jìn)行了擴(kuò)展

console.log(Ftotype.var1)//Func進(jìn)行了擴(kuò)展

console.log("-----接下來看hasOwnProperty從哪來的-----")

console.log(Func.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))//true

console.log(Func.__proto__.hasOwnProperty("hasOwnProperty"))//false

console.log(func1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))//true

從父和子那節(jié)的那張圖也可以看出，使用兩次__proto__即可找到hasOwnProperty屬性

那么到此也就了解了prototype和__proto__了

附上完整代碼兩段供測試：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

/head

body

script

functionFun(){

varfunc1=newFun()

console.log(typeofFun)//function

console.log(typeoffunc1)//object

console.log(totype)//undefined

console.log(typeoffunc1.__proto__)//object

console.log(func1.__proto__)//一個比較復(fù)雜的object

console.log(func1.__proto__==Ftotype)//true

console.log(totype==Ftotype)//false

Ftotype.var1="hello"

console.log(func1.var1)//hello

console.log(func1.__proto__.var1)//hello

func1.var1="yes"

console.log(Fun.var1)//undefined

console.log(func1.var1)//yes

console.log(Ftotype.var1)//hello

console.log(func1.__proto__.var1)//hello

console.log(totype)//undefined

func1.__proto__.var1="hhh"

console.log(func1.__proto__.var1)//hhh

console.log(Ftotype.var1)//hhh

console.log(Fun.__proto__.var1)//undefined

console.log("------測試原型對象里面的proto-------")

console.log(func1.hasOwnProperty("var1"))//true

console.log(func1.hasOwnProperty("__proto__"))

console.log(Fun.hasOwnProperty("hasOwnProperty"))//false

console.log(Fun.hasOwnProperty("__proto__"))//false

console.log(Fun.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))//true

console.log(Fun.__proto__.hasOwnProperty("hasOwnProperty"))//false

console.log(func1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))//true

/script

/body

/html

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

/head

body

script

functionFunc(){};

varfunc1=newFunc;

console.log(func1.var1)//undefined

Ftotype.var1="Func進(jìn)行了擴(kuò)展"

console.log(func1.var1)//Func進(jìn)行了擴(kuò)展

console.log(Func.var1)

//totype.var1="func1進(jìn)行了擴(kuò)展"http://UncaughtTypeError:Cannotsetpropertiesofundefined(setting'var1')

console.log("var1"infunc1)//true

console.log("prototype"infunc1)//false

console.log("-----接下來看hasOwnProperty函數(shù)-----")

func1.var2="func1自己的變量"

console.log(func1.hasOwnProperty("var2"))//true

console.log(func1.hasOwnProperty("var1"))//false

console.log("-----接下來看proto-----")

console