工廠模式

工廠模式一般用于抽象創(chuàng)建特定對象的過程，是按照特定接口創(chuàng)建對象的方式。

function createPerson(name, age) {
    let o = {};
    o.name = name;
    0.age = age;
    o.study = function() {
        console.log(`${this.name} is studying`)
    }
    return o
}
const p1 = createPerson('張三', 18)
const p2 = createPerson('李四', 20)
p1.study() // 張三 is studying

值得一提的是，如果在 createPerson 函數(shù)中，o.study 改為箭頭函數(shù)，那么打印的 this 會發(fā)生改變，這是因為箭頭函數(shù)發(fā)生了 this 指向的問題。

工廠模式的優(yōu)點： 在 createPerson 中，可以用不同的參數(shù)多次調用工廠函數(shù)，每次都會返回包含特定參數(shù)和一個方法的對象。可以解決創(chuàng)建多個類似對象的問題。

工廠模式的缺點：

• 1. 沒有解決對象標識問題。
• 2. 每次創(chuàng)建對象，都會創(chuàng)建一個公共的方法，而方法也是對象，所以造成內存浪費。

構造函數(shù)模式

在 JS 中， 構造函數(shù)是用于創(chuàng)建特定類型對象的。像 Object、Array 這樣的原生構造對象，運行時，可以直接在執(zhí)行環(huán)境中運行。當然也可以自定義構造函數(shù)，以函數(shù)的形式為自己的對象類型定義屬性和方法。

function Student(name, age) {
    this.name = name;
    this.age = age;
    this.study = function() {
        console.log(`${this.name} is studying`)
    }
}
const p1 = new Student('張三', 18)
const p2 = new Student('李四', 20)

通過上面的代碼，可以實現(xiàn)和工廠模式一樣的效果。但是值得注意的是： 如果這里的 study 函數(shù)變?yōu)榧^函數(shù)， this 的指向是不會發(fā)生變化的。

如同上面的代碼，如果調用構造函數(shù)，就必須使用 new 關鍵字，在這個過程中，構造函數(shù)會做四件事情：

• 在內存中創(chuàng)造一個新的對象
• 將這個新的對象的隱式原型 __proto__ 賦值為該構造函數(shù)的顯示原型 prototype
• 構造函數(shù)的內部的 this 被賦值為這個新的對象（給新對象添加新的屬性）
• 執(zhí)行構造函數(shù)中的代碼，并且判斷有無對象返回值，如果存在，則返回這個返回值，否則返回這個新的對象
• 構造函數(shù)的優(yōu)缺點： 首先，構造函數(shù)解決了對象的標識問題，但是如果構造函數(shù)中存在著函數(shù)，那么每次創(chuàng)建一個實例，就相當于函數(shù)也被重新創(chuàng)造了一遍，因為在JS中函數(shù)也是相當于對象，造成了對空間的浪費。

關于 this

在標準函數(shù)中， this 引用的是把函數(shù)當成方法調用的上下文對象，這個時候常稱其為 this。

我們在上文說過，工廠模式和構造函數(shù)模式，其內部如果出現(xiàn)箭頭函數(shù)，那么 this 的指向會出現(xiàn)不同，這是因為，箭頭函數(shù)中不存在 this , 箭頭函數(shù)中的 this, 會保留定義該函數(shù)的上下文，this 到底引用哪個對象必須到函數(shù)調用時，才會確定, 在工廠模式時， 雖然通過p1.study()，進行調用，但是由于箭頭函數(shù)內部沒有 this，所以向上查找，找到function createPerson 函數(shù), 綁定 window， 而在構造函數(shù)模式中this 賦值給了這個新的對象，相當于箭頭函數(shù)的this， 就是這個新的對象，也就是之后的實例。

可能，通過上面的描述，很多同學仍然對下面箭頭函數(shù)中的this，會保留定義該函數(shù)的上下文不太理解，我列舉一個例子。

// 工廠模式
function createPerson(name, age) {
    let o = {};
    o.name = name;
    o.age = age;
    o.study = () => {
        console.log(`${this.name} is studying`)
    }
    return o
}

const obj = {
    name: '張三'
}

const p1 = createPerson.call(obj, '李四', 20) // createPerson 綁定 obj， 那么箭頭函數(shù)也會綁定 obj
p1.study() // 所以這里的輸出是 張三 is studying，而不是 undefined

原型模式

每個函數(shù)都會創(chuàng)建一個 prototype 屬性，這個屬性是一個對象，包含應該由特定引用類型的實例共享的屬性和方法。實際上，這個對象就是通過調用構造函數(shù)創(chuàng)建的對象的原型。使用原型對象的好處是，在它上面定義的屬性和方法可以被對象實例共享。原來在構造函數(shù)中直接賦值給對象實例的值，可以直接賦值給他們的原型。

function Student() {}
Student.prototype.name = '張三';
Student.prototype.age = 20;
Student.prototype.friends = ['ls', 'ww'];
Student.prototype.study = function() {
    console.log(`${this.name} is studying`)
}

const p1 = new Student()
const p2 = new Student()

通過上面創(chuàng)建的p1， p2,共用了Student原型上的屬性，相當于創(chuàng)造了兩個擁有相同屬性的不同對象。同理，如果上面的 study 改為了箭頭函數(shù)，大家應該也能知道 this 綁定的是誰了吧。（Tip： new 和 顯示綁定不可以同時使用）

原型模式的優(yōu)缺點 ： 首先原型模式解決了上兩種模式造成的空間浪費問題，但是，其屬性都是共享的，所以一般來說，原型模式不會單獨去使用。

最新評論