個人做筆記用,整文邏輯性不強

面向物件（Object-Oriented，OO）的語言有一個標志，那就是它們都有類的概念，而通過類可以創建任意多個具有相同屬性和方法的物件，js 中沒有實際上的類的概念，因此它的物件也與基于類的語言中的物件有所不同，ECMA-262 把物件定義為：無序屬性的集合，其屬性可以包含基本值、物件或者函式，嚴格來講，這就相當于說物件是一組沒有特定順序的值，物件的每個屬性或方法都有一個名字，而每個名字都映射到一個值，正因為這樣（以及其他將要討論的原因），我們可以把 js 的物件想象成散串列：無非就是一組名值對，其中值可以是資料或函式，

1. 屬性的特性
- 1.1. 資料屬性
  - 1.1.1. 訪問器屬性
2. 創建物件的幾個模式
- 2.1. 工廠模式
- 2.2. 建構式模式
- 2.3. 原型模式
  - 2.3.1. 原型物件
  - 2.3.2. Object.prototype.hasOwnProperty()
  - 2.3.3. in 運算子
  - 2.3.4. 同時使用 hasOwnProperty()方法和 in 運算子
  - 2.3.5. 更簡單的原型語法
  - 2.3.6. 原型模式的缺點
- 2.4. 組合使用建構式模式和原型模式
- 2.5. 動態原型模式
- 2.6. 寄生建構式模式
- 2.7. 穩妥建構式模式

1. 屬性的特性

物件的屬性在創建時都帶有一些特征值（characteristic）JavaScript 通過這些特征值來定義它們的行為，

ECMA-262 第 5 版在定義只有內部才用的特性（attribute）時，描述了屬性（property）的各種特征，ECMA-262 定義這些特性是為了實作 JavaScript 引擎用的，因此在 JavaScript 中不能直接訪問它們，為了表示特性是內部值，該規范把它們放在了兩對兒方括號中，例如[[Enumerable]]，

ECMAScript 中有兩種屬性：資料屬性和訪問器屬性，

1.1. 資料屬性

資料屬性包含一個資料值的位置，在這個位置可以讀取和寫入值，資料屬性有 4 個描述其行為的特性，

[[Configurable]]：表示能否通過 delete 洗掉屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性，直接在物件上定義的屬性，它們的這個特性默認值為 true，
[[Enumerable]]：表示能否通過 for-in 回圈回傳屬性，像前面例子中那樣直接在物件上定義的屬性，它們的這個特性默認值為 true，
[[Writable]]：表示能否修改屬性的值，像前面例子中那樣直接在物件上定義的屬性，它們的這個特性默認值為 true，
[[Value]]：包含這個屬性的資料值，讀取屬性值的時候，從這個位置讀；寫入屬性值的時候，把新值保存在這個位置，這個特性的默認值為 undefined，

例子:

var person = {
  name: "Nicholas"
};

//person.name:

//[[Configurable]]： true，
//[[Enumerable]]：true，
//[[Writable]]： true，
//[[Value]]：Nicholas

要修改屬性默認的特性，必須使用 Object.defineProperty()方法，這個方法接收三個引數：屬性所在的物件、屬性的名字和一個描述符物件，其中，描述符（descriptor）物件的屬性必須是：configurable、enumerable、writable 和 value，設定其中的一或多個值，可以修改對應的特性值,比如:

var person = {};
Object.defineProperty(person, "name", {
  writable: false,
  value: "Nicholas"
});

1.1.1. 訪問器屬性

訪問器屬性不包含資料值；它們包含一對兒 getter 和 setter 函式（不過，這兩個函式都不是必需的），在讀取訪問器屬性時，會呼叫 getter 函式，這個函式負責回傳有效的值；在寫入訪問器屬性時，會呼叫 setter 函式并傳入新值，這個函式負責決定如何處理資料，訪問器屬性有如下 4 個特性，

[[Configurable]]：表示能否通過 delete 洗掉屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為資料屬性，對于直接在物件上定義的屬性，這個特性的默認值為 true，
[[Enumerable]]：表示能否通過 for-in 回圈回傳屬性，對于直接在物件上定義的屬性，這個特性的默認值為 true，
[[Get]]：在讀取屬性時呼叫的函式，默認值為 undefined，
[[Set]]：在寫入屬性時呼叫的函式，默認值為 undefined，

與資料屬性一樣,必須使用 Object.defineProperty()來定義
例子:

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book, "year", {
  get: function() {
    return this._year;
  },
  set: function(newValue) {
    if (newValue > 2004) {
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.edition); //2

setter 函式通過計算來確定正確的版本，因此，把 year 屬性修改為 2005 會導致_year 變成 2005，而 edition 變為 2，這是使用訪問器屬性的常見方式，即設定一個屬性的值會導致其他屬性發生變化，

由于為物件定義多個屬性的可能性很大，ECMAScript 5 又定義了一個 Object.defineProperties()方法，利用這個方法可以通過描述符一次定義多個屬性，這個方法接收兩個物件引數：第一個物件是要添加和修改其屬性的物件，第二個物件的屬性與第一個物件中要添加或修改的屬性一一對應，

2. 創建物件的幾個模式

雖然 Object 建構式或物件字面量都可以用來創建單個物件，但這些方式有個明顯的缺點：使用同一個介面創建很多物件，會產生大量的重復代碼，為解決這個問題，人們開始使用工廠模式的一種變體，

2.1. 工廠模式

用函式來封裝以特定介面創建物件的細節

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("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

工廠模式雖然解決了創建多個相似物件的問題，但卻沒有解決物件識別的問題（即怎樣知道一個物件的型別），隨著 JavaScript 的發展，又一個新模式出現了，

2.2. 建構式模式

ECMAScript 中的建構式可用來創建特定型別的物件，像 Object 和 Array 這樣的原生建構式，在運行時會自動出現在執行環境中，此外，也可以創建自定義的建構式，從而定義自定義物件型別的屬性和方法，例如，可以使用建構式模式將前面的例子重寫如下

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() {
    alert(this.name);
  };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

這里推薦大家了解一下關于 new 運算子 JS 的 new 到底是干什么的？

在這個例子中，Person()函式取代了 createPerson()函式，我們注意到，Person()中的代碼除了與 createPerson()中相同的部分外，還存在以下不同之處：

沒有顯式地創建物件；
直接將屬性和方法賦給了 this 物件；
沒有 return 陳述句，

person1 和 person2 分別保存著 Person 的一個不同的實體，這兩個物件都有一個 constructor（建構式）屬性，該屬性指向 Person，如下所示，

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true

物件的 constructor 屬性最初是用來標識物件型別的，但是，提到檢測物件型別，還是 instanceof 運算子要更可靠一些，我們在這個例子中創建的所有物件既是 Object 的實體，同時也是 Person 的實體，這一點通過 instanceof 運算子可以得到驗證，

alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true

創建自定義的建構式意味著將來可以將它的實體標識為一種特定的型別；而這正是建構式模式勝過工廠模式的地方，在這個例子中，person1 和 person2 之所以同時是 Object 的實體，是因為所有物件均繼承自 Object

關于建構式:

將建構式當作函式

建構式與其他函式的唯一區別，就在于呼叫它們的方式不同，不過，建構式畢竟也是函式，不存在定義建構式的特殊語法，任何函式，只要通過 new 運算子來呼叫，那它就可以作為建構式；而任何函式，如果不通過 new 運算子來呼叫，那它跟普通函式也不會有什么兩樣，例如，前面例子中定義的 Person()函式可以通過下列任何一種方式來呼叫
```
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作為普通函式呼叫
Person("Greg", 27, "Doctor"); // 添加到 window
window.sayName(); //"Greg"
// 在另一個物件的作用域中呼叫
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"
```
建構式的問題

建構式模式雖然好用，但也并非沒有缺點，使用建構式的主要問題，就是每個方法都要在每個實體上重新創建一遍，在前面的例子中，person1 和 person2 都有一個名為 sayName()的方法，但那兩個方法不是同一個 Function 的實體，不要忘了——ECMAScript 中的函式是物件，因此每定義一個函式，也就是實體化了一個物件，從邏輯角度講，此時的建構式也可以這樣定義，
```
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = new Function("alert(this.name)"); // 與宣告函式在邏輯上是等價的
}
```
從這個角度上來看建構式，更容易明白每個 Person 實體都包含一個不同的 Function 實體（以顯示 name 屬性）的本質，說明白些，以這種方式創建函式，會導致不同的作用域鏈和識別符號決議，但創建 Function 新實體的機制仍然是相同的，因此，不同實體上的同名函式是不相等的，以下代碼可以證明這一點，
```
alert(person1.sayName == person2.sayName); //false
```
然而，創建兩個完成同樣任務的 Function 實體的確沒有必要(占記憶體)；況且有 this 物件在，根本不用在執行代碼前就把函式系結到特定物件上面，因此，大可像下面這樣，通過把函式定義轉移到建構式外部來解決這個問題，
```
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName() {
  alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
```
在這個例子中，我們把 sayName()函式的定義轉移到了建構式外部，而在建構式內部，我們將 sayName 屬性設定成等于全域的 sayName 函式，這樣一來，由于 sayName 包含的是一個指向函式的指標，因此 person1 和 person2 物件就共享了在全域作用域中定義的同一個 sayName()函式，這樣做確實解決了兩個函式做同一件事的問題，可是新問題又來了：在全域作用域中定義的函式實際上只能被某個物件呼叫，這讓全域作用域有點名不副實，而更讓人無法接受的是：如果物件需要定義很多方法，那么就要定義很多個全域函式，于是我們這個自定義的參考型別就絲毫沒有封裝性可言了，好在，這些問題可以通過使用原型模式來解決，

2.3. 原型模式

我們創建的每個函式都有一個 prototype（原型）屬性，這個屬性是一個指標，指向一個物件，而這個物件的用途是包含可以由特定型別的所有實體共享的屬性和方法，如果按照字面意思來理解，那么 prototype 就是通過呼叫建構式而創建的那個物件實體的原型物件，使用原型物件的好處是可以讓所有物件實體共享它所包含的屬性和方法，換句話說，不必在建構式中定義物件實體的資訊，而是可以將這些資訊直接添加到原型物件中，如下面的例子所示

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
  alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

2.3.1. 原型物件

無論什么時候，只要創建了一個新函式，就會根據一組特定的規則為該函式創建一個 prototype 屬性，這個屬性指向函式的原型物件，在默認情況下，所有原型物件都會自動獲得一個 constructor（建構式）屬性，這個屬性包含一個指向 prototype 屬性所在函式的指標，就拿前面的例子來說，Person.prototype. constructor 指向 Person，而通過這個建構式，我們還可繼續為原型物件添加其他屬性和方法，

關于原型物件單獨寫了一篇:js 中的原型物件/prototype

2.3.2. Object.prototype.hasOwnProperty()

可以檢測一個屬性是存在于實體中，還是存在于原型中
例子:

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
  alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //"Greg"——來自實體
alert(person1.hasOwnProperty("name")); //true

alert(person2.name); //"Nicholas"——來自原型
alert(person2.hasOwnProperty("name")); //false

delete person1.name;
alert(person1.name); //"Nicholas"——來自原型
alert(person1.hasOwnProperty("name")); //false

2.3.3. in 運算子

in 運算子會在通過物件能夠訪問給定屬性時回傳 true，無論該屬性存在于實體中還是原型中，

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
  alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——來自實體
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——來自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——來自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

2.3.4. 同時使用 hasOwnProperty()方法和 in 運算子

可以用來確定該屬性到底是是否存在于原型中

function hasPrototypeProperty(object, name) {
  return !object.hasOwnProperty(name) && name in object;
}

回傳 true 是存在于原型
回傳 false 是不存在或者在實體中

2.3.5. 更簡單的原型語法

function Person() {}
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function() {
    alert(this.name);
  }
};

在上面的代碼中，我們將 Person.prototype 設定為等于一個以物件字面量形式創建的新物件，最終結果相同，但有一個例外：constructor 屬性不再指向 Person 了，前面曾經介紹過，每創建一個函式，就會同時創建它的 prototype 物件，這個物件也會自動獲得 constructor 屬性，而我們在這里使用的語法，本質上完全重寫了默認的 prototype 物件，因此 constructor 屬性也就變成了新物件的 constructor 屬性（指向 Object 建構式）

如果 constructor 很重要,可以將其設定回去,方法: 原書 P155,這里不做敘述
constructor 的作用:

通俗的講，就是為了將實體的構造器的原型物件暴露出來, 比如你寫了一個插件,別人得到的都是你實體化后的物件, 如果別人想擴展下物件,就可以用 instance.constructor.prototype 去修改或擴展原型物件，
JavaScript 函式 constructor 的作用，意義

2.3.6. 原型模式的缺點

每個實體的參考型別的實體是共享的

function Person() {}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friends: ["Shelby", "Court"],
  sayName: function() {
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

假如我們的初衷就是像這樣在所有實體中共享一個陣列，那么對這個結果我沒有話可說，可是，實體一般都是要有屬于自己的全部屬性的，而這個問題正是我們很少看到有人單獨使用原型模式的原因所在，

2.4. 組合使用建構式模式和原型模式

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["Shelby", "Court"];
}
Person.prototype = {
  constructor: Person,
  sayName: function() {
    alert(this.name);
  }
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

2.5. 動態原型模式

它把所有資訊都封裝在了建構式中，而通過在建構式中初始化原型（僅在必要的情況下），又保持了同時使用建構式和原型的優點，

function Person(name, age, job) {
  //屬性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if (typeof this.sayName != "function") {
    Person.prototype.sayName = function() {
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

2.6. 寄生建構式模式

基本思想是創建一個函式，該函式的作用僅僅是封裝創建物件的代碼，然后再回傳新創建的物件；但從表面上看，這個函式又很像是典型的建構式，

function Person(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 friend = new Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas"

這個模式可以在特殊的情況下用來為物件創建建構式，假設我們想創建一個具有額外方法的特殊
陣列，由于不能直接修改 Array 建構式，因此可以使用這個模式，

function SpecialArray(){ 
 //創建陣列
 var values = new Array(); 
 //添加值
 values.push.apply(values, arguments); 
 //添加方法
 values.toPipedString = function(){ 
 return this.join("|"); 
 }; 
 
 //回傳陣列
 return values; 
} 
var colors = new SpecialArray("red", "blue", "green"); 
alert(colors.toPipedString()); //"red|blue|green"

關于寄生建構式模式，有一點需要說明：首先，回傳的物件與建構式或者與建構式的原型屬性之間沒有關系(實體.__proto__=Object.prototype)；也就是說，建構式回傳的物件與在建構式外部創建的物件沒有什么不同，為此，不能依賴 instanceof 運算子來確定物件型別，由于存在上述問題，我們建議在可以使用其他模式的情況下，不要使用這種模式，

2.7. 穩妥建構式模式

所謂穩妥物件，指的是沒有公共屬性，而且其方法也不參考 this 的物件，穩妥物件最適合在一些安全的環境中（這些環境中會禁止使用this 和 new），或者在防止資料被其他應用程式（如 Mashup程式）改動時使用，穩妥建構式遵循與寄生建構式類似的模式，但有兩點不同：一是新創建物件的實體方法不參考 this；二是不使用 new 運算子呼叫建構式，按照穩妥建構式的要求，可以將前面的 Person 建構式重寫如下

function Person(name, age, job){ 
 //創建要回傳的物件
 var o = new Object();
 //可以在這里定義私有變數和函式
 //添加方法
 o.sayName = function(){ 
 alert(name); 
 }; 
 
 //回傳物件
 return o; 
}

注意，在以這種模式創建的物件中，除了使用 sayName()方法之外，沒有其他辦法訪問 name 的值，可以像下面使用穩妥的 Person 建構式，

var friend = Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas"

這樣，變數 friend 中保存的是一個穩妥物件，而除了呼叫 sayName()方法外，沒有別的方式可以訪問其資料成員，即使有其他代碼會給這個物件添加方法或資料成員，但也不可能有別的辦法訪問傳入到建構式中的原始資料，穩妥建構式模式提供的這種安全性，使得它非常適合在某些安全執行環境——例如，ADsafe（www.adsafe.org）和 Caja（http://code.google.com/p/google-caja/）提供的環境——
下使用，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/144627.html

標籤：JavaScript

上一篇：vue路由傳參頁面重繪引數丟失問題解決方案

下一篇：js獲取檔案后綴名方法

js中的物件/物件創建模式/[重溫JavaScript基礎(五)]