首頁 > web前端 > js教程 > 詳解js產生物件的3種基本方式(工廠模式,建構函數模式,原型模式)

詳解js產生物件的3種基本方式(工廠模式,建構函數模式,原型模式)

高洛峰
發布: 2017-01-10 12:18:21
原創
1169 人瀏覽過

1.工廠模式

工廠模式是軟體工程領域一種廣為人知的設計模式,而由於在ECMAScript中無法創建類,因此用函數封裝以特定介面創建物件。其實作方法非常簡單,也就是在函數內建立一個對象,給對象賦予屬性及方法再將對象傳回即可。

function a(name){
 var b = new object();
 b.name = name;
 b.say = function(){
  alert(this.name);
 }
  return b
}
登入後複製

函數內部產生b物件並回傳。

2.建構函式模式

function Person(name, url) { //注意构造函数名第一个字母大写
 this.name = name;
 this.url = url;
 this.alertUrl = alertUrl;
}
  
function alertUrl() {
 alert(this.url);
}
登入後複製

   

因為每構造一個物件就會產生一個alertUrl方法,這樣太浪費資源空間,所以把alertUrl這個方法寫在全局以節省空間,但這樣寫就違背了物件導向程式設計的初衷,下面的原型模式就更好。

3.原型模式

我們創建的每個函數都有prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。使用原型物件的好處就是可以讓所有物件實例共享它所包含的屬性及方法。

function Person(){
}
 
Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
  alert(this.name);
}
 
var person1 = new Person();
var person2 = new Person();
  
//测试代码
alert(person1.name); // bill
alert(person2.name); // bill
person1.sayName(); //bill
person2.sayName(); //bill
 
person1.name = "666";
 
alert(person1.name); // 666
alert(person2.name); // bill
person1.sayName(); //666
person2.sayName(); //bill
登入後複製

   

我們建立的每個函數都有prototype(原型)屬性,這個屬性其實是指針,指向一個物件。

當建構一個person物件例如person1之後,它的預設name屬性就是bill。如果要改name值的話就要對person1.name操作。這只是改了這個物件的name屬性。 alert(person1.prototype.name)依然是彈出bill,也就是原型上的name屬性

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。

更多詳解js產生物件的3種基本方式(工廠模式,建構函數模式,原型模式)相關文章請關注PHP中文網!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板