一文詳解JavaScript中prototype的使用
更新時(shí)間：2022年05月11日 08:18:00 作者：lpzju
這篇文章主要為大家詳細(xì)介紹一下JavaScript中prototype的使用，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下
prototype初步認(rèn)識(shí)
在學(xué)習(xí)JavaScript中，遇到了prototype，經(jīng)過一番了解，知道它是可以進(jìn)行動(dòng)態(tài)擴(kuò)展的
function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
即最開始創(chuàng)建的函數(shù)Func并沒有var1變量，但是我們可以進(jìn)行擴(kuò)展，并且讓根據(jù)其創(chuàng)建的對(duì)象也有var1變量
函數(shù)有prototype屬性，函數(shù)創(chuàng)建的對(duì)象沒有
這個(gè)時(shí)候，嘗試對(duì)var1變量進(jìn)行擴(kuò)展，但是居然報(bào)錯(cuò)了
function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
獲得當(dāng)前對(duì)象的屬性
那我們現(xiàn)在有一個(gè)疑問：func1應(yīng)該是有var1變量的，那上面報(bào)錯(cuò)意思是func1沒有prototype屬性/方法咯？我如何查看一個(gè)對(duì)象到底有沒有這個(gè)屬性呢？
我們知道，可以用in來查看對(duì)象是否有屬性
function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
// func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //false
現(xiàn)在我們知道了，func1確實(shí)沒有prototype屬性/方法，那func1也就是函數(shù)創(chuàng)建的對(duì)象都不能擴(kuò)展了嗎？回答這個(gè)問題之前，我們還要明白一個(gè)問題，func1中的var1變量是自己的嗎？怎么區(qū)分呢？
function Func(){};
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
// func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //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)成子來作為個(gè)人理解
function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
// func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //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__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // 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ū)別
到這里你肯定想問，對(duì)于子func1的__proto__和prototype有什么區(qū)別呢？
首先子func1并沒有prototype屬性
其實(shí)雙下劃線表示隱藏的，不太想讓外界訪問到，這么思考，父Func不僅創(chuàng)建了子func1，而且創(chuàng)建了子func2，這時(shí)候如果子func1通過__proto__修改了var1，那么父Func的var1跟著變化，并且func2的var1也會(huì)變化，但是如果func1直接修改var1，那么父Func和子func2的var1都不會(huì)變化
function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
// func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //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__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // 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(Func.prototype.var1) //Func進(jìn)行了擴(kuò)展
擴(kuò)展得到的東西到底從哪來的
那么子func1我們前面使用了hasOwnProperty屬性，但是func1本身并沒有這個(gè)屬性，那么它從哪來的？
function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
// func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //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__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // 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(Func.prototype.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__了
附上完整代碼兩段供測(cè)試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Fun(){
}
var func1 = new Fun()
console.log(typeof Fun) // function
console.log(typeof func1) // object
console.log(func1.prototype) // undefined
console.log(typeof func1.__proto__) // object
console.log(func1.__proto__) // 一個(gè)比較復(fù)雜的object
console.log(func1.__proto__ == Fun.prototype) // true
console.log(func1.prototype == Fun.prototype) // false
Fun.prototype.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(Fun.prototype.var1) // hello
console.log(func1.__proto__.var1) // hello
console.log(func1.prototype) // undefined
func1.__proto__.var1 = "hhh"
console.log(func1.__proto__.var1) // hhh
console.log(Fun.prototype.var1) // hhh
console.log(Fun.__proto__.var1) // undefined
console.log("------測(cè)試原型對(duì)象里面的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><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Func() { };
var func1 = new Func;
console.log(func1.var1) //undefined
Func.prototype.var1 = "Func進(jìn)行了擴(kuò)展"
console.log(func1.var1) //Func進(jìn)行了擴(kuò)展
console.log(Func.var1)
// func1.prototype.var1 = "func1進(jìn)行了擴(kuò)展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
console.log("var1" in func1) //true
console.log("prototype" in func1) //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__ === Func.prototype) // true
console.log(func1.__proto__ == Func.prototype) // true
console.log(func1.prototype == Func.prototype) // 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(Func.prototype.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
</script>
</body>
</html>以上就是一文詳解JavaScript中prototype的使用的詳細(xì)內(nèi)容，更多關(guān)于JavaScript prototype的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript中先加加和后加加區(qū)別 ++a和a++區(qū)別解析
從學(xué)習(xí) javascript 開始,就對(duì) 先加加 和 后加加 模糊不清,時(shí)至今日,再來學(xué)習(xí)一下,這篇文章主要介紹了javascript中先加加和后加加區(qū)別++a和a++區(qū)別解析,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS仿Base.js實(shí)現(xiàn)的繼承,結(jié)合具體實(shí)例形式分析了javascript擴(kuò)展操作及面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
jQuery實(shí)現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
本篇文章主要是對(duì)JS文本獲得焦點(diǎn)清除文本文字的示例代碼進(jìn)行介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法
這篇文章主要介紹了javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細(xì)介紹了Bootstrap響應(yīng)式表格的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設(shè)置Textarea以及把文本放到標(biāo)記里都不會(huì)起作用，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以了解下2014-01-01
javascript獲取下拉列表框當(dāng)中的文本值示例代碼
需要將用戶點(diǎn)擊下拉列表當(dāng)中某個(gè)選項(xiàng)后，將其所選的內(nèi)容保存起來，下面與大家分享下如何使用js獲取下拉列表框文本值，由此需求的朋友可以參考下2013-07-07