JavaScript建立物件方法例項小結

本文例項講述了JavaScript建立物件方法。分享給大家供大家參考，具體如下：

最簡單的方式就是建立一個Object物件，併為其新增屬性和方法。

//示例程式碼var person=new Object()
person.name="yumi"person.age=18person.job="coder"person.sayName=function(){
  alert(this.name)
}
person.sayName()//輸出yumi//前端全棧學習交流圈：866109386//面向1-3年經驗前端人員//幫助突破技術瓶頸，提升思維能力

這種方式使用同一個介面建立多個物件，會出現大量重複程式碼。

1.工廠模式

JavaScript中無法建立類，我們可以用函式來封裝以特定介面建立物件的細節。

//示例程式碼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();//輸出yumiperson2.sayName();//輸出echo

工廠模式雖然解決了建立多個相似物件的問題，但卻沒有解決物件識別問題，即怎樣知道一個物件的型別。

2.建構函式模式

可以建立自定義的構**造函式，從而定義自定義物件型別的屬性和方法。

//示例程式碼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();//輸出yumiperson2.sayName();//輸出echo

建立出的物件既是Object的例項，也是Person的例項，也就是說將來我們可以將它的例項標識為特定型別，這也是優於工廠模式的地方。但是建構函式模式也有缺點，即就是每例項化一個物件，物件方法都會建立一遍，我們可以按如下方法稍加改進：

//示例程式碼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();//前端全棧學習交流圈：866109386//面向1-3年經驗前端開發人員//幫助突破技術瓶頸，提升思維能力

將函式拿到建構函式外部，建構函式內部將sayName屬性設成全域性sayName函式（一般單獨的函式名存放的是指向該函式的指標，而函式名加括號為該函式的執行結果）。但這樣做，暴露出的問題是：全域性作用域中定義的函式只能被某一個物件呼叫，不符合全域性定義了。而且，如果某個物件有很多方法，這些方法都定義在全域性作用域的話，也就沒什麼封裝性可言了。

3.原型模式

前面我們說了，建構函式模式的缺點是屬性或方法在建構函式作用域中只能被某個物件呼叫，想想我們在其他面嚮物件語言中的處理方式，是將公用的屬性方法定義在父類中，然後透過繼承父類呼叫。但是JavaScript中不存在類、繼承這些概念，而是透過原型鏈實現“繼承”。

下面就是我們要說的原型模式：

//示例程式碼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

無論什麼時候，只要建立了一個新函式，就會為該函式建立一個prototype屬性。預設情況下，所有prototype屬性都會自動獲得一個constructor(建構函式)屬性。這個屬性包含一個指向prototype屬性所在函式的指標。也就是說，Person可以理解為一個類（實際是個函式）， Person.prototype 指向原型（原型中定義的方法或屬性可以被物件呼叫，相當於一個共享區域），然後 Person.prototype.constructor 又指向了Person。例項化的物件有一個內部屬性可以指向 Person.prototype ，但是不能指向建構函式constructor，跟其無關。