有了前面幾節的學問，這一節我們明白起來就要輕鬆許多。在 javascript 里函數也是對象，瀏覽器的全局上下文也是對象， key – value 的身影在代碼里比較罕見，合理的運用對象多維度、可擴大的特徵可認為開闢中帶來許多興趣。

假如學問存在盲區，則現實開闢中就會就會應為評價不足，模子設想不合理湧現種種題目， 小則打打補丁、模塊API從新設想，做兼容處置懲罰。 大則是癥結數據維度沒法滿足運用場景， 就須要省事辛苦的舉行架構調解或許重構了。

下面我們來梳理一下 javascript 對象的表現體式格局和特性，過於細節的學問就不梳理了。

JavaScript 的設想是一個簡樸的基於對象的範式。一個對象就是一系列屬性的鳩合，一個屬性包括一個屬性名和一個屬性值。一個屬性的值可所以函數，這類狀況下屬性也被稱為
要領。除了瀏覽器內里預定義的那些對象以外，我們也可以定義本身的對象。熟習 javascript 的語法特徵，合理的設想數據模子，建立天真、不含糊的自定義對象可以進步 javascript 的運轉效力。

字面量對象

運用字面量體式格局建立對象佔有了大多數開闢場景，字面量對象示例：

let foo = {
    a: 1,
    b: '1234',
    c: function () {
        console.log(this.a + this.b)
    }
}
let foo1 = {
    a: 666,
    b: 'hi',
    c: function () {
        console.log(`${this.b}, ${this.a}`)
    }
}
foo.c() // '11234'
foo1.c() // 'hi, 666'

對象字面量的特性主如果直觀、簡樸天真，每一個key、value在編碼階段就是肯定的。

運用對象字面量的體式格局來建立對象的瑕玷是，當我們須要建立多個雷同對象時必需為每一個對象在源代碼中編寫變量和要領。當如許的雷同內容的對象許多時就是一場災害。因而我們發明了許多其他建立對象的體式格局，下面進一步討論。

工場情勢

工場情勢建立對象示例：

let createFoo = function (a, b, c) {
    let o = new Object()
    o.a = a
    o.b = b
    o.c = c
    return o
}
let foo = createFoo(1, '1234', function(){
    console.log(this.a + this.b)
})
let foo1 = createFoo(666, 'hi', function(){
    console.log(`${this.b}, ${this.a}`)
})

foo.c() // '11234'
foo1.c() // 'hi, 666'

所謂工場情勢就是對象的建立就像’商品’經由過程工場根據標準化的流程被加工出來。

上面就是一個工場函數的栗子，實行 createFoo 函數時先建立一個對象 o，然後把通報進來的實參添加到 o 上面，末了返回對象 o。如許每次實行 createFoo 函數都邑返回一個新的對象，當我們須要1000個類似對象時 createFoo 就為我們在內部生成了1000個自力的對象 o。經由過程對這個栗子的分析會發明： 工場函數在舉行大批量對象建立時對資本的斲喪比較大，同時由於每次都返回的是一個新對象，我們就沒辦法推斷對象的範例。

工場函數與字面量體式格局建立對象比擬，上風就是不必在編碼階段建立大批量類似組織的對象，而這一系列的建立事變都是在運轉階段建立的。每次建立實例時都要建立實例對應的一切屬性和要領，所以工場函數一樣存在建立N個實例須要建立N個屬性、要領的題目。

工場函數建立實例同時也面對實例範例的題目：

foo instanceof createFoo // false
foo1 instanceof createFoo // false

// 返回的對象是組織函數 Object 的實例
foo instanceof Object // true
foo1 instanceof Object // true

為何實例函數不相稱呢？

在 JavaScript 中 objects 是一種援用範例。兩個自力聲明的對象永久也不會相稱（由於變量 foo 和 foo1 指向的堆地點差別），縱然他們有雷同的屬性，只要在比較一個對象和這個對象的援用時，才會返回true.

let too = {
    a: 1
}
let too1 = {
    a: 1
}
let too2 = too1

too == too1 // false
too === too1 // false

too1 == too2 // true
too1 ===too2 // true

組織函數

組織函數體式格局建立自定義對象，就是應用函數中組織函數、真相、實例對象之間的關聯來封裝私有屬性、公有屬性：

function Foo (a, b, c) {
    this.a = a
    this.b = b
    this.c = c
}
let foo1 = new Foo(1, '1234', function(){
    console.log(this.a + this.b)
})
let foo2 = new Foo(666, 'hi', function(){
    console.log(`${this.b}, ${this.a}`)
})

// foo1、foo2 是 Foo 的實例
foo1 instanceof Foo // true
foo2 instanceof Foo // true

組織函數的完成看着要簡樸許多，也能經由過程實例推斷出範例。

組織函數的實行邏輯：

組織函數初始化階段首先會向上下文棧中壓入一個上下文，接着在變量對象建立的時刻會收集實參，初始化函數內部的變量說明、肯定 this 的指向、肯定作用鏈。將實參的值離別拷貝給變量a、b、c。然後像平常函數一樣進入實行階段，實行函數內部語句.

組織函數就是函數 既然組織函數就是平常函數， 那末為什在函數前面加一個 new 就可以實例化並返回一個對象呢？

我們來建立一個模仿組織函數加深明白，沒錯是建立一個組織函數（思緒來源於收集, 無恥的偷過來了ɖී؀ීϸ）。

// 假定我們建立一個汽車對象範例, car函數
function Car(make, model, year) {
    this.make = make
    this.model = model
    this.year = year
    this.drive = function (name) {
        console.log(`${name} drives the ${this.model} ${this.make}`)
    }  
}

// 將函數以參數情勢傳入
function New(func) {
    // 聲明一个中心對象，該對象為終究返回的實例
    let res = {}
    if (func.prototype !== null) {
        // 將實例的原型指向組織函數的原型
        res.__proto__ = func.prototype
    }
    // ret為組織函數實行的效果，這裏經由過程apply，將組織函數內部的this指向修改成指向res，即為實例對象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1))
    // 當我們在組織函數中明白指定了返回對象時，那末new的實行效果就是該返回對象
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret
    }
    // 假如沒有明白指定返回對象，則默許返回res，這個res就是實例對象
    return res
}
// 經由過程new聲明建立實例，這裏的p1，現實吸收的恰是new中返回的res
let mycar  = New(Car, "Tesla", "Model X", 2018)
mycar.drive('小丸子')
console.log(mycar.make);

// mycar 是 Car 的實例
mycar instanceof Car // true

將 let mycar = new Car(...) 實例化對象的體式格局看做是let mycar = New(Car, "Tesla", "Model X", 2018) 的一種簡樸的語法糖寫法。

代碼 new Car(...) 實行時，會發作以下事變：

1. 一個繼續自 Car.prototype 的新對象被建立。
2. 運用指定的參數挪用組織函數 Car ，並將 this 綁定到新建立的對象。new Car 等同於 new Car()，也就是沒有指定參數列表，Car 不帶任何參數挪用的狀況。
3. 組織函數返回的對象就是 new 表達式的效果。假如組織函數沒有顯式返回一個對象，則運用步驟1建立的對象。（平常狀況下，組織函數不返回值，然則用戶可以挑選主動返回對象，來掩蓋一般的對象建立步驟）

實例範例沒法推斷的題目, 經由過程組織函數的體式格局來建立對象圓滿的處理了。然則組織器函數存在和工場函數一樣的題目：每次建立一個實例對象時都邑在內部新建一个中心對象，實例要領也會建立N次，如許就存在不必要的內層斲喪。

原型與組織函數組合

在上面Car組織函數的栗子中，當建立100個 Car 的實例時內部複製了100次 drive 函數。 雖然每一個 drive 函數的功用一樣，然則由於離別屬於差別的實例就每次都分派自力的內存空間。

雷同的功用函數怎樣忍受得了反覆建立。回想之前我們在原型一節講到的，每一個函數存在prototype 屬性，經由過程該屬性指向本身的原型對象。那我們可以在函數的原型上做文章，將實例大眾的屬性和要領掛載在原型上。實例經由過程__ptoto__屬性指向了組織函數的原型，從而讓組織函數的原型對象在各個實例的原型鏈上，因而我們經由過程組織函數的原型來完成公有屬性和要領的封裝，且只會建立一次。

照樣上面 Car的栗子：

function Car(make, model, year) {
    this.make = make
    this.model = model
    this.year = year
}
Car.prototype.drive = function (name) {
    console.log(`${name} drives the ${this.model} ${this.make}`)
}

let mycar  = new Car( "Tesla", "Model X", 2018)
mycar.drive('小丸子')

上面的栗子也還可以寫成如許子：

function Car(make, model, year) {
    this.make = make
    this.model = model
    this.year = year
}

Car.prototype = {
    constructor: Car,
    drive: function () {
        console.log(`${name} drives the ${this.model} ${this.make}`)
    }
}

let mycar  = new Car( "Tesla", "Model X", 2018)
mycar.drive('小丸子')

兩種寫法是等價的，須要注重的是后一種相當於建立一個新對象並賦值給了組織函數Car的原型，假如不將新原型的constructor重現指向組織函數，則會致使組織函數Car的實例範例推斷失足（instanceof Car 為 false）.

差別的完成要領都有各自的運用場景。同時對象的完成體式格局又與數據維度以及別的一個話題 設想情勢有關。我們運用原型與組織函數組合情勢就可以處理許多題目。

關於 javascript 的種種情勢可以參考：

Javascript設想情勢