【9】JavaScript 面向?qū)ο蟾呒墶獙ο髣?chuàng)建模式

linkin 發(fā)布于2019-08-23 18:21 / 1908人閱讀

摘要：解決了構(gòu)造函數(shù)模式不能共享方法的問題。六寄生構(gòu)造模式流程創(chuàng)建一個(gè)構(gòu)造函數(shù)，在這個(gè)函數(shù)內(nèi)部創(chuàng)建一個(gè)對象，用返回對象。除了使用操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)以外，這個(gè)模式與工程模式其實(shí)是一模一樣的。

JavaScript面向?qū)ο蟾呒墶獙ο髣?chuàng)建模式 一、工廠模式

流程: 定義一個(gè)函數(shù)，函數(shù)返回對象。

適用場景: 需要創(chuàng)建多個(gè)對象，都是Object類型。

優(yōu)點(diǎn)：完成了返回一個(gè)對象的要求。

缺點(diǎn): 對象沒有一個(gè)具體的類型，無法通過constructor識別對象, 都是Object類型。多個(gè)實(shí)例的sayName方法都是實(shí)現(xiàn)一樣的效果，但是卻存儲了很多次。

// 1.工廠模式
function createPerson (name, age, job) { // 返回一個(gè)對象的函數(shù)==》工廠函數(shù)
  // 顯式的創(chuàng)建對象
  var o = new Object()
  o.name = name
  o.age = age
  o.job = job
  o.sayName = function () {
    alert(this.name)
  }
  return o // 返回對象
}
var p1 = createPerson("Tom", 12, "student")
var p2 = createPerson("Mandy", 22, "teacher")

// 或者：
function createPerson (name, age, job) { // 返回一個(gè)對象的函數(shù)==》工廠函數(shù)
  // 顯式的創(chuàng)建對象      
  var o = {
    name:name,
    age:age,
    job:job,
    sayName: function () {
      alert(this.name)
    }
  }
  return o // 返回對象
}
var p1 = createPerson("Tom", 12, "student")
var p2 = createPerson("Mandy", 22, "teacher"

二、.構(gòu)造函數(shù)模式

流程：創(chuàng)建一個(gè)構(gòu)造函數(shù)，沒有顯式地創(chuàng)建對象，沒有return語句，通過new操作符創(chuàng)建對象。

使用場景：需要創(chuàng)建多個(gè)類型確定的對象。

優(yōu)點(diǎn)：可以通過constructor或者instanceof來識別對象實(shí)例的類型。

缺點(diǎn)：多個(gè)實(shí)例的sayName方法都是實(shí)現(xiàn)一樣的效果，但是卻存儲了很多次（兩個(gè)對象實(shí)例的sayName方法是不同的，因?yàn)榇娣诺牡刂凡煌?/p>

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    alert(this.name)
  }
}
var p1 = new Person("Tony", 14)
var p2 = new Person("Bob", 15

三、原型模式

流程：創(chuàng)建一個(gè)構(gòu)造函數(shù)，給這個(gè)函數(shù)的prototype添加屬性和方法。通過new操作符創(chuàng)建對象。

使用場景：起始時(shí)對象內(nèi)部數(shù)據(jù)是確定的。

優(yōu)點(diǎn)：（1）sayName方法是共享的，所有實(shí)例的sayName方法都指向同一個(gè)。（2）可以動態(tài)的添加原型對象的方法和屬性，并直接反映在對象實(shí)例上。

缺點(diǎn)：（1）由于p1和p2的name屬性指向同一塊內(nèi)存區(qū)域，因此改變p1.name會導(dǎo)致p2.name改變。（2）所有的方法都是共享的，沒有辦法創(chuàng)建自己的屬性和方法，也沒有辦法像構(gòu)造函數(shù)哪像傳遞參數(shù)。

function Person () {}
Person.prototype.name = "Mandy"
Person.prototype.age = 16
Person.prototype.sayName = function () {
  alert(this.name)
}
var p1 = new Person()
var p2 = new Person()
p1.sayName() // "Mandy"

四、構(gòu)造函數(shù)+原型組合模式

流程：自定義構(gòu)造函數(shù)，屬性在函數(shù)中初始化，方法添加到原型上。

適用場景：需要創(chuàng)建多個(gè)類型確定的對象。

優(yōu)點(diǎn)：（1）解決了原型模式對于對象引用的問題。（2）解決了原型模式?jīng)]有辦法傳遞參數(shù)的問題。（3）解決了構(gòu)造函數(shù)模式不能共享方法的問題。

function Person (name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
var p1 = new Person("Mandy")
p1.sayName() // Mandy

五、動態(tài)原型模式

流程：創(chuàng)建構(gòu)造函數(shù)，在構(gòu)造函數(shù)內(nèi)部初始化屬性，在構(gòu)造函數(shù)內(nèi)部在原型上添加方法。通過new操作符創(chuàng)建對象。

需要創(chuàng)建多個(gè)類型確定的對象。

優(yōu)點(diǎn)：（1）可以在初次調(diào)用構(gòu)造函數(shù)的時(shí)候就完成原型對象的修改。（2）對原型對象的修改能在所有的實(shí)例中反映。

缺點(diǎn)：紅寶書上說了這個(gè)方案非常完美。

function Person(name, age) {
  // 屬性
  this.name = name
  this.age = age
  // 方法
  // 判斷sayName方法不存在的情況下，在原型上添加sayName方法。
  if(typeof this.sayName != "function") {
    Person.prototype.sayName = function () {
      console.log(this.name)
    }
  }
}
var p1 = new Person("Tom")
p1.sayName() // "Tom

六、寄生構(gòu)造模式

流程：創(chuàng)建一個(gè)構(gòu)造函數(shù)，在這個(gè)函數(shù)內(nèi)部創(chuàng)建一個(gè)對象，用return返回對象。通過new操作符創(chuàng)建。

除了使用new操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)以外，這個(gè)模式與工程模式其實(shí)是一模一樣的。

function Person(name, age) { // 將創(chuàng)建對象的代碼封裝在函數(shù)中。
  // 顯式創(chuàng)建要返回的對象
  var o = new Object()
  o.name = name
  o.age = age
  o.sayName = function () {
    console.log(this.name)
  }
  return o   // 返回對象
}
var p1 = new Person("Mandy",18)

七、穩(wěn)妥構(gòu)造模式

優(yōu)點(diǎn)：安全。除了調(diào)用sayName方法外，沒有其他辦法可以訪問name的值。

function Person (name, age) {
  // 創(chuàng)建要返回的對象
  var o = new Object()
  // 添加方法
  o.sayName = function () {
    console.log(this.name)
  }
  // 返回對象
  return o
}
var p1 = new Person("Mandy",20)
p1.name  // undefined
// 除了調(diào)用sayName方法外，沒有其他辦法可以訪問name的值。
p1.sayName() // "Mandy"