您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScrpt的面向?qū)ο笾R(shí)點(diǎn)整理”,在日常操作中,相信很多人在JavaScrpt的面向?qū)ο笾R(shí)點(diǎn)整理問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”JavaScrpt的面向?qū)ο笾R(shí)點(diǎn)整理”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
對(duì)象的創(chuàng)建:
1 創(chuàng)建一個(gè)面向?qū)ο?/strong>
var obj = new Object(); obj.name = 'haha'; obj.showName = function(){ alert(obj.name); } obj.showName();
缺點(diǎn):當(dāng)我們想創(chuàng)建多個(gè)面向?qū)ο蟮臅r(shí)候,重復(fù)代碼過(guò)多,需要封裝,所以有了工廠方法。
2 工廠方式
function CreatePerson(name){ var obj = new Object(); //原料 obj.name = name; //加工 obj.showName = function(){ alert(this.name); } return obj;//出廠 } var p1 = CreatePerson('haha'); p1.showName(); var p2 = CreatePerson('hehe'); p2.showName(); //其實(shí)就是簡(jiǎn)單的封裝函數(shù),整個(gè)過(guò)程像工廠的流水線,所以叫工廠方式
缺點(diǎn):無(wú)法識(shí)別創(chuàng)建的對(duì)象的類(lèi)型。因?yàn)槿慷际荗bject,沒(méi)有區(qū)分度,不像Date、Array等,因此出現(xiàn)了構(gòu)造函數(shù)模式。
3 構(gòu)造函數(shù)模式
function CreatePerson(name){ this.name = name; this.showName = function(){ alert(this.name); } } var p1 =new CreatePerson('haha'); p1.showName(); var p2 = new CreatePerson('hehe'); p2.showName();
我們通過(guò)這二個(gè)方面來(lái)改變:
1 函數(shù)名首字母大寫(xiě)
這是為了區(qū)別于普通的函數(shù),構(gòu)造函數(shù)本身其實(shí)就是普通的函數(shù),只是我們專(zhuān)門(mén)用它來(lái)實(shí)現(xiàn)了構(gòu)造的功能,所以專(zhuān)門(mén)起了一個(gè)名字叫構(gòu)造函數(shù),任何函數(shù)都可以成為構(gòu)造函數(shù),這取決于你調(diào)用函數(shù)的方式,當(dāng)使用了New的方式調(diào)用就成了構(gòu)造函數(shù)。
2 New 關(guān)鍵字調(diào)用
調(diào)用函數(shù)的時(shí)候用了 New關(guān)鍵字,那么New到底做了什么?用不用New有什么區(qū)別?再來(lái)看下面的例子
function CreatePerson(name){ this.name = name; this.showName = function(){ alert(this.name); }; console.log(this); } new CreatePerson('haha'); //CreatePerson CreatePerson('haha'); //window
我們會(huì)發(fā)現(xiàn)當(dāng)用New去調(diào)用一個(gè)函數(shù)的時(shí)候,this的指向會(huì)不一樣。其實(shí)New主要做了下面這些事,不過(guò)下面寫(xiě)的只是大概的行為,并不是內(nèi)部源碼。
function CreatePerson(name){ var obj = {}; //聲明一個(gè)空對(duì)象obj obj._proto_= CreatePerson.prototype; //把這個(gè)對(duì)象的_proto_屬性指向構(gòu)造函數(shù)的原型對(duì)象,這樣obj就可以調(diào)用CreatePerson原型對(duì)象下的所有方法 ,這里原型先知道結(jié)論,下面會(huì)講。 CreatePerson.apply(obj); //用apply方法讓this指向obj對(duì)象 this.name = name; //obj對(duì)象添加屬性,方法 this.showName = function(){ alert(this.name); }; return obj;//返回這個(gè)對(duì)象 }
函數(shù)構(gòu)造模式存在的問(wèn)題:
alert(p1.showName==p2.showName);//false
缺點(diǎn):可見(jiàn)這兩個(gè)對(duì)象并不是共用一個(gè)方法,每new一次,系統(tǒng)都會(huì)新創(chuàng)建一個(gè)內(nèi)存,這兩個(gè)對(duì)象各自有各自的地盤(pán),但他們具有相同的功能,還不共用,肯定不是我們所希望的。所以就有了下一種方法,原型+構(gòu)造模式
4 原型+構(gòu)造模式
原型:每個(gè)函數(shù)都有一個(gè)prototype屬性,它是一個(gè)對(duì)象,也稱(chēng)作原型對(duì)象,我們可以把方法和屬性寫(xiě)在它上面(不過(guò)原型對(duì)象不僅僅有我們寫(xiě)的屬性和方法,還有別的,下面會(huì)介紹),而通過(guò)這個(gè)函數(shù)創(chuàng)建出來(lái)的實(shí)例對(duì)象,都能共享這個(gè)原型對(duì)象下的方法和屬性。所以我們只需要把想要共享的東西放在函數(shù)的prototype下,不想共享的東西通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建就可以了。
看個(gè)栗子(原型+構(gòu)造)
function CreatePerson(name){ this.name = name; } CreatePerson.prototype.showName = function(){ alert(this.name); } var p1 =new CreatePerson('haha'); p1.showName(); var p2 = new CreatePerson('hehe'); p2.showName(); alert(p1.showName==p2.showName);//true
測(cè)試為true,可見(jiàn)showName()方法是共享的,也就是說(shuō)他們共用一個(gè)內(nèi)存,更進(jìn)一步的說(shuō)它們存在引用關(guān)系,也就是說(shuō)你更改了p1的showName也會(huì)影響p2的showName。
_proto_屬性:
同一個(gè)函數(shù)造出來(lái)的實(shí)例對(duì)象能共享這個(gè)函數(shù)的prototype下的方法和屬性,但是它是如何做到的呢?這里要出場(chǎng)的就是_proto_屬性.
每個(gè)實(shí)例化對(duì)象都有_proto_屬性,它是一個(gè)指針,指向函數(shù)的prototype,也就是保存了它的地址。(JS中任何對(duì)象的值都是保存在堆內(nèi)存中,我們聲明的變量只是一個(gè)指針,保存了這個(gè)對(duì)象的實(shí)際地址,所以有了地址就能找到對(duì)象),
所以總得來(lái)說(shuō),每個(gè)實(shí)例化對(duì)象都有_proto_屬性,保存了構(gòu)造函數(shù)的原型對(duì)象的地址,通過(guò)這個(gè)屬性就可以擁有原型對(duì)象下的所有屬性和方法,_proto_屬性實(shí)際就是實(shí)例化對(duì)象和原型對(duì)象之間的連接
原型鏈:
每個(gè)函數(shù)都可以成為構(gòu)造函數(shù),每個(gè)函數(shù)都有原型對(duì)象,每個(gè)原型對(duì)象也可以是一個(gè)實(shí)例化對(duì)象,比如,你創(chuàng)建了一個(gè)函數(shù)fun,它是構(gòu)造函數(shù)function的實(shí)例化對(duì)象,而function的原型對(duì)象,又是Object的實(shí)例對(duì)象。所以fun有個(gè)_proto_屬性可以訪問(wèn)到function的原型對(duì)象,function原型對(duì)象也是個(gè)實(shí)例對(duì)象,也有個(gè)_proto_屬性,可以訪問(wèn)到Object的原型對(duì)象,所以通過(guò)_proto_屬性,就形成了一條原型鏈。每個(gè)實(shí)例化對(duì)象都可以訪問(wèn)到鏈子上方的方法和屬性,所以fun是可以訪問(wèn)Object原型對(duì)象下的方法和屬性的。實(shí)際上所有對(duì)象都可以訪問(wèn)到Object的原型對(duì)象。
原型鏈的訪問(wèn)規(guī)則:先在自身的下面尋找,再去一級(jí)一級(jí)的往原型鏈上找。
如下:
function Aaa(){} Aaa.prototype.num = 3; var a1 = new Aaa(); a1.num =10; alert(a1.num); //10
原型對(duì)象:
原型對(duì)象下可能有三種屬性:
1 原型對(duì)象所帶方法和屬性 2 constructor 3_proto_屬性
constructor:構(gòu)造函數(shù)屬性,每個(gè)函數(shù)的原型對(duì)象都有的默認(rèn)屬性,指向函數(shù)。
每個(gè)實(shí)例化對(duì)象本身是沒(méi)有constructor屬性的,他們下面默認(rèn)只有一個(gè)_proto_屬性,用來(lái)連接原型對(duì)象,而和構(gòu)造函數(shù)本身是沒(méi)有直接的聯(lián)系的。所以它的constructor是訪問(wèn)的原型對(duì)象上的。所以當(dāng)原型對(duì)象的constructor變化了,實(shí)例化對(duì)象的constructor也會(huì)改變。但是如果這個(gè)對(duì)象本身既是原型對(duì)象,又是實(shí)例化對(duì)象,那就擁有了constructor屬性,無(wú)需從原型對(duì)象上面訪問(wèn)。**
看下面的例子,來(lái)驗(yàn)證我們所說(shuō)的:
function CreatePerson(name){ this.name = name; } CreatePerson.prototype.showName = function(){ console.log(this.name); }; var p1 =new CreatePerson('haha'); p1.showName(); console.log(p1.constructor); // CreatePerson 來(lái)自CreatePerson.prototype console.log(CreatePerson.prototype); // {showName:{},constructor:CreatePerson,__proto__:Object.prototype} //可見(jiàn),原型對(duì)象保存了 1 自身添加的方法, 2 構(gòu)造函數(shù)constructor 3 _proto_(和上一層構(gòu)造函數(shù)原型對(duì)象的連接) console.log(CreatePerson.prototype.__proto__===Object.prototype); // true 這個(gè)原型對(duì)象本身又是object的實(shí)例化對(duì)象,所有_proto_指向Object的原型對(duì)象 console.log(CreatePerson.prototype.__proto__===Object); // false 可見(jiàn)是和構(gòu)造函數(shù)下原型對(duì)象的連接,不是構(gòu)造函數(shù) console.log(CreatePerson.prototype.constructor); //CreatePerson CreatePerson.prototype是Object實(shí)例化對(duì)象,也是原型對(duì)象,所以自身?yè)碛衏onstructor屬性 console.log(Object.prototype.__proto__); // null 原型鏈的終點(diǎn)是null console.log(CreatePerson.__proto__); //function.prototype // CreatePerson本身既是構(gòu)造函數(shù)又是function的實(shí)例化對(duì)象,擁有_proto_屬性,指向function的原型對(duì)象 console.log(CreatePerson.constructor); // function 繼承自function.prototype console.log(CreatePerson.prototype instanceof CreatePerson ) //驗(yàn)證是否在一條原型鏈上 false
字面量法定義原型:
為了創(chuàng)建對(duì)象的代碼更方便,你一定見(jiàn)過(guò)這樣的代碼,就是字面量法:
function Aaa(){} Aaa.prototype = { showName:function(){}, showSex:function(){} }; var a1 = new Aaa(); console.log(Aaa.prototype); //{showName:function(){},_proto_} //你會(huì)發(fā)現(xiàn)constructor不見(jiàn)了,因?yàn)檫@種方式相當(dāng)于重新賦值了Aaa.prototype console.log(Aaa.prototype.constructor); //Object 因?yàn)樽陨頉](méi)有了constructor屬性,就去上級(jí)原型對(duì)象找,找到了Object console.log(a1.constructor ); //Object 也變了,驗(yàn)證了它是訪問(wèn)的原型對(duì)象上的
因此我們?cè)趯?xiě)的時(shí)候需要修正一下原型的指向:
function Aaa(){} Aaa.prototype = { constructor:Aaa, num1:function(){alert(10);} } var a1 = new Aaa(); a1.constructor // Aaa
到此,關(guān)于“JavaScrpt的面向?qū)ο笾R(shí)點(diǎn)整理”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。