一文詳解JavaScript中prototype的使用
prototype初步認識
在學習JavaScript中,遇到了prototype,經(jīng)過一番了解,知道它是可以進行動態(tài)擴展的
function Func(){}; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展
即最開始創(chuàng)建的函數(shù)Func并沒有var1變量,但是我們可以進行擴展,并且讓根據(jù)其創(chuàng)建的對象也有var1變量
函數(shù)有prototype屬性,函數(shù)創(chuàng)建的對象沒有
這個時候,嘗試對var1變量進行擴展,但是居然報錯了
function Func(){}; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) func1.prototype.var1 = "func1進行了擴展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1')
獲得當前對象的屬性
那我們現(xiàn)在有一個疑問:func1應該是有var1變量的,那上面報錯意思是func1沒有prototype屬性/方法咯?我如何查看一個對象到底有沒有這個屬性呢?
我們知道,可以用in來查看對象是否有屬性
function Func(){}; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) // func1.prototype.var1 = "func1進行了擴展" //Uncaught TypeError: Cannot set properties of undefined (setting 'var1') console.log("var1" in func1) //true console.log("prototype" in func1) //false
現(xiàn)在我們知道了,func1確實沒有prototype屬性/方法,那func1也就是函數(shù)創(chuàng)建的對象都不能擴展了嗎?回答這個問題之前,我們還要明白一個問題,func1中的var1變量是自己的嗎?怎么區(qū)分呢?
function Func(){}; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) // func1.prototype.var1 = "func1進行了擴展" //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ù)來知道變量是不是擴展的了
父和子的擴展
這里我把Func當成父,把func1當成子來作為個人理解
function Func() { }; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) // func1.prototype.var1 = "func1進行了擴展" //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進行了擴展 console.log(func1.var1) //Func進行了擴展
這里可以看到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都不會變化
function Func() { }; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) // func1.prototype.var1 = "func1進行了擴展" //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進行了擴展 console.log(func1.var1) //Func進行了擴展 console.log("-----接下來看proto和prototype的區(qū)別-----") func1.var1 = "func1進行了擴展" console.log(func1.var1) //func1進行了擴展 console.log(Func.prototype.var1) //Func進行了擴展
擴展得到的東西到底從哪來的
那么子func1我們前面使用了hasOwnProperty屬性,但是func1本身并沒有這個屬性,那么它從哪來的?
function Func() { }; var func1 = new Func; console.log(func1.var1) //undefined Func.prototype.var1 = "Func進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) // func1.prototype.var1 = "func1進行了擴展" //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進行了擴展 console.log(func1.var1) //Func進行了擴展 console.log("-----接下來看proto和prototype的區(qū)別-----") func1.var1 = "func1進行了擴展" console.log(func1.var1) //func1進行了擴展 console.log(Func.prototype.var1) //Func進行了擴展 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__
了
附上完整代碼兩段供測試:
<!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__) // 一個比較復雜的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("------測試原型對象里面的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進行了擴展" console.log(func1.var1) //Func進行了擴展 console.log(Func.var1) // func1.prototype.var1 = "func1進行了擴展" //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進行了擴展 console.log(func1.var1) //Func進行了擴展 console.log("-----接下來看proto和prototype的區(qū)別-----") func1.var1 = "func1進行了擴展" console.log(func1.var1) //func1進行了擴展 console.log(Func.prototype.var1) //Func進行了擴展 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的使用的詳細內(nèi)容,更多關于JavaScript prototype的資料請關注腳本之家其它相關文章!
相關文章
js實現(xiàn)文章目錄索引導航(table of content)
這篇文章主要介紹了js實現(xiàn)文章目錄索引導航(table of content),需要的朋友可以參考下2020-05-05Webpack 之 babel-loader文件預處理器詳解
這篇文章主要介紹了Webpack 之 babel-loader文件預處理器詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03js onmousewheel事件多次觸發(fā)問題解決方法
做一個首屏和第二屏之間滾動鼠標滾輪就可以整平切換的效果,遇到了很多問題,下面是問題解決方法2014-10-10js經(jīng)驗分享 JavaScript反調(diào)試技巧
在這篇文章中,我打算跟大家總結一下關于JavaScript反調(diào)試技巧方面的內(nèi)容。值得一提的是,其中有些方法已經(jīng)被網(wǎng)絡犯罪分子廣泛應用到惡意軟件之中了,需要的朋友可以參考下2018-03-03