js核心基礎之構(gòu)造函數(shù)constructor用法實例分析
本文實例講述了js核心基礎之構(gòu)造函數(shù)constructor用法。分享給大家供大家參考,具體如下:
在js中,可以利用構(gòu)造函數(shù)來創(chuàng)建特定類型的對象,其中,有一些原生的構(gòu)造函數(shù),Object、Array、等等,所以,當type of Object時,返回的是function。此外,我們還可以創(chuàng)建自定義的構(gòu)造函數(shù),從而自定義對象的屬性以及方法。
例如:
function Person(name,age,job) { this.name=name; this.age=age; this.job=job; this.sayName=function () { alert(this.name); } } var person1=new Person('zhy',18,'SoftWare Engineer'); var person2=new Person('zhy2',19,'Doctor');
注意:要創(chuàng)建Person的新實例,必須使用new操作符。如果不使用new,則屬性和方法都被添加給了window對象了。
這種方式調(diào)用構(gòu)造函數(shù)實際上會經(jīng)歷一下4個步驟:
① 創(chuàng)建一個新對象;
② 將構(gòu)造函數(shù)的作用域賦給新對象,因此,this就指向了這個新對象;
③ 執(zhí)行構(gòu)造函數(shù)中的代碼,即為這個新對象添加屬性、方法;
④ 返回新對象。
缺點:
在上述例子中,我們可以知道,每個實例都有一個sayName的方法,但是
console.log(person1.sayName==person2.sayName);//false
因為,每創(chuàng)建一個實例的時候,實際上所做的是下面這種:
function Person(name,age,job) { this.name=name; this.age=age; this.job=job; this.sayName=new Function () { alert(this.name); } }
所以,person1的sayName跟person2的sayName不是同一個實例。但是我們可以這樣做:
function Person(name,age,job) { this.name=name; this.age=age; this.job=job; this.sayName=sayName; } function sayName(){ alert(this.sayName); }
這樣一來,每個實例對象里面 的sayName函數(shù)指向的都是同一個函數(shù)。
可是問題又來了,如果對象有很多的函數(shù)要定義,那么就要定義很多個全局函數(shù),沒有封裝性可言了,好在這些問題可以通過使用原型模式來解決。
本文參照《JavaScript高級程序編程》
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
- 一文徹底理解js原生語法prototype,__proto__和constructor
- js構(gòu)造函數(shù)constructor和原型prototype原理與用法實例分析
- 幫你徹底搞懂JS中的prototype、__proto__與constructor(圖解)
- javascript設計模式Constructor(構(gòu)造器)模式
- 淺談javascript中的constructor
- npm出現(xiàn)Cannot?find?module?'XXX\node_modules\npm\bin\npm-cli.js'錯誤的解決方法
- CommonJS與ES6?Module的使用區(qū)別分析
- JavaScript ES6 Module模塊詳解
- 全面解析JavaScript Module模式
- 利用webpack理解CommonJS和ES Modules的差異區(qū)別
- Javascript? Constructor構(gòu)造器模式與Module模塊模式
相關文章
怎么讓腳本或里面的函數(shù)在所有圖片都載入完畢的時候執(zhí)行
怎么讓腳本或里面的函數(shù)在所有圖片都載入完畢的時候執(zhí)行...2006-10-10element?UI中在?el-select?與?el-tree?結(jié)合組件實現(xiàn)過程
項目上實現(xiàn)某個功能,使用到了?el-select?和?el-tree?組合實現(xiàn),記錄下兩者結(jié)合的實現(xiàn)過程,對?el-select?與?el-tree?結(jié)合組件實現(xiàn)過程感興趣的朋友跟隨小編一起看看吧2023-02-02