目錄
導(dǎo)語
1.理解對象和面向?qū)ο蟮某绦蛟O(shè)計
2.創(chuàng)建對象的方式
3.JavaScript的繼承機制
3.1 原型對象
3.2 原型鏈
3.3 與原型對象相關(guān)的方法
4.小結(jié)
導(dǎo)語
前面的系列文章，基本把JavaScript的核心知識點的基本語法女责、標準庫等章節(jié)講解完收恢；
本章開始進入JavaScript核心知識點的高級部分——面向?qū)ο蟮某绦蛟O(shè)計呛梆，這一部分的內(nèi)容將會對對象這一數(shù)據(jù)類型做進一步的深化理解霞溪，并且講述幾種創(chuàng)建對象的設(shè)計模式以及JavaScript獨特的繼承機制订框；
1.理解對象和面向?qū)ο蟮某绦蛟O(shè)計
1.1 面向?qū)ο蟮某绦蛟O(shè)計
"面向?qū)ο缶幊?（Object Oriented Programming楣责，縮寫為OOP）本身是一種編程的思維模式淆储，它把世界的一切看作是對象的集合笋轨，世界的運轉(zhuǎn)就是靠一個個對象分工秆剪、合作的結(jié)果，體現(xiàn)一切皆“對象”思想爵政；
而在程序設(shè)計當中仅讽，面向?qū)ο缶幊叹涂梢钥醋鼍帉懜鱾€具有特定功能的對象（模塊）并將它們進行有機的分工合作，即目前的模塊化編程就是面向?qū)ο蟮某绦蛟O(shè)計的實際應(yīng)用钾挟；
1.2 理解對象
對象在前面的系列文章中曾經(jīng)提到洁灵，從數(shù)據(jù)特征上看，對象是無序?qū)傩裕ㄦI值對）的集合等龙；
我們可以使用字面量和構(gòu)造函數(shù)的方式去創(chuàng)建一個最為簡單的對象：
var person = new Object();
person.name = "teren";
person.age = 18;
person.greet = function(){
console.log("hello "+this.name);
}
var teren = {
name:"teren",
age:18,
greet:function(){
console.log("hello "+this.name);
}
}
通常創(chuàng)建一個簡單的對象处渣，都是采用字面量的方式；
上面的對象就是對現(xiàn)實對象的一種抽象表達蛛砰；
1.3 對象的屬性類型
前面章節(jié)中我們使用delete命令可以刪除一些對象的屬性罐栈，有一些又不可以，使用Object.keys()方法只能遍歷可枚舉屬性泥畅，那么對象的屬性是否有一些特性是我們尚未了解的呢荠诬？
ES5提供了一種只有內(nèi)部才用的特性（attribute）去描述對象的屬性（property）的各種特性，使用[[attribute]]表示，在JavaScript中不能直接訪問它們柑贞；
一個我們非常熟悉的栗子就是Number構(gòu)造函數(shù)構(gòu)造出來的實例對象方椎；
我們無法直接訪問num.[[PrimitiveValue]]，這一屬性钧嘶，只能通過num.valueOf()訪問該值棠众；
ES5中定義對象屬性的兩種特性，數(shù)據(jù)特性和訪問器特性有决，對象屬性可以兼?zhèn)溥@兩種特性闸拿；
數(shù)據(jù)特性定義對象的屬性值的特性，一個屬性值可以包括以下四個數(shù)據(jù)特性：
[[Value]]:存放屬性值书幕；
[[Writable]]:是否可寫屬性新荤；
[[Enumerable]]:是否為可枚舉屬性；
[[Configurable]]:是否可用delete命令刪除台汇；
訪問器特性定義對象的屬性在訪問屬性和設(shè)置屬性時調(diào)用的兩個函數(shù)getter和setter苛骨；
[[Get]]:訪問屬性時調(diào)用的函數(shù)；
[[Set]]:設(shè)置屬性時調(diào)用的函數(shù)苟呐；
下面以一個實例對象直接講解這兩個特性：
//數(shù)據(jù)特性痒芝；
var teren = {};
Object.defineProperty(teren,{
value:"teren",
writable:false,
enumerable:true,
configurable:true
})
//訪問器特性；
//html
<div id="name"></div>
//js
var obj = Object.defineProperty({},"name",{
set:function(name){
document.getElementById('name').innerHTML=name
},
get:function(){
console.log( document.getElementById('name').innerHTML
)
},
})
obj.name = "hello world"
obj.name
【demo】
Object.defineProperties可以一次性配置對象的多個屬性掠抬；
2. 創(chuàng)建對象的方式
上一節(jié)我們對面向?qū)ο蟮某绦蛟O(shè)計思想和對象有了初步理解吼野，這一節(jié)我們深入探討一下對象的創(chuàng)建方式及其優(yōu)缺點；
創(chuàng)建對象的不同方式也可以簡單的稱作設(shè)計模式两波，不同的設(shè)計模式在實際編程應(yīng)用中起到不同的作用瞳步；
2.1 單例模式
單例模式就是產(chǎn)生一個類的唯一實例對象，它能夠確保您只有一個對象實例能夠?qū)嶋H派上用場腰奋；
單例模式下单起，創(chuàng)建對象方式如下：
var singleton = {
attr:1,
method:function(){
return this.attr
}
}
var ex1 = singleton;
var ex2 = singleton;
ex1 === ex2//true
上述創(chuàng)建單例的方式：
優(yōu)點：使用非常簡捷；
缺點：缺乏封裝劣坊，成員暴露嘀倒，初始化時占用資源；
可以使用閉包方式解決這一問題：
var substance = (function(){
var unique;
function init(){
var type;
return {
setType:function(t){
return type = t;
}
}
}
return {
getInstance:function(){
if(!unique){
unique = init();
}
return unique;
}
}
})();
var Adam = substance.getInstance();
var Eve = substance.getInstance();
Adam === Eve
Adam.setType('Man')//Man
2.2 工廠模式
單例模式只能創(chuàng)作單個實例對象局冰，也就是說如果將該實例對象賦予多個變量時测蘑，會存在對象的引用問題，即修改其中一個變量會影響到另一個變量康二；
有時我們需要創(chuàng)造多個結(jié)構(gòu)相似的對象碳胳，只有部分屬性有所區(qū)別，這時候工廠模式派上用場沫勿；
工廠模式的設(shè)計思想就是能夠像工廠一樣批量生產(chǎn)出相似屬性和方法的對象挨约，使用工廠模式能解決多個相似的問題味混，例如創(chuàng)造多個彈窗（只是標題不同）；
function person(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.greet = function(){
return "hello "+this.name;
};
return obj
}
var Adam = person("Adam",18);
var Eve = person("Eve",20);
上述工廠模式：
優(yōu)點：能批量生產(chǎn)結(jié)構(gòu)類似的對象诫惭；封裝創(chuàng)建對象的細節(jié)翁锡；
缺點：未能解決對象的類型，即由哪個構(gòu)造函數(shù)創(chuàng)建的夕土；
2.3 構(gòu)造函數(shù)模式
構(gòu)造函數(shù)可以創(chuàng)建特定類型的對象馆衔，類似之前的Array、RegExp等原生對象都能創(chuàng)造特定類型的實例對象隘弊；
function Person(name,age){
this.name = name;
this.age = age;
this.greet = function(){
return "hello "+this.name;
}
}
var p1 = new Person('Adam',18);
var p2 = new Person('Eve',20);
使用構(gòu)造函數(shù)模式就能夠解決實例對象由誰創(chuàng)建的問題哈踱；
上述代碼和工廠模式的區(qū)別在于：
1.沒有顯示創(chuàng)建新對象；
2.直接將屬性和方法賦給this對象梨熙；
3.沒有return語句；
4.函數(shù)名開頭大寫以區(qū)別普通函數(shù)刀诬；
5.使用new操作符去創(chuàng)建對象實例咽扇；
new操作符的原理
使用new操作符去調(diào)用函數(shù)和直接調(diào)用函數(shù)不同，其new操作符的運行函數(shù)的過程為：
- 創(chuàng)建一個新對象陕壹；
- 將構(gòu)造函數(shù)的作用域賦給新對象并執(zhí)行構(gòu)造函
內(nèi)的代碼质欲； - 返回新對象；
使用代碼表示如下：
function Person(name,age){
this.name = name;
this.age = age;
this.greet = function(){
return "hello "+this.name;
}
}
function createPerson(name,age){
var o = new Object();
Person.call(o,name,age);
return o;
}
var p1 = createPerson('Adam',18);
var p2 = createPerson('Eve',20);
使用構(gòu)造函數(shù)模式創(chuàng)建對象的優(yōu)缺點在于：
優(yōu)點：能夠識別對象屬于的構(gòu)造函數(shù)糠馆；
缺點：如果存在不同實例對象共享的屬性和方法嘶伟，使用構(gòu)造函數(shù)模式則會浪費內(nèi)存；
【注】
關(guān)于this關(guān)鍵字的更多知識點可以參見【what's this】;
構(gòu)造函數(shù)如果不用new操作符調(diào)用和普通函數(shù)是一樣的又碌；
2.4 原型模式
每個函數(shù)都有一個prototype原型屬性九昧，這個原型屬性可以部署特定類型的實例共享的屬性和方法；
function Person(){}
}
Person.prototype.greet = function(){
return "hello "+this.name;
將原來的greet函數(shù)部署在Person函數(shù)的prototype原型屬性上毕匀，這樣p1和p2可以共享該方法铸鹰，而不像構(gòu)造函數(shù)模式每創(chuàng)建一個實例就增加一個greet方法浪費內(nèi)存；
【注】
關(guān)于原型對象的更多理解詳見下一節(jié)——JavaScript的繼承機制皂岔；
使用原型模式創(chuàng)建對象的優(yōu)缺點在于：
優(yōu)點：對于每個實例的共享屬性和方法能夠較好實現(xiàn)蹋笼；
缺點：單獨采用原型模式將無法區(qū)分不同實例的私有屬性；
2.5 混合模式
混合模式躁垛，就是綜合構(gòu)造函數(shù)模式和原型模式的優(yōu)缺點剖毯，構(gòu)造函數(shù)模式部署實例的私有屬性，原型模式部署實例的公有屬性教馆；
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.greet = function(){
return "hello "+this.name;
}
var p1 = new Person("Adam",18);
var p2 = new Person("Eve",20);
混合模式是目前使用最廣泛逊谋、認同度最高的一種創(chuàng)建自定義類型（類）的設(shè)計模式；
【注】
當然活玲，設(shè)計模式不僅僅上述所提到涣狗，還有更加精深可以參考《設(shè)計模式》一書以及之前小羊?qū)懙囊黄恼?a href="http://www.reibang.com/p/edf6271444d0" target="_blank">《設(shè)計模式梗概》;
3.JavaScript的繼承機制
上一節(jié)我們通過創(chuàng)建對象的不同模式谍婉，隱式引出了原型對象的概念，這一節(jié)中我們將詳細了解一下原型對象镀钓、原型鏈及其實現(xiàn)的繼承機制穗熬；
前面，我們從數(shù)據(jù)特征上看丁溅，知道對象是無序?qū)傩裕ㄦI值對）的集合唤蔗；
現(xiàn)在，我們可以從面向?qū)ο蟮慕嵌瓤纯呱停魏螌ο蠖际歉鼮槌橄蟮膶ο蟮膶嵗斯瘢梢岳斫鉃轭惖母拍睿?br>
從這個角度理解，我們現(xiàn)在可以重新定義一下對象和類的含義：
對象可以說是對現(xiàn)實事物的抽象涯穷，對象封裝了屬性和方法棍掐，屬性值指的是對象的狀態(tài)，方法指的是對象的行為拷况；
類是提供一種模板的‘對象’作煌，它是對象的抽象；
舉個簡單的栗子：
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.greet = function(){
return "hello "+this.name;
}
var p1 = new Person("Adam",18);
var p2 = new Person("Eve",20);
上述代碼表明赚瘦，p1和p2兩個實例是對現(xiàn)實Adam和Eve的抽象粟誓，而“類”Person又是對2個實例的抽象，為創(chuàng)建相似結(jié)構(gòu)的人提供標準的模板起意；
[注]ES6之前JavaScript中沒有類鹰服，在ES6中定義了類；
3.1 原型對象
在上一節(jié)的原型模式中揽咕，我們提到每個函數(shù)都有一個prototype屬性悲酷，這個屬性指向函數(shù)的原型對象，可以部署特定類型的實例共享的屬性和方法心褐；
更為深入理解prototype原型對象舔涎，prototype原型對象不僅可以部署特定類型的實例共享的屬性和方法，而且還是實現(xiàn)JavaScript繼承的關(guān)鍵逗爹；
只要創(chuàng)建一個新函數(shù)就會為該函數(shù)創(chuàng)建一個prototype屬性亡嫌，每個prototype屬性自動獲得一個constructor屬性,該屬性指向prototype屬性所在的函數(shù)指針；
當使用構(gòu)造函數(shù)創(chuàng)建一個實例時掘而，該實例內(nèi)部包含一個內(nèi)部屬性__proto__指向構(gòu)造函數(shù)的原型對象挟冠；
由此，一個簡單的繼承便產(chǎn)生了袍睡；
以下面代碼為例：
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.greet = function(){
return "hello "+this.name;
}
var p1 = new Person("Adam",18);
var p2 = new Person("Eve",20);
構(gòu)造函數(shù)創(chuàng)建之后知染，自動創(chuàng)建一個prototype屬性，prototype原型對象下有一個默認的constructor屬性指向prototype屬性所在的函數(shù)Person中斑胜；
在prototype原型對象上部署greet方法控淡，實例p1的內(nèi)部屬性__proto__指向構(gòu)造函數(shù)Person.prototype嫌吠，由此繼承了構(gòu)造函數(shù)的原型對象上的greet方法；
【注意】
- 實例的
__proto__指向構(gòu)造函數(shù)的prototype原型對象實現(xiàn)繼承掺炭，這種聯(lián)系存在于實例與構(gòu)造函數(shù)的原型對象之間而不是構(gòu)造函數(shù)之間辫诅； - 當js引擎解析對象的屬性時，先會搜索對象本身的屬性涧狮，如果沒有則會去搜索
__proto__指向的原型對象上的屬性炕矮，直到找到為止，如果在對象本身定義的屬性和原型對象上的具有相同屬性名者冤，則在讀取該屬性時肤视，自身屬性會屏蔽原型對象上的屬性；
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.greet = function(){
return "hello "+this.name;
}
var p1 = new Person("Adam",18);
p1.greet()//hello Adam;
p1.greet = function(){
return "hello world"
}
- 修改構(gòu)造函數(shù)的原型對象可以直接使用點操作涉枫，效果是直接在原來的原型對象上增加屬性邢滑，有時需要增加的屬性太多是，點操作就顯得太麻煩拜银，可以采用重置原型對象的方法：
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor:Person,
greet1:function(){},
greet2:function(){},
greet3:function(){}
};
var p1 = new Person("Adam",18);
Person.prototype.constructor.name//"Object"
需要注意的是殊鞭，重置原型對象后，要重新為原型對象的constructor的屬性指回Person構(gòu)造函數(shù)尼桶；
如果不重置constructor的話，那么此時的Person.prototype是由字面量創(chuàng)建的對象锯仪，字面量創(chuàng)建的對象默認的構(gòu)造函數(shù)是Object;
3.2 原型鏈
上面我們只定義一個構(gòu)造函數(shù)泵督，實現(xiàn)一次繼承；如果存在多個構(gòu)造函數(shù)庶喜，它們之間也存在繼承關(guān)系小腊，那么就會形成一條關(guān)于繼承的原型鏈；
function SuperType(name,age){
this.name = name;
this.age = age
}
SuperType.prototype.greet = function(){
return "hello "+this.name
}
function SubType(name,age,height){
SuperType.call(this,name,age);
this.height = height;
}
SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.constructor = SubType;
SubType.prototype.method = function(){return 1;}
var instance = new SubType('teren',18,180)
上面就是一個最為常用的實現(xiàn)多個類間繼承的設(shè)計模式久窟；
使用Object.create(SuperType.prototype)的優(yōu)缺點在于：
優(yōu)點：能夠創(chuàng)建一個新的SuperType.prototype對象賦給SubType.prototype秩冈，修改SubType.prototype這個而不影響原來構(gòu)造函數(shù)SuperType.prototype；
缺點：雖然擁有子類的prototype和父類的prototype值是相同的斥扛，但內(nèi)存不同入问，從而切斷子類和父類之間的類型；
還可以使用SubType.prototype =new SuperType()實現(xiàn)相同效果稀颁，其優(yōu)缺點在于：
優(yōu)點：能夠體現(xiàn)子類和父類的繼承關(guān)系芬失；
缺點：子類具有父類的私有屬性；
所以匾灶，一般在實際實現(xiàn)原型鏈時使用Object.create()方法棱烂，而理解原型鏈時使用new SuperType()方法；
3.3 與原型對象相關(guān)的方法
遍歷對象屬性方法
Object.keys()和Object.getOwnPropertyNames()用于遍歷對象自身而不是繼承的屬性名阶女，返回一個數(shù)組颊糜，其中Object.keys()只返回可枚舉屬性哩治；
in用于檢查一個對象是否具有某個屬性。它不區(qū)分該屬性是對象自身的屬性衬鱼，還是繼承的屬性业筏；
for...in用于遍歷對象的所有可枚舉屬性（不管是自身的還是繼承的）
如果只遍歷自身的屬性，可以使用如下代碼：
for (var key in instance){
if(instance.hasOwnProperty(key)){
console.log(key)
}
}
判斷屬性是否為自身的方法
Object.prototype.hasOwnProperty()返回一個布爾值馁启，用于判斷某個屬性定義在對象自身驾孔，還是定義在原型鏈上;
設(shè)置和獲取實例對象的原型對象的方法
Object.getPropertyOf()返回一個實例對象的原型對象；
Object.setPropertyOf(obj,prototype)可傳兩個參數(shù)惯疙，第1個為現(xiàn)有參數(shù)翠勉，第2個為原型對象；
判斷一個對象是否為另一個對象的原型對象
Object.prototype.isPrototypeOf()用于判斷一個對象是否是另一個對象的原型霉颠；
小結(jié)
通讀本文对碌，我們可以知道：
- 面向?qū)ο缶幊虝r一種思維模式，它把世界的一切看做是對象的集合蒿偎，世界的運作是一個個對象分工合作的結(jié)果朽们；映射到程序設(shè)計中，就是編寫各個具有特定功能的對象（模塊）诉位，并將它們有機整合使程序得以運作骑脱；
- 對象從數(shù)據(jù)特征角度看，是無序鍵值對的集合苍糠，對象的屬性具有兩種特性——數(shù)據(jù)特性和訪問器特性叁丧；
- 創(chuàng)建對象的不同方式可以稱為設(shè)計模式，本文簡單講解了單例模式岳瞭、工廠模式拥娄、構(gòu)造函數(shù)模式、原型模式瞳筏、混合模式等稚瘾；
- 從面向?qū)ο蠼嵌瓤矗瑢ο罂梢哉f是對現(xiàn)實事物的抽象姚炕，類是對對象的抽象摊欠；
- 每個函數(shù)都有一個原型對象prototype，既可以部署特定類型實例的共享屬性和方法钻心，也是JavaScript實現(xiàn)繼承的關(guān)鍵凄硼；
- prototype原型對象有一個constructor屬性，該屬性指向prototype所在的函數(shù)指針捷沸；
- 每當使用構(gòu)造函數(shù)創(chuàng)建一個實例時摊沉，該實例內(nèi)部包含一個內(nèi)部屬性
__proto__指向構(gòu)造函數(shù)的原型對象，由此實現(xiàn)簡單的繼承痒给； - 當A構(gòu)造函數(shù)是B構(gòu)造函數(shù)的實例時说墨，由此就會形成一條原型鏈骏全，即
A構(gòu)造函數(shù)的實例對象C的__proto__指向A構(gòu)造函數(shù)的原型對象prototype，A構(gòu)造函數(shù)prototype的__proto__指向B構(gòu)造函數(shù)的原型對象prototype尼斧，B構(gòu)造函數(shù)prototype的__proto__指向Function構(gòu)造函數(shù)的prototype姜贡，F(xiàn)unction的prototype的__proto__指向Object的prototype； - 與原型對象的相關(guān)方法包括：Object.keys()和Object.getPropertyNames()棺棵、for...in方法楼咳，Object.getPrototypeOf()和Object.setPrototypeOf()方法，Object.prototype.hasOwnProperty()和Object.prototype.isPrototypeOf()方法烛恤；
參考資料
- 《JavaScript高級程序設(shè)計（第3版）》
- 《JavaScript標準參考教程》——阮一峰
