第六章 面向?qū)ο蟪绦蛟O(shè)計(jì)

1. 理解對(duì)象 :

//創(chuàng)建對(duì)象的第一種方法
var person = new Object();
person.name = "Jack";
person.age = 29;
person.job = "Software Enjineer";
person.sayName = function(){
  alert(this.name);
};
//創(chuàng)建對(duì)象的第二種方法（常用的方法）
var person = {
  name: "Jack",
  age: 29,
  job: "Software Enjineer",
  sayName: function(){
alert(this.name);
  }
}

2. 屬性類型 :

數(shù)據(jù)屬性 :
數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置，在這個(gè)位置可以讀取和寫入值禾锤，該屬性有4個(gè)描述其行為的 特性。

• configurable : 表示能否通過 delete 刪除屬性從而重新定義屬性，能否修改屬性的特性秃踩，能否把屬性修改成為訪問器屬性艾猜，默認(rèn)值為 true买喧。

• enumerable : 表示能否通過 for-in 循環(huán)返回屬性，默認(rèn)值為 true匆赃。

• writable : 表示能否通過 for-in 循環(huán)返回屬性淤毛，默認(rèn)值為 true。

• value : 表示能否通過 for-in 循環(huán)返回屬性算柳，默認(rèn)值為 true低淡。

  PS:向前面那個(gè)對(duì)象定義的屬性，他們的 configurable,enumerable,writable 的特性都被設(shè)置為 true,而 value 屬性被設(shè)置為特定的值 Jack瞬项。

  ——————————接下來看一個(gè)可以修改默認(rèn)屬性特性的方法————————————

Object.defineProperty() : 用于修改屬性默認(rèn)的特性蔗蹋，該方法接受三個(gè)參數(shù)（屬性所在的對(duì)象，屬性的名字囱淋，一個(gè)描述符對(duì)象）猪杭，描述符對(duì)象指的就是（configurable,enumerable,writable,value）其中的一個(gè)或多個(gè)。

var person = {};            //聲明一個(gè)對(duì)象
Object.defineProperty(person,"name",{
  writable: false,       //不可修改屬性的值
  value: "Sam"          //給name賦值
});
alert(person.name);         //Sam
person.name = "Jack";
alert(person.name);         //Jack
//類似的規(guī)則也可適用于不可配置的屬性
var person = {};
Object.defineProperty(person,"name",{
  configurable: false,   //不可配置
  value: "Jack"
});
alert(person.name);         //Jack
delete person.name;
alert(person.name);         //Jack
//需要說明的是一旦把屬性改為不可配置就不能再把它變回可配置了妥衣，此時(shí)皂吮，再調(diào)用Object.defineProperty()方法修改除writable之外的特性，都會(huì)導(dǎo)致錯(cuò)誤

訪問器屬性（類似于C#中的訪問器）:
訪問器屬性不包含數(shù)據(jù)值税手，它們包含一對(duì) getter 和 setter 函數(shù)（這兩個(gè)都不是必須的）,讀取訪問器屬性時(shí)蜂筹，調(diào)用 getter 函數(shù)；寫入訪問器屬性時(shí)冈止，調(diào)用 setter 函數(shù)并傳入新值狂票，這個(gè)函數(shù)決定如何讓處理數(shù)據(jù)，訪問器屬性有如下4大特性熙暴。

• configurable : 表示能否通過 delete 刪除屬性從而重新定義屬性闺属，能否修改屬性的特性，能否把屬性修改成為訪問器屬性周霉，默認(rèn)值為 true掂器。

• enumerable : 表示能否通過 for-in 循環(huán)返回屬性，默認(rèn)值為 true俱箱。

• get : 表示能否通過 for-in 循環(huán)返回屬性国瓮，默認(rèn)值為 true。

• set : 表示能否通過 for-in 循環(huán)返回屬性，默認(rèn)值為 true乃摹。

//訪問器屬性不能直接被定義禁漓，必須通過Object.defineProperty()來定義
var book = {
  _year: 2004;     //下劃線表示只能通過對(duì)象方法訪問的屬性
  edition: 1;
};
Object.definedProperty(book,"year",{
  get: function(){
    return this._year;
  }
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      edition = newValue - 2004;
    }
  }
});

3. 定義多個(gè)屬性 :

Object.defineProperties() : 該方法可以通過描述符一次性定義多個(gè)屬性，接受兩個(gè) 對(duì)象 參數(shù)孵睬，第一個(gè)對(duì)象是要添加和修改其屬性的對(duì)象 播歼，第二個(gè)對(duì)象的屬性與第一個(gè)對(duì)象中要添加或修改的屬性一一對(duì)應(yīng)。

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }       
  }         
});

4. 創(chuàng)建對(duì)象 :

————————————接下來讓我們進(jìn)入重頭戲掰读，創(chuàng)建對(duì)象———————————————

目前在JavaScript中最常用的創(chuàng)建對(duì)象的模式是 原型模式秘狞，其他的一些模式如工廠模式，構(gòu)造函數(shù)模式由于各自的缺點(diǎn)已經(jīng)很少被使用蹈集，（我沒說原型模式?jīng)]有缺點(diǎn)）烁试，那么咱們就重點(diǎn)來介紹 原型模式。

在開始之前拢肆，先來說說什么是JavaScript中的構(gòu)造函數(shù)（為什么要這樣說减响，是因?yàn)镴avaScript中的構(gòu)造函數(shù)和其他語言中的不同），JavaScript的構(gòu)造函數(shù)并不是作為類的一個(gè)特定方法存在的郭怪；當(dāng)任意一個(gè)普通函數(shù)用于創(chuàng)建一類對(duì)象時(shí)辩蛋，它就被稱作構(gòu)造函數(shù)，或構(gòu)造器移盆。構(gòu)造函數(shù)本身也是一個(gè)函數(shù)，只不過可以用它來 創(chuàng)建對(duì)象 而已伤为。

//先來看一個(gè)構(gòu)造函數(shù)
function Person(name,age,job){   //構(gòu)造函數(shù)命名首字母大寫
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function(){
    alert(this.name);
  };
};
var person1 = new Person("Jack",29,"Software Enginner");
var person2 = new Person("Sam",27,"Doctor");
//要想創(chuàng)建一個(gè)新實(shí)例咒循，必須使用new操作符，因?yàn)槟銊?chuàng)建的是一個(gè)對(duì)象
//person1,person2分別保存著Person的一個(gè)不同的實(shí)例绞愚。這兩個(gè)對(duì)象都有一個(gè)constructor(構(gòu)造函數(shù))屬性叙甸，該屬性指向Person,這點(diǎn)要記著...
alert(person1.constructor == Person);   //true
alert(person2.constructor == Person);   //true

好，下面我們正式進(jìn)入原型模式
我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè) prototype(原型) 屬性位衩，這個(gè)屬性是一個(gè) 指針裆蒸，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法（看到這里你肯定會(huì)懵糖驴，繼續(xù)往下看）僚祷。

使用原型對(duì)象的好處 :
可以讓所有實(shí)例對(duì)象共享它所包含的屬性和方法，換句話說贮缕，不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息辙谜，而是可以將這些信息直接添加到原型對(duì)象中。

//下面來看個(gè)例子
function Person(){
  Person.prototype.name = "Jack";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  };
};
var person1 = new Person();
person1.sayName();    //Jack
var person2 = new Person();
person2.sayName();    //Jack
alert(person1.sayName == person2.sayName);    //true

下面我用一張圖來讓大家理解原型對(duì)象 :

原型對(duì)象

這張圖展示了Person構(gòu)造函數(shù)感昼，Person的原型屬性以及Person現(xiàn)有的兩個(gè)實(shí)例之間的關(guān)系装哆。

另外，雖然這兩個(gè)實(shí)例都不包含自己的屬性和方法，但我們卻可以調(diào)用原型中的屬性和方法蜕琴，這是通過查找對(duì)象屬性的過程來實(shí)現(xiàn)的萍桌。

那么查找對(duì)象屬性的過程又是怎樣的呢？

當(dāng)代碼讀取某個(gè)對(duì)象的某個(gè)屬性時(shí)凌简，都會(huì)執(zhí)行一次搜索上炎，目標(biāo)是具有給定名字的屬性。搜索會(huì)從對(duì)象實(shí)例本身開始号醉。如果在實(shí)例中找到了具有給定名子的屬性反症，則返回該屬性的值；如果沒有找到畔派，則繼續(xù)搜索指針指向的原型對(duì)象铅碍。

那么根據(jù)這個(gè)過程我們就可以很好地將原型對(duì)象屬性的值給屏蔽掉，換上我們希望的值线椰。

function Person(){
  Person.prototype.name = "Jack";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  };
};
var person1 = new Person();
person1.name = "Sam";
alert(person.name);      //Sam胞谈，來自實(shí)例
var person2 = new Person();
alert(person2.name);     //Jack，來自原型

當(dāng)為對(duì)象實(shí)例添加一個(gè)對(duì)象時(shí)憨愉，這個(gè)屬性會(huì)屏蔽原型對(duì)象中保存的屬性烦绳，也就是不影響原型對(duì)象中保存的屬性。

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

hasOwnProperty() : 該方法可以檢測(cè)一個(gè)屬性是存在于實(shí)例中還是存在于原型中配紫，因?yàn)槭菑?Object 繼承來的径密，所以給定屬性在 對(duì)象實(shí)例 中時(shí)，返回 true躺孝。

function Person(){
  Person.prototype.name = "Jack";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  };
};
var person1 = new Person();     
alert(person1.hasOwnProperty("name"));    //false
person1.name = "Sam";
alert(person1.hasOwnProperty("name"));    //true
delete person1.name;
alert(person1.hasOwnProperty("name"));     //false

通過使用 hasOwnProperty() 方法享扔，什么時(shí)候訪問的是實(shí)例屬性，什么時(shí)候訪問的是原型屬性就一清二楚了植袍，下圖展示了上面例子在不同情況下的實(shí)現(xiàn)與原型的關(guān)系惧眠。

hasOwnProperty

原型與in操作符 :
有兩種方式使用 in 操作符，單獨(dú)使用和在 for-in 里面使用于个，在單獨(dú)使用時(shí)氛魁，in 操作符會(huì)在通過對(duì)象能夠訪問屬性時(shí)返回 true，無論屬性在實(shí)例還是原型中厅篓。

function Person(){
  Person.prototype.name = "Jack";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  };
};
var person1 = new Person();
alert(person1.hasOwnProperty("name"));    //false
alert("name" in person1);   //true
person1.name = "Sam";
alert(person1.hasOwnProperty("name"));     //true
alert("name" in person1);   //true

上述代碼執(zhí)行的整個(gè)過程中秀存，調(diào)用 ”name” in person 返回的值總是 true,我們可以同時(shí)使用 hasOwnProperty() 和 in 操作符，來確定該屬性到底是存在于隊(duì)對(duì)象中羽氮，還是存在于原型中应又。

function hasPrototypePerperty(object,name){
  return !hasOwnProperty(name) && (name in object);
}
function Person(){
  Person.prototype.name = "Jack";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  };
};
var person = new person();
alert(hasPrototypeProperty(person,"name"));   //true
person.name = "Sam";
alert(hasPrototypeProperty(person,"name"));   //false

Object.keys() :
取得對(duì)象上所有可枚舉的 實(shí)例 屬性，接受 一個(gè)對(duì)象 作為參數(shù)乏苦，返回 一個(gè)包含所有可枚舉屬性的數(shù)組株扛。

function Person(){
  Person.prototype.name = "Jack";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  };
};
var keys = Object.keys(Person.prototype);
alert(keys);  //name,age,job,sayName    
var person1 = new Person();
person1.name = "Sam";
person1.age = 27;
alert(Object.keys(person1));    //name.age
//如果你想要得到所有屬性尤筐，不管能不能被枚舉，可以使用Object.getOwnPropertyNames()方法
alert(Object.getOwnPropertyNames(Person.prototype));
//constructor,name,age,job,sayName

更簡(jiǎn)單的原型方法 :

function Person{
};
Person.prototype = {
  name: "Jack",
  age: 29,
  job: "Software Enjineer",
  sayName: function(){
    alert(this.name);
  };
};
//需要注意的是如果這樣寫洞就，constructor屬性不在指向Person了盆繁，如果想讓他指向Person，我們可以手動(dòng)添加
function Person{
};
Person.prototype = {
  constructor: Person,
  name: "Jack",
  age: 29,
  job: "Software Enjineer",
  sayName: function(){
    alert(this.name);
  };
};
//但是還跟原來的有點(diǎn)不一樣旬蟋，哪點(diǎn)不一樣呢油昂？我們發(fā)現(xiàn)現(xiàn)在constructor變成可枚舉的了，要想把它變回來倾贰，可以使用我們前面介紹的enumerable特性冕碟，將它設(shè)置為false
function Person{
}
Person.prototype = {
  name: "Jack";
  age: 29;
  job: "Software Enjineer";
  sayName: function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable: false,
  value: Person
});

原型的動(dòng)態(tài)性 :
由于在原型中查找值的過程是一次搜索，因此我們對(duì)原型對(duì)象作出的任何修改都能夠在實(shí)例上反映出來————即使先創(chuàng)建了實(shí)例也是如此(可以按照指針來理解)匆浙。

var friend = new Person();
Person.prototype.sayHi = function(){
  alert("Hi");
};
friend.sayHi();    //Hi
//但是我們不能重寫原型對(duì)象安寺，那樣會(huì)導(dǎo)致實(shí)例指不到新定義的原型對(duì)象，仍然指向你先前定義的原型對(duì)象
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Sam",
  age: 27,
  job: "Doctor",
  sayHi: function(){
    alert("Hi");
  };            
};
friend.sayHi();    //error

下圖演示了上面代碼的過程:

重寫原型對(duì)象

最后說兩句 :
原型模式的重要性不僅體現(xiàn)在創(chuàng)建自定義類方面首尼，就連原聲的引用類型挑庶，都是采用這種模式創(chuàng)建的。所有原聲引用類型（Object,Array,String等等）都在其構(gòu)造函數(shù)的原型上定義了方法软能。下面舉兩個(gè)例子迎捺。

alert(typeof Array.prototype.sort);    //function       
alert(typeof String.prototype.substring);   //function

前面花了大量的篇幅來介紹原型模式，但是原型模式還不是目前使用最為廣泛的查排，目前使用最為廣泛的是構(gòu)造函數(shù)模式加原型模式凳枝。

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["Tom","Marry"];
}
Person.prototype = {
  constructor: Person,
  sayName: function(){
    alert(this.name);
  };
};
var person1 = new Person("Jack",29,"Software Engineer");
var person2 = new Person("Sam",27,"Doctor");
person1.friends.push("Frank");
alert(person1.friends);  //Tom,Marry,Frank
alert(person2.friends);  //Tom,Marry
alert(person1.friends == person2.friends);   //false
alert(person1.sayName == person2.sayName);   //true

動(dòng)態(tài)原型模式 :
有些人可能對(duì)這種定義對(duì)象的方式覺得麻煩，他可能會(huì)說能不能把構(gòu)造函數(shù)和原型封裝在一個(gè)函數(shù)里跋核？答案是肯定的范舀。

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("Jack",29,"Software Engineer");
friend.sayName();     //Jack

5. 繼承 :

JavaScript中敘述了 原型鏈 的概念，并將其作為實(shí)現(xiàn)繼承的主要方法了罪。其基本思想是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。

咱們來簡(jiǎn)單回顧一下構(gòu)造函數(shù)聪全，原型泊藕，和實(shí)例的關(guān)系。

每個(gè) 構(gòu)造函數(shù) 都有一個(gè) 原型對(duì)象难礼，原型對(duì)象里有一個(gè)指向 構(gòu)造函數(shù) 的指針娃圆，而 實(shí)例 都包含一個(gè)指向 原型對(duì)象 的內(nèi)部指針。

那么假如我們讓 原型對(duì)象 作為另一個(gè)引用類型的 實(shí)例蛾茉，結(jié)果會(huì)怎樣呢讼呢？顯然，此時(shí)的 原型對(duì)象 會(huì)包含一個(gè)指向 最開始那個(gè)原型對(duì)象 的指針谦炬，相應(yīng)的悦屏，最開始的原型對(duì)象 中也包含著一個(gè)指向 最開始的構(gòu)造函數(shù) 的指針节沦。

這就是原型鏈的基本概念...

function SuperType(){
  this.property = true;
};
SuperType.prototype.getSuperValue = function(){
  return this.property;
};
function Subtype(){
  this.subproperty = false;
};
//繼承了SuperType
SubType.prototype = new SuperType();
SubType.protptype.getSubValue = function(){
  return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());      //true

原型鏈

在上面的代碼中，我們沒有使用 SubType 默認(rèn)提供的原型础爬，而是給它替換了一個(gè)新原型甫贯；這個(gè)新原型就是 SuperType 的實(shí)例。于是看蚜，新原型不僅具有作為一個(gè) SuperType 的實(shí)例擁有的所有屬性和方法叫搁，而且其內(nèi)部還有一個(gè)指針，指向 SuperType 的原型供炎。

最終的結(jié)果就是這樣渴逻，instance 指向 SubType 的原型，SubType 的原型又指向 SuperType 的原型音诫。getSuperValue() 方法仍然還在 SuperType.prototype 中惨奕，但 property 則位于 SubType.prototype 中。這是因?yàn)?property 是一個(gè)實(shí)例屬性纽竣，而 getSuperValue() 則是一個(gè)原型方法墓贿。既然 SubType.prototype 現(xiàn)在是 SuperType 的實(shí)例，那么 property 當(dāng)然也就位于該實(shí)例中了蜓氨。

別忘記了默認(rèn)的原型聋袋。

事實(shí)上，前面的例子展示的原型鏈少一環(huán)穴吹。因?yàn)樗械囊妙愋投际?Object,而這個(gè)繼承也是通過原型鏈實(shí)現(xiàn)的幽勒。所有的函數(shù)的默認(rèn)原型都是 Object 的實(shí)例。

完整原型鏈

原型鏈的問題 :
如果有包含引用類型的原型（比如數(shù)組）港令，那么數(shù)組一旦改動(dòng)就將一起整條鏈上的數(shù)組發(fā)生變化啥容，而這一點(diǎn)我們有時(shí)候是不希望看到的。

解決方法 :
借用構(gòu)造函數(shù)：
通過使用 apply() 和 call() 方法在新創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)顷霹。

function SuperType(){
  this.colors = ["red","blue","green"];
};
function SubType(){
  //繼承了SuperType
  SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);  //red,blue,green,black        
var instance2 = new SubType();
alert(instance2.colors);  //red,blue,green

相對(duì)于原型鏈而言咪惠，借用構(gòu)造函數(shù)還有一個(gè)很大的優(yōu)勢(shì)，那就是可以傳遞參數(shù)淋淀。

function SuperType(name){
  this.name = name;
};
function SubType(){
  //繼承了SuperType,同時(shí)還傳遞了參數(shù)
  SuperType.call(this,"Jack");
  //實(shí)例屬性
  this.age = 29;
}        
var instance = new SubType();
alert(instance.name);    //Jack
alert(instance.age);     //29

但是這種方法還是很少人用遥昧。

那么最常用的繼承方法是什么呢？

答案是 組合繼承朵纷。

組合繼承有時(shí)候也成為偽經(jīng)典繼承炭臭，指的是將原型鏈和借用構(gòu)造函數(shù)技術(shù)組合到一塊，從而發(fā)揮二者之長(zhǎng)的繼承模式袍辞。

主要的思路是：使用原型鏈實(shí)現(xiàn)對(duì)原型 屬性和方法 的繼承鞋仍，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì) 實(shí)例屬性 的繼承。這樣一來搅吁，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用威创，又能保證每個(gè)實(shí)例都有它自己的屬性落午。

function SuperType(name){
  this.name = name;
  this.colors = ["red","blue","green"];
};
SuperType.prototype.sayName = function(){
  alert(this.name);
};
function SubType(name,age){
  //繼承屬性
  SuperType.call(this,name);
  this.age = age;
};
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
  alert(this.age);
};
var instance1 = new SubType("Jack",29);
instance1.colors.push("Black");
alert(instance1.colors);     //red,blue,green,black
instance1.sayName();         //Jack
instance1.sayAge();          //29
var instance2 = new SubType("Sam",27);
alert(instance2.colors);    //red,blue,green
instance2.sayName();        //Sam
instance2.sayAge();         //27

組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，融合了他們的優(yōu)點(diǎn)那婉，成為了JavaScript中最受歡迎的繼承模式板甘。

小結(jié) :

• 工廠模式 : 使用簡(jiǎn)單的函數(shù)創(chuàng)建對(duì)象，為對(duì)象添加屬性和方法详炬，然后返回對(duì)象盐类，這個(gè)模式后來被構(gòu)造函數(shù)模式所取代。

• 構(gòu)造函數(shù)模式 : 可以創(chuàng)建自定義引用類型呛谜，可以像創(chuàng)建內(nèi)置對(duì)象實(shí)例一樣使用 new 操作符在跳，不過，構(gòu)造函數(shù)的缺點(diǎn)就在于他的每個(gè)成員都無法得到復(fù)用隐岛，包括函數(shù)猫妙。

• 原型模式 : 使用構(gòu)造函數(shù)的 prototype 屬性來指定那些應(yīng)該共享的屬性和方法。

• 組合使用構(gòu)造函數(shù)和原型模式 : 使用構(gòu)造函數(shù)定義實(shí)例屬性聚凹，使用原型定義共享的屬性和方法割坠。