0.注

本文代碼來自于《JavaScript高級(jí)程序設(shè)計(jì)》一書，非原創(chuàng)，算是小弟讀書筆記。而且我也不認(rèn)為自己寫的實(shí)例代碼能比Zakas的更清晰易懂。主要記錄下自己認(rèn)為干貨的部分以及加入自己的理解。文中示意圖等均為原創(chuàng)。

1.對(duì)象？

ECMA的定義：無序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或者函數(shù)。
我自己的理解，對(duì)象就是一個(gè)包含了若干鍵值對(duì)的無序列表。

2.創(chuàng)建對(duì)象的方式

• 工廠模式（其實(shí)并沒什么卵用）
  使用一個(gè)函數(shù)封裝創(chuàng)建對(duì)象的全過程：創(chuàng)建一個(gè)臨時(shí)對(duì)象、為這個(gè)對(duì)象添加屬性、最后將這個(gè)對(duì)象返回

  //代碼來自《JavaScript高級(jí)程序設(shè)計(jì)》
   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('gordenZ','24','front-end engineer');
     ```

* 構(gòu)造函數(shù)模式（問題也大，不會(huì)直接用）
  ```javascript
   //代碼來自《JavaScript高級(jí)程序設(shè)計(jì)》
   function Person(name,age,job) {
       this.name = name;
       this.age = age;
       this.job = job;
       this.sayName = function () {
           alert(this.name);
       };
   }
   var person1 = new Person('gordenZ','24','front-end engineer');
     ```
這個(gè)例子中，創(chuàng)建了一個(gè)構(gòu)造函數(shù)`Person`，并使用`new`操作符實(shí)例化了一個(gè)對(duì)象`person1`。
**為何要使用new 操作符？**
想像一下不使用new的情況：
```javascript
var person1 = Person('gordenZ','24','front-end engineer');
 console.log(name);//gordenZ

如果不使用new操作符，相當(dāng)于在當(dāng)前環(huán)境下直接執(zhí)行Person這個(gè)函數(shù)（構(gòu)造函數(shù)也是函數(shù)，僅僅是第一個(gè)字母大寫了）。這里的執(zhí)行環(huán)境是window，那么Person中的this就指向了全局的window對(duì)象，所以name、age、job、sayName等屬性都被創(chuàng)建在了全局對(duì)象上，可以直接被訪問到。
new操作符干的事情：
1.創(chuàng)建一個(gè)新對(duì)象
2.將構(gòu)造函數(shù)的this指向這個(gè)對(duì)象（這樣就不再是創(chuàng)建到window上了）
3.執(zhí)行構(gòu)造函數(shù)
4.返回新對(duì)象
其實(shí)跟工廠模式?jīng)]有什么區(qū)別嘛
構(gòu)造函數(shù)模式問題：
構(gòu)造函數(shù)模式創(chuàng)建的每個(gè)對(duì)象的實(shí)例都是完全獨(dú)立的，意味著每個(gè)實(shí)例中的屬性都是不同的，這對(duì)于值是基本數(shù)據(jù)類型的屬性來說還好，但是對(duì)于值是一個(gè)實(shí)現(xiàn)同一功能的函數(shù)的屬性來說就顯得冗余了，每一個(gè)實(shí)例都會(huì)有一個(gè)自己的函數(shù)，有多少個(gè)實(shí)例就會(huì)創(chuàng)建多少個(gè)相同的函數(shù)（不要忘了，每個(gè)函數(shù)都是一個(gè)對(duì)象）。

• 原型模式
  js中每一個(gè)函數(shù)都有一個(gè)prototype（即原型）屬性，指向一個(gè)對(duì)象，其功能是保存用這個(gè)函數(shù)類型創(chuàng)建的實(shí)例所共享的屬性和方法。所以我們可以把需要在各個(gè)實(shí)例上共享的屬性和方法放到這個(gè)類型的prototype中，即可只創(chuàng)建一次而被各實(shí)例所共享。

function Person() {
}
Person.prototype.name = "gordenZ";
Person.prototype.age = "24";
Person.prototype.job = "front-end engineer";
Person.prototype.sayName = function () {
    alert(this.name);
};
 var person1 = new Person();
 var person2 = new Person();

  console.log(person1.sayName === person2.sayName); //true

其中，Person是構(gòu)造函數(shù)、Person.prototype是原型對(duì)象、person1和person2是Person的實(shí)例，這三者的關(guān)系如下圖：

構(gòu)造函數(shù)、原型對(duì)象、實(shí)例之間的關(guān)系

person1.sex = "man"

2.可以在實(shí)例中添加與原型中屬性相同的屬性，這樣會(huì)屏蔽掉原型中的同名屬性。尋找屬性的方式是，首先在實(shí)例本身找，找到了就返回，如果沒有找到，則到__proto__指針指向的原型對(duì)象上尋找。

person1.name = "grey"
console.log(person1.name) //grey 

3.其他實(shí)例若沒有添加，則不受影響

console.log(person2.name) //gordenZ。

4.判斷是原型屬性還是實(shí)例屬性：hasOwnProperty()

console.log(person1.hasOwnProperty('name'));//true
console.log(person2.hasOwnProperty('name'));//false

5.判斷對(duì)象是否是一個(gè)實(shí)例的原型：isPrototypeOf()

console.log(Person.prototype.isPrototypeOf(person1));//true
console.log(Person.prototype.isPrototypeOf(person1));//true

6.獲取一個(gè)實(shí)例的原型：Object.getPrototypeOf()

console.log(Object.getPrototypeOf(person1) == Person);//true

原型模式的問題
高度共享帶來問題，在共享的屬性中，如果是數(shù)據(jù)屬性，可以用在實(shí)例上添加同名屬性來屏蔽，但如果某個(gè)屬性是一個(gè)引用類型，那么在任何一個(gè)實(shí)例上對(duì)其進(jìn)行修改，都會(huì)影響到所有實(shí)例。

• 組合使用構(gòu)造函數(shù)模式和原型模式
  1.將每個(gè)實(shí)例自有的屬性寫在構(gòu)造函數(shù)中，即實(shí)例屬性
  2.將所有實(shí)例共享的方法寫在原型對(duì)象中，即原型屬性
  3.若直接使用對(duì)象字面量替換原型對(duì)象，需要將constructor屬性補(bǔ)全

function Person(name,age,job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ["aa","bb"];
}
Person.prototype = {
    //補(bǔ)全constructor屬性
    constructor:Person,
    sayName:function () {
       alert(this.name)
    }
};
var person1 = new Person();
var person2 = new Person();