JavaScript構(gòu)造函數(shù)原理及實(shí)現(xiàn)流程解析
在學(xué)習(xí)構(gòu)造函數(shù)之前我們需要知道我們學(xué)習(xí)構(gòu)造函數(shù)需要學(xué)習(xí)什么:
1.什么是構(gòu)造函數(shù)
2.構(gòu)造函數(shù)用來(lái)做什么
3.構(gòu)造函數(shù)的執(zhí)行過(guò)程
4.構(gòu)造函數(shù)的返回值
1.所以首先我們需要知道什么是構(gòu)造函數(shù):
在我看來(lái),構(gòu)造函數(shù)具有兩個(gè)特點(diǎn)可以判斷是否為構(gòu)造函數(shù):
1.當(dāng)函數(shù)名為首字母大寫(xiě)時(shí),這個(gè)是一個(gè)可以大概判斷構(gòu)造函數(shù)與普通函數(shù)的一個(gè)特點(diǎn),但是不是絕對(duì)正確,因?yàn)槠胀ê瘮?shù)也可以是大寫(xiě)字母開(kāi)頭
2.當(dāng)我們需要調(diào)用構(gòu)造函數(shù)時(shí)我們需要new <構(gòu)造函數(shù)>,也就是產(chǎn)生一個(gè)實(shí)例化對(duì)象。
function Student(name,age,sex,height){
this.name=name;
this.age=age;
this.sex=sex;
this.height=height;
}
//調(diào)用構(gòu)造函數(shù),也就是實(shí)例化一個(gè)對(duì)象。
var p=new Student('luke',23,'nan',180)
console.log(p);
控制臺(tái)輸出:

可以看出輸出的是一個(gè)對(duì)象
2.構(gòu)造函數(shù)是用來(lái)做什么的:
1.當(dāng)我們平時(shí)創(chuàng)建對(duì)象時(shí)可能會(huì)用如下創(chuàng)建對(duì)象的方式來(lái)創(chuàng)建,上代碼:
//用創(chuàng)建對(duì)象方式來(lái)創(chuàng)建
var stu1={name:'zs',age:20,sex:"male",height:186};
var stu2={name:'ls',age:21,sex:"male",height:180}
var stu3={name:'ww',age:22,sex:"female",height:156}
var stu4={name:'jx',age:23,sex:"female",height:165}
var stu5={name:'xf',age:24,sex:"male",height:180}
2.當(dāng)我們用構(gòu)造函數(shù)來(lái)創(chuàng)建這個(gè)對(duì)象時(shí):
//用構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象
function Student(name,age,sex,height){
this.name=name;
this.age=age;
this.sex=sex;
this.height=height;
}
var stu1=new Student('zs',20,"male",186);
var stu2=new Student('ls',21,"male",180);
var stu3=new Student('ww',22,"female",156);
var stu4=new Student('jx',23,"female",165);
var stu5=new Student('xf',24,"male",180);
這樣看起來(lái)是不是要簡(jiǎn)潔的多呢,這里因?yàn)橹挥形鍌€(gè)人,要是五六十個(gè)就會(huì)看出明顯效果
3.構(gòu)造函數(shù)的執(zhí)行過(guò)程
在前面我們知道了構(gòu)造函數(shù)是什么,和其作用,也通過(guò)代碼來(lái)看出了構(gòu)造函數(shù)的作用。那我現(xiàn)在我們需要知道構(gòu)造函數(shù)的執(zhí)行過(guò)程,因?yàn)閷W(xué)習(xí)一個(gè)東西我們需要學(xué)習(xí)其原理,而不是其表面
所以接下來(lái)我就來(lái)講一講構(gòu)造函數(shù)的執(zhí)行過(guò)程:
在之前我們都知道,要調(diào)用構(gòu)造函數(shù)我們需要在其前面加一個(gè)new關(guān)鍵字,所以主要就是new在其作用,在執(zhí)行new關(guān)鍵字后,很明顯,他跟以往的函數(shù)調(diào)用就不同了,他會(huì)依次執(zhí)行以下步驟:
1.new過(guò)后會(huì)產(chǎn)生一個(gè)空對(duì)象,作為一個(gè)返回的對(duì)象實(shí)例
2.將空對(duì)象的原型指向了構(gòu)造函數(shù)的prototype屬性
3.將空對(duì)象的值賦值給構(gòu)造函數(shù)里面的this值
4.開(kāi)始執(zhí)行構(gòu)造函數(shù)里的代碼
4.構(gòu)造函數(shù)的返回值
知道了其執(zhí)行過(guò)程,顯而易見(jiàn),new關(guān)鍵字創(chuàng)建的實(shí)例對(duì)象為構(gòu)造函數(shù)的返回值。
其實(shí)這是不對(duì)的,哈哈。
返回值需要分情況來(lái)定:
1.當(dāng)函數(shù)中沒(méi)有return來(lái)返回值的時(shí)候,會(huì)返回this,也就是實(shí)例化對(duì)象。就像在說(shuō)2.構(gòu)造函數(shù)有什么作用時(shí)說(shuō)的一樣
2.當(dāng)函數(shù)中return中返回一個(gè)復(fù)雜類(lèi)型數(shù)據(jù)的時(shí)候,構(gòu)造函數(shù)會(huì)返回這個(gè)復(fù)雜類(lèi)型數(shù)據(jù),上代碼:
function Student(name,age,sex,height){
this.name=name;
this.age=age;
this.sex=sex;
this.height=height;
return {name:'fanhui',weight:60}
}
var Stu1=new Student('zs',20,"male",186);
console.log(Stu1);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題淺析
這篇文章主要介紹了BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題的解決方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果)實(shí)例代碼
這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11
js實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹(shù)示例
這篇文章主要為大家介紹了js實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
圖片橫向滾動(dòng)效果,大家可能都已經(jīng)很熟悉了,本文為大家介紹下使用js實(shí)現(xiàn)橫向滾動(dòng)效果,喜歡的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09

