JavaScript創(chuàng)建對象方法實例小結
本文實例講述了JavaScript創(chuàng)建對象方法。分享給大家供大家參考,具體如下:
最簡單的方式就是創(chuàng)建一個Object對象,并為其添加屬性和方法。
//示例代碼
var person=new Object()
person.name="yumi"
person.age=18
person.job="coder"
person.sayName=function(){
alert(this.name)
}
person.sayName()//輸出yumi
這種方式使用同一個接口創(chuàng)建多個對象,會出現(xiàn)大量重復代碼。
1.工廠模式
JavaScript中無法創(chuàng)建類,我們可以用函數(shù)來封裝以特定接口創(chuàng)建對象的細節(jié)。
//示例代碼
function createPerson(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
alert(this.name)
};
return o;
}
var person1=createPerson("yumi",18,"coder");
var person2=createPerson("echo",21,"player");
person1.sayName();//輸出yumi
person2.sayName();//輸出echo
工廠模式雖然解決了創(chuàng)建多個相似對象的問題,但卻沒有解決對象識別問題,即怎樣知道一個對象的類型。
2.構造函數(shù)模式
可以創(chuàng)建自定義的構**造函數(shù),從而定義自定義對象類型的屬性和方法。
//示例代碼
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(name);
}
}
var person1=new Person("yumi",18,"coder");
var person2=new Person("echo",21,"player");
person1.sayName();//輸出yumi
person2.sayName();//輸出echo
創(chuàng)建出的對象既是Object的實例,也是Person的實例,也就是說將來我們可以將它的實例標識為特定類型,這也是優(yōu)于工廠模式的地方。但是構造函數(shù)模式也有缺點,即就是每實例化一個對象,對象方法都會創(chuàng)建一遍,我們可以按如下方法稍加改進:
//示例代碼
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=sayName;
}
function sayName(){
alert(name);
}
var person1=new Person("yumi",18,"coder");
var person2=new Person("echo",21,"player");
person1.sayName();
person2.sayName();
將函數(shù)拿到構造函數(shù)外部,構造函數(shù)內部將sayName屬性設成全局sayName函數(shù)(一般單獨的函數(shù)名存放的是指向該函數(shù)的指針,而函數(shù)名加括號為該函數(shù)的執(zhí)行結果)。但這樣做,暴露出的問題是:全局作用域中定義的函數(shù)只能被某一個對象調用,不符合全局定義了。而且,如果某個對象有很多方法,這些方法都定義在全局作用域的話,也就沒什么封裝性可言了。
3.原型模式
前面我們說了,構造函數(shù)模式的缺點是屬性或方法在構造函數(shù)作用域中只能被某個對象調用,想想我們在其他面向對象語言中的處理方式,是將公用的屬性方法定義在父類中,然后通過繼承父類調用。但是JavaScript中不存在類、繼承這些概念,而是通過原型鏈實現(xiàn)“繼承”。
下面就是我們要說的原型模式:
//示例代碼
function Person(){
Person.prototype.name"yumi";
Person.prototype.age=18;
Person.prototype.job=coder;
Person.prototype.sayName=function(){
alert(name);
}
}
var person1=new Person();
var person2=new Person();
person1.sayName(); //"yumi"
person2.sayName(); //"yumi"
alert(person1.sayName==person2.sayName); //true
無論什么時候,只要創(chuàng)建了一個新函數(shù),就會為該函數(shù)創(chuàng)建一個prototype屬性。默認情況下,所有prototype屬性都會自動獲得一個constructor(構造函數(shù))屬性。這個屬性包含一個指向prototype屬性所在函數(shù)的指針。也就是說,Person可以理解為一個類(實際是個函數(shù)),Person.prototype指向原型(原型中定義的方法或屬性可以被對象調用,相當于一個共享區(qū)域),然后Person.prototype.constructor又指向了Person。實例化的對象有一個內部屬性可以指向Person.prototype,但是不能指向構造函數(shù)constructor,跟其無關。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行結果。
更多關于JavaScript相關內容還可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
ES6新特性之類(Class)和繼承(Extends)相關概念與用法分析
這篇文章主要介紹了ES6新特性之類(Class)和繼承(Extends)相關概念與用法,結合實例形式較為詳細的分析了ES6中類(Class)和繼承(Extends)的基本概念、語法、使用方法與注意事項,需要的朋友可以參考下2017-05-05
JavaScript前端巧妙實現(xiàn)數(shù)據(jù)實時更新詳解
作為開發(fā)者,我們常面對復雜的開發(fā)環(huán)境,要應對即時通訊與數(shù)據(jù)實時更新的問題,那么該如何精準高效實現(xiàn)這些功能呢,下面小編就來和大家簡單講講2025-03-03
詳解JS: reduce方法實現(xiàn) webpack多文件入口
本篇文章主要介紹了詳解JS: reduce方法實現(xiàn) webpack多文件入口,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02

