摘要：不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息。其次，按照一切事物皆對(duì)象的這餓極本的面向?qū)ο蟮姆▌t來(lái)說(shuō)，類(lèi)本身并不是一個(gè)對(duì)象，然而原型方式的構(gòu)造函數(shù)和原型本身也是個(gè)對(duì)象。第二個(gè)問(wèn)題就是在創(chuàng)建子類(lèi)型的實(shí)例時(shí)，不能向超類(lèi)型的構(gòu)造函數(shù)中傳遞參數(shù)。

對(duì)象(Object)應(yīng)該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設(shè)計(jì)中各出沒(méi)。寫(xiě)這篇文章，主要參考與JavaScript紅寶書(shū)（JavaScript高級(jí)程序設(shè)計(jì) 第六章章節(jié)）以及各大博主博客。
原文地址:https://github.com/Nealyang/YOU-SHOULD-KNOW-JS

畢竟是面向?qū)ο缶幊?，我們?cè)谟懻撊绾蚊嫦驅(qū)ο笾跋扔懻撚懻搶?duì)象具有哪些屬性和特性。

簡(jiǎn)單的說(shuō)，對(duì)象擁有四個(gè)屬性:

Configurable :是否可以通過(guò)delete刪除，能否修改屬性的特性。直白點(diǎn)：是否可配置

Enumerable :枚舉性，表示是否可以通過(guò)for-in循環(huán)返回

Writable :可寫(xiě)性：是否可以修改屬性的值

Value :包含屬性的值，也就是對(duì)應(yīng)的可讀性。

以上四個(gè)對(duì)象的屬性的屬性類(lèi)型默認(rèn)值分別為：true,true,true,undefined。

如果要修改屬性默認(rèn)的特性，必須通過(guò)Object.defineProperty()方法。大致如下：

var animal = {};
Object.defineProperty(animal,"name",{
    writable:false,
    value: "dog";
});
console.log(animal.name);//dog
animal.name = "cat";
console.log(animal.name);//dog

從上面的實(shí)例大家也能看出，在調(diào)用Object.defineProperty()方法后，如果不指定 configurable、enumerable、writable 特性的值時(shí)，默認(rèn)為FALSE。

訪問(wèn)器屬性不包含數(shù)據(jù)值，但是包含getter和setter函數(shù)。在讀取訪問(wèn)器屬性時(shí)，會(huì)調(diào)用getter函數(shù)，這個(gè)函數(shù)負(fù)責(zé)返回有效值。在寫(xiě)入訪問(wèn)器屬性時(shí)，回到用setter函數(shù)并傳入新值。

Configurable:表示是否可以通過(guò)delete刪除。默認(rèn)為T(mén)RUE

Enumerable:同上面介紹的Enumerable一樣，默認(rèn)為true

Get:讀取數(shù)據(jù)時(shí)候調(diào)用的方法。默認(rèn)為undefined

Set:在寫(xiě)入屬性值得時(shí)候默認(rèn)調(diào)用的方法。默認(rèn)為undefined

這里不做過(guò)多解釋?zhuān)苯涌蠢影桑▉?lái)自js紅寶書(shū)）

var book = {
    _year:2012,
    edition:1
};
Object.defineProperty(book, "year",{
    get:function(){
        return this._year
    },
    set:function(value){
        if(value>2012){
            this._year = value,
            this.edition++
        }
    }
});

book.year = 2013;
console.log(book.edition);//2

其實(shí)對(duì)于多個(gè)屬性的定義，我們可以使用Object.defineProperties方法。然后對(duì)于讀取屬性的特性我們可以使用Object.getOwnPropertyDescriptor()方法。大家自行查看哈。

創(chuàng)建對(duì)象，我們不是直接可以通過(guò)Object的構(gòu)造函數(shù)或者對(duì)象字面量的方法來(lái)實(shí)現(xiàn)對(duì)象的創(chuàng)建嘛？當(dāng)然，這些方法是可以的，但是有一個(gè)明顯的缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對(duì)象，產(chǎn)生大量重復(fù)的代碼。所以這里，我們使用如下的一些騷操作

一種很基礎(chǔ)的設(shè)計(jì)模式，簡(jiǎn)而言之就是用函數(shù)來(lái)封裝以特定接口創(chuàng)建對(duì)象的細(xì)節(jié)。

function createAnimal(name,type){
    var o = new Object();
    o.name = name;
    o.type = type;
    o.sayName = function(){
        alert(this.name)
    }
    return o;
}
var cat = createAnimal("小貓","cat");
var dog = createAnimal("小?","dog");

優(yōu)點(diǎn)：可以無(wú)數(shù)次的調(diào)用這個(gè)函數(shù)，來(lái)創(chuàng)建相似對(duì)象。
缺點(diǎn)：不能解決對(duì)象識(shí)別的問(wèn)題。也就是說(shuō)，我不知道你是誰(shuí)家的b孩子

ECMAScript中的構(gòu)造函數(shù)可以用來(lái)創(chuàng)建特定類(lèi)型的對(duì)象。在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中（這句話后面講解this的時(shí)候還是會(huì)說(shuō)到）。

function Animal(name,type){
    this.name = name;
    this.type = type;
    this.say = function(){
        alert(this.name);
    }
}

var cat = new Animal("小貓","cat");
var dog = new Animal("小?","dog");

注意上面我們沒(méi)有顯示的return過(guò)一個(gè)對(duì)象出來(lái)，為什么？因?yàn)閠his（后面會(huì)講this的）。

關(guān)于構(gòu)造函數(shù)慣例首字母大寫(xiě)就不啰嗦了。強(qiáng)調(diào)構(gòu)造函數(shù)一定要使用關(guān)鍵字new來(lái)調(diào)用。為什么使用new呢？因?yàn)槟闶褂昧薾ew，他會(huì)

創(chuàng)建一個(gè)新的對(duì)象

將構(gòu)造函數(shù)的作用域賦值給新對(duì)象（this執(zhí)行新的對(duì)象）

執(zhí)行構(gòu)造函數(shù)的代碼

返回新的對(duì)象

那么解決了工廠模式的詬病了么？當(dāng)然~

在實(shí)例對(duì)象中，都有一個(gè)constructor屬性。

cat.constructor == Animal //true
dog.constructor == Animal //true
cat instanceof Animal //true
dog instanceof Animal //true

構(gòu)造函數(shù)模式的優(yōu)點(diǎn)如上所說(shuō)，但是缺點(diǎn)還是有的，比如說(shuō)

cat.sayName == dog.sayName //false

也就是說(shuō)，他創(chuàng)建了兩個(gè)功能一樣的函數(shù)，這樣是很沒(méi)有必要的，當(dāng)然，我們可以把sayName放到構(gòu)造函數(shù)外面，然后通過(guò)this.sayName=sayName來(lái)操作，但是這樣的話，又會(huì)導(dǎo)致全局變量的污染。腫么辦？？？

我們?cè)趧?chuàng)建每一個(gè)函數(shù)的時(shí)候都有一個(gè)prototype(原型)屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象。而這個(gè)對(duì)象的用途就是包含由特定類(lèi)型的所有實(shí)例共享的屬性和方法。

function Animal() {}
Animal.prototype.name = "毛毛";
Animal.prototype.type = "dog";
Animal.prototype.sayName = function() {
  alert(this.name);
}
var cat = new Animal();
var dog = new Animal();
alert(cat.sayName == dog.sayName)//true

原型模式的好處就是可以讓所有的對(duì)象實(shí)例共享他的屬性和方法。不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息。

function Person() {}
Person.prototype.name = "Nealyang";
Person.prototype.age = 24;
Person.prototype.sayName = function(){
  alert(this.name);
}
var neal = new Person();
console.log(neal.name)//"Nealyang" -> 來(lái)自原型
neal.name = "Neal";
console.log(neal.name)// Neal -> 來(lái)自實(shí)例

delete neal.name;
console.log(neal.name)//"Nealyang" -> 來(lái)自原型

上面的例子說(shuō)明兩點(diǎn)

原型中的對(duì)象屬性可以被實(shí)例所覆蓋重寫(xiě)

通過(guò)delete可以刪除實(shí)例中的屬性，但是刪除不了對(duì)象上的

我們可以通過(guò)hasOwnProperty()方法來(lái)確定一個(gè)屬性是在原型上還是在實(shí)例上。person1.hasOwnProperty("name"),如果name為實(shí)例屬性，則返回true。

我們也可以通過(guò) "name" in person1 來(lái)確定，person1上是否有name這個(gè)屬性。

上面大家可能已將發(fā)現(xiàn)，這種原型模式的寫(xiě)法非常的繁瑣，有了大量的XXX.prototype. 這里有一種簡(jiǎn)寫(xiě)的形式。
參照具體說(shuō)明參照阮神的博客 面向?qū)ο蟮诙?/p>

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

上面代碼特意添加了一個(gè)constructor屬性，因?yàn)槊縿?chuàng)建一個(gè)函數(shù)，就會(huì)自動(dòng)創(chuàng)建他的prototype對(duì)象，這個(gè)對(duì)象會(huì)自動(dòng)獲取contractor屬性。而我們這中寫(xiě)法，本質(zhì)上重寫(xiě)了默認(rèn)的prototype對(duì)象，因此，constructor屬性也就變成新的對(duì)象的constructor屬性了（指向Object構(gòu)造函數(shù)），所以這里的簡(jiǎn)寫(xiě)方式，一定要加上constructor。

下面我們?cè)僬勔徽勗湍Ｊ降膬?yōu)缺點(diǎn)。

優(yōu)點(diǎn)，正如上面我們說(shuō)到的，可以省略為構(gòu)造函數(shù)傳遞出實(shí)話參數(shù)這個(gè)環(huán)節(jié)，并且很多實(shí)例可以共享屬性和方法。正是因?yàn)樵椭兴械膶傩允潜凰械膶?shí)例所共享的，這個(gè)特性在方法中非常實(shí)用，但是對(duì)于包含引用類(lèi)型的屬性來(lái)說(shuō)問(wèn)題就比較突出了。

function Person(){};

Person.prototype = {
    constructor:Person,
    name:"neal",
    friends:["xiaohong","xiaoming"],
    sayName:function(){
        alert(this.name);
    }
}

var person1 = new Person();
var person2 = new Person();

person1.friends.push("xiaohua");

alert(person1.friends);//"xiaohong","xiaoming","xiaohua"
alert(person2.friends);//"xiaohong","xiaoming","xiaohua"
alert(person1.friends == person2.friends)//true

由于friends數(shù)組存在于Person.prototype上，并不是person1上面，所以當(dāng)我們修改的時(shí)候，其實(shí)修改的是所有實(shí)例所共享的那個(gè)值。

這是創(chuàng)建自定義類(lèi)型最常見(jiàn)的一種方式。就是組合使用構(gòu)造函數(shù)和原型模式.構(gòu)造函數(shù)模式用于定義實(shí)力屬性，原型模式用于定義方法和共享的屬性。

function Person(name,age){
    this.name = name,
    this.age = age
}

Person.prototype = {
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}

var person1 = new Person("Neal",24);
var person2 = new Person("Yang",23);
...

上面的例子中，實(shí)例所有的屬性都是在構(gòu)造函數(shù)中定義，而實(shí)例所有共享的屬性和方法都是在原型中定義。這種構(gòu)造函數(shù)和原型模式混合的模式，是目前ECMAScript中使用最為廣泛的一種方法。

當(dāng)然，有些人會(huì)覺(jué)得獨(dú)立的構(gòu)造函數(shù)和原型非常的難受，所以也有推出所謂的動(dòng)態(tài)原型構(gòu)造模式的這么一說(shuō)。

function Person(name,age){
    this.name = name,
    this.age = age,
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            console.log(this.name)
        }
    }
}
...

注意上面的代碼，之后在sayName不存在的時(shí)候，才會(huì)在原型上給他添加相應(yīng)的方法。因?yàn)閷?duì)原型的修改，能夠立即在所有的實(shí)例中得到反應(yīng)。所以這中做法確實(shí)也是非常的完美。

關(guān)于javaScript高程中說(shuō)到的別的寄生構(gòu)造函數(shù)模式和穩(wěn)妥構(gòu)造函數(shù)模式大家可以自行查看哈～這里就不做過(guò)多介紹了。

說(shuō)到面向?qū)ο?，?dāng)然得說(shuō)到繼承。說(shuō)到繼承當(dāng)然得說(shuō)到原型。說(shuō)到原型，這里我們摘自網(wǎng)上一篇博客里的段落

為了說(shuō)明javascript是一門(mén)面向?qū)ο蟮恼Z(yǔ)言，首先有必要從面相對(duì)象的概念入手1、一切事物皆對(duì)象。2、對(duì)象具有封裝和繼承特性。3、對(duì)象與對(duì)象之間使用消息通信，各自存在信息隱秘 。

javascript語(yǔ)言是通過(guò)一種叫做原型(prototype) 的方式來(lái)實(shí)現(xiàn)面向?qū)ο缶幊痰?。?dāng)然，還有比如java就是基于類(lèi)來(lái)實(shí)現(xiàn)面向?qū)ο缶幊痰摹?/p> 基于類(lèi)的面向?qū)ο蠛突谠偷拿嫦驅(qū)ο蠓绞奖葍r(jià)

對(duì)于基于類(lèi)的面向?qū)ο蟮姆绞街?，?duì)象依靠class類(lèi)來(lái)產(chǎn)生。而在基于原型的面向?qū)ο蠓绞街校瑢?duì)象則是依靠構(gòu)造器(constructor)利用原型(prototype)構(gòu)造出來(lái)的。舉個(gè)客觀世界的例子來(lái)說(shuō)，例如工廠造一輛汽車(chē)一方面，工人必須參照一張工程圖紙，設(shè)計(jì)規(guī)定這輛車(chē)如何制造，這里的工程圖紙就好比語(yǔ)言中的類(lèi)class。而車(chē)就是按照這個(gè)類(lèi)制造出來(lái)的。另一方面，工人和機(jī)器相當(dāng)于contractor，利用各種零部件(prototype)將汽車(chē)造出來(lái)。

當(dāng)然，對(duì)于上面的例子兩種思維各種說(shuō)法。當(dāng)然，筆者更加傾向于基于原型的面向?qū)ο缶幊?，畢竟我是前端出生（咳咳，真相了），正?dāng)理由如下：

首先，客觀世界中的對(duì)象的產(chǎn)生都是其他實(shí)物對(duì)象構(gòu)造的世界，而抽象的圖紙是不能產(chǎn)生出汽車(chē)的。也就是說(shuō)，類(lèi)，是一個(gè)抽象概念的而非實(shí)體，而對(duì)象的產(chǎn)生是一個(gè)實(shí)體的產(chǎn)生。其次，按照一切事物皆對(duì)象的這餓極本的面向?qū)ο蟮姆▌t來(lái)說(shuō)，類(lèi)本身并不是一個(gè)對(duì)象，然而原型方式的構(gòu)造函數(shù)和原型本身也是個(gè)對(duì)象。再次，在類(lèi)的面向?qū)ο笳Z(yǔ)言中，對(duì)象的狀態(tài)又對(duì)象的實(shí)例所持有，對(duì)象的行為方法則由申明該對(duì)象的類(lèi)所持有，并且只有對(duì)象的構(gòu)造和方法能夠被繼承。而在原型的面向?qū)ο笳Z(yǔ)言中，對(duì)象的行為、狀態(tài)都屬于對(duì)象本身，并且能夠一起被繼承。

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

實(shí)現(xiàn)原型鏈有一種基本模式：

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType (){
    this.subproperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
    return this.subproperty;
}

var instance = new SubType();

alert(instance.getSuperValue());

在上面的代碼中，我們沒(méi)有使用SubType默認(rèn)提供的原型，而是給它換了一個(gè)新的原型，這個(gè)新原型就是SuperType的實(shí)例。于是，新原型不僅具有所謂一個(gè)SuperType的實(shí)例所擁有的全部屬性和方法，而且其內(nèi)部還有一個(gè)指針，指向SuperType的原型。最終結(jié)果是這樣的：instance指向subtype的原型，subtype的原型又指向SuperType的原型。

通過(guò)實(shí)現(xiàn)原型鏈，本質(zhì)上是擴(kuò)展了原型搜索機(jī)制。

雖然如上，我們已經(jīng)實(shí)現(xiàn)了javascript中的繼承。但是依舊存在一些問(wèn)題：最主要的問(wèn)題來(lái)自包含引用類(lèi)型的原型。第二個(gè)問(wèn)題就是在創(chuàng)建子類(lèi)型的實(shí)例時(shí)，不能向超類(lèi)型的構(gòu)造函數(shù)中傳遞參數(shù)。這兩個(gè)問(wèn)題上面也都有說(shuō)到，這里就不做過(guò)多介紹，直接看解決辦法！

在解決原型中包含引用類(lèi)型的數(shù)據(jù)時(shí)，我們可以在子類(lèi)型構(gòu)造函數(shù)內(nèi)部調(diào)用超類(lèi)型的構(gòu)造函數(shù)。直接看代碼：

function SuperType(name){
    this.colors = ["red","yellow"];
    this.name = name;
}

function SubType(name){
    //繼承了Super
    SuperType.call(this,name)
}

var instance1 = new SubType("Neal");
alert(instance1.name)
instance1.colors.push("black");
alert(instance1.colors);//"red","yellow","black"

var instance2 = new SubType("yang");
alert(instance2.colors);//"red","yellow"

畢竟函數(shù)只不過(guò)是在特定環(huán)境中執(zhí)行代碼的對(duì)象，因此可以通過(guò)call活著apply方法在新創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)。而且如上代碼也解決了子類(lèi)構(gòu)造函數(shù)中向超類(lèi)構(gòu)造函數(shù)傳遞參數(shù)的問(wèn)題

但是，這樣問(wèn)題就來(lái)了，類(lèi)似我們之前討論創(chuàng)建的對(duì)象那種構(gòu)造函數(shù)的問(wèn)題：如果都是使用構(gòu)造函數(shù)，那么，也就避免不了方法都在構(gòu)造函數(shù)中定義，然后就會(huì)產(chǎn)生大量重復(fù)的代碼了。

因?yàn)榭紤]到上述的缺點(diǎn)，所以這里又使用了組合繼承的方式，歷史總是驚人的相似。直接看代碼：

function SuperType(name){
    this.name = name;
    this.colors = ["red","yellow"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
}

function SubType(name,age){
    //繼承屬性
    SuperType.call(this,name);

    this.age = age;
}

//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
}

var instance1 = new SubType("Nealyang",24);
instance1.colors.push("white");
instance1.sayName();//Nealyang
instance1.sayAge();// 24

var instance2 = new SubType("Neal",21);
alert(instance2.colors);//"red","yellow"
instance2.sayName();//Neal
instance2.sayAge();//21

在上面的例子中，SuperType構(gòu)造函數(shù)定義了兩個(gè)屬性，name和colors，SuperType的原型中定義了一個(gè)方法sayName，subtype的構(gòu)造函數(shù)中調(diào)用SuperType構(gòu)造函數(shù)并且傳入name，然后將SuperType的實(shí)例賦值給subtype的原型。然后又在新的原型中定義了sayAge的方法。這樣一來(lái)，就可以讓兩個(gè)不同的SubType實(shí)例既分別擁有自己的屬性，包括colors，又可以使用相同的方法了。

組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，融合了他們的優(yōu)點(diǎn)。成為javascript中最為常見(jiàn)的繼承模式。而且instanceof和isPrototypeOf方法也能用于識(shí)別組合模式創(chuàng)建的對(duì)象。

繼承模式是有很多，上面只是說(shuō)到我們經(jīng)常使用到的繼承模式。包括還有原型式繼承、寄生式繼承、寄生組合式繼承等，其實(shí)，只要理解了原型、原型鏈、構(gòu)造函數(shù)等對(duì)象的基本概念，理解起來(lái)這中模式都是非常容易的。后續(xù)如果有時(shí)間，再給大家總結(jié)吧～

掃碼關(guān)注我的個(gè)人微信公眾號(hào)，分享更多原創(chuàng)文章。點(diǎn)擊交流學(xué)習(xí)加我微信、qq群。一起學(xué)習(xí)，一起進(jìn)步

歡迎兄弟們加入：

Node.js技術(shù)交流群：209530601

React技術(shù)棧：398240621

前端技術(shù)雜談：604953717 (新建)