本文實(shí)例講述了JavaScript創(chuàng)建對(duì)象方法。分享給大家供大家參考，具體如下：

最簡(jiǎn)單的方式就是創(chuàng)建一個(gè)Object對(duì)象，并為其添加屬性和方法。

//示例代碼
var person=new Object()
person.name="yumi"
person.age=18
person.job="coder"
person.sayName=function(){
  alert(this.name)
}
person.sayName()//輸出yumi

這種方式使用同一個(gè)接口創(chuàng)建多個(gè)對(duì)象，會(huì)出現(xiàn)大量重復(fù)代碼。

1.工廠模式

JavaScript中無法創(chuàng)建類，我們可以用函數(shù)來封裝以特定接口創(chuàng)建對(duì)象的細(xì)節(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)建多個(gè)相似對(duì)象的問題，但卻沒有解決對(duì)象識(shí)別問題，即怎樣知道一個(gè)對(duì)象的類型。

2.構(gòu)造函數(shù)模式

可以創(chuàng)建自定義的構(gòu)**造函數(shù)，從而定義自定義對(duì)象類型的屬性和方法。

//示例代碼
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)建出的對(duì)象既是Object的實(shí)例，也是Person的實(shí)例，也就是說將來我們可以將它的實(shí)例標(biāo)識(shí)為特定類型，這也是優(yōu)于工廠模式的地方。但是構(gòu)造函數(shù)模式也有缺點(diǎn)，即就是每實(shí)例化一個(gè)對(duì)象，對(duì)象方法都會(huì)創(chuàng)建一遍，我們可以按如下方法稍加改進(jìn)：

//示例代碼
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ù)拿到構(gòu)造函數(shù)外部，構(gòu)造函數(shù)內(nèi)部將sayName屬性設(shè)成全局sayName函數(shù)（一般單獨(dú)的函數(shù)名存放的是指向該函數(shù)的指針，而函數(shù)名加括號(hào)為該函數(shù)的執(zhí)行結(jié)果）。但這樣做，暴露出的問題是：全局作用域中定義的函數(shù)只能被某一個(gè)對(duì)象調(diào)用，不符合全局定義了。而且，如果某個(gè)對(duì)象有很多方法，這些方法都定義在全局作用域的話，也就沒什么封裝性可言了。

3.原型模式

前面我們說了，構(gòu)造函數(shù)模式的缺點(diǎn)是屬性或方法在構(gòu)造函數(shù)作用域中只能被某個(gè)對(duì)象調(diào)用，想想我們?cè)谄渌嫦驅(qū)ο笳Z言中的處理方式，是將公用的屬性方法定義在父類中，然后通過繼承父類調(diào)用。但是JavaScript中不存在類、繼承這些概念，而是通過原型鏈實(shí)現(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

無論什么時(shí)候，只要?jiǎng)?chuàng)建了一個(gè)新函數(shù)，就會(huì)為該函數(shù)創(chuàng)建一個(gè)prototype屬性。默認(rèn)情況下，所有prototype屬性都會(huì)自動(dòng)獲得一個(gè)constructor(構(gòu)造函數(shù))屬性。這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)的指針。也就是說，Person可以理解為一個(gè)類（實(shí)際是個(gè)函數(shù)），Person.prototype指向原型（原型中定義的方法或?qū)傩钥梢员粚?duì)象調(diào)用，相當(dāng)于一個(gè)共享區(qū)域），然后Person.prototype.constructor又指向了Person。實(shí)例化的對(duì)象有一個(gè)內(nèi)部屬性可以指向Person.prototype，但是不能指向構(gòu)造函數(shù)constructor，跟其無關(guān)。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論