資源描述:
《javascript中的原型prototype完全解析_基礎(chǔ)知識(shí)》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、JavaScript中的原型prototype完全解析要理解JS中的prototype,首先必須弄清楚以下幾個(gè)概念1.JS小所有的東西都是對(duì)彖2.JS中所冇的東西都由Object衍生而來,即所冇?xùn)|西原型鏈的終點(diǎn)指向Object,prototype//["constructor","toString〃,z,toLocalcString〃,"valucOf",^hasOwnProperty^,"isPrototypeOf,z,//,zpropertyIsEnumerable,z,"―defineGetter_”
2、,"―lookupGetter_"—defineSetter_“,//"_lookupSetter_“]console,log(Object?gctOwnPropcrtyNamcs(Object?prototype));3.JS中構(gòu)造函數(shù)和實(shí)例(對(duì)象)之間的微妙關(guān)系構(gòu)造函數(shù)通過定義prototype來約定其實(shí)例的規(guī)格,再通過new來構(gòu)造出實(shí)例,他們的作用就是生產(chǎn)對(duì)象.而構(gòu)造函數(shù)(方法)本身又是方法(Function)的實(shí)例,因此也可以查到它的―proto—(原型鏈)Object/functionF(){}這
3、樣子的就是構(gòu)造函數(shù)啦,一個(gè)是JS原生API提供的,一個(gè)是自定義的newObject()/newF()這樣子的就是實(shí)例啦實(shí)例就〃只能〃查看—proto—來得知自己是基于什么prototype被制造出來的,而〃不能"再重新定義實(shí)例的prototype妄想創(chuàng)造出實(shí)例的實(shí)例了.實(shí)踐出真知,只有自己動(dòng)手觀察/思考才能真正領(lǐng)悟://先來看看構(gòu)造函數(shù)到底是什么//functionEmpty(){}functionEmpty(){}console.log(Function.prototype,Function._proto
4、―);//Object{}functionEmpty(){}console,log(Object,prototype,Object._proto_);functionF(){}//F{}functionEmpty(){}console.log(F.prototype,F._proto―);你可能已經(jīng)暈了,我們來分解一下。prototypeprototype輸岀的格式為:構(gòu)造函數(shù)名原型首先看下Object,prototype輸川了什么?Object{}->前面的Object為構(gòu)造函數(shù)的名稱,后面的那個(gè)表示原型
5、,這里是一個(gè){},即一個(gè)Object對(duì)彖的實(shí)例(空對(duì)彖)那么F{}我們就明白是什么意思了,F(xiàn)就是構(gòu)造函數(shù)的名稱,原型也是一個(gè)空對(duì)象//再來看看出構(gòu)造函數(shù)構(gòu)造出來的實(shí)例varo=newObject();//varo={};//undefinedObject{}console,log(o.prototype,o._proto—);functionF(){}vari二newF();//undefinedF{}console?log(i.prototype,i._proto—);我們?cè)偕钊胍稽c(diǎn),定義下F的原型看看到
6、底會(huì)發(fā)生些什么?functionF(){}F.prototype,a=function(){};vari二newF();//undefinedF{a:function}console?log(i.prototype,i.__roto_);這樣我們就清楚的看到i是由F構(gòu)造岀來的,原型是{a:function},就是原本的空對(duì)象原型新增了一個(gè)a方法我們?cè)贀Q一種情況,完全覆蓋F的原型會(huì)怎么樣?functionF(){}F.prototype={a:functionO{}};vari=newF();//undefi
7、nedObject{a:function}console.log(i.prototype,i?_proto—);咦~為什么這里表明i是由Object構(gòu)造岀來的?不對(duì)吧!因?yàn)槲覀兺耆珜的prototype覆蓋,其實(shí)也就是將原型指定為對(duì)彖b:function),但這會(huì)造成原木的constructor信息丟失,變成了對(duì)象{a:function}指定的constructor.那么對(duì)象{a:function}的constructor是什么呢?因?yàn)閷?duì)象4:function}其實(shí)就相對(duì)于varo二{a:function
8、(){}}//new了一個(gè)Object那么o的constructor當(dāng)然是Object啦我們來糾正下這個(gè)錯(cuò)誤functionF(){}F.prototype二{a:function(){}}//重新指定正確的構(gòu)造函數(shù)F.prototype,construetor=F;vari二newF();//undefinedF{a:function,constructor:function}console.log(i.pro