【9】JavaScript 面向對象高級——對象創建模式

linkin 發布于2019-08-23 18:21 / 1911人閱讀

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

JavaScript面向對象高級——對象創建模式 一、工廠模式

流程: 定義一個函數，函數返回對象。

適用場景: 需要創建多個對象，都是Object類型。

優點：完成了返回一個對象的要求。

缺點: 對象沒有一個具體的類型，無法通過constructor識別對象, 都是Object類型。多個實例的sayName方法都是實現一樣的效果，但是卻存儲了很多次。

// 1.工廠模式
function createPerson (name, age, job) { // 返回一個對象的函數==》工廠函數
  // 顯式的創建對象
  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) { // 返回一個對象的函數==》工廠函數
  // 顯式的創建對象      
  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"

二、.構造函數模式

流程：創建一個構造函數，沒有顯式地創建對象，沒有return語句，通過new操作符創建對象。

使用場景：需要創建多個類型確定的對象。

優點：可以通過constructor或者instanceof來識別對象實例的類型。

缺點：多個實例的sayName方法都是實現一樣的效果，但是卻存儲了很多次（兩個對象實例的sayName方法是不同的，因為存放的地址不同）。

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

三、原型模式

流程：創建一個構造函數，給這個函數的prototype添加屬性和方法。通過new操作符創建對象。

使用場景：起始時對象內部數據是確定的。

優點：（1）sayName方法是共享的，所有實例的sayName方法都指向同一個。（2）可以動態的添加原型對象的方法和屬性，并直接反映在對象實例上。

缺點：（1）由于p1和p2的name屬性指向同一塊內存區域，因此改變p1.name會導致p2.name改變。（2）所有的方法都是共享的，沒有辦法創建自己的屬性和方法，也沒有辦法像構造函數哪像傳遞參數。

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"

四、構造函數+原型組合模式

流程：自定義構造函數，屬性在函數中初始化，方法添加到原型上。

適用場景：需要創建多個類型確定的對象。

優點：（1）解決了原型模式對于對象引用的問題。（2）解決了原型模式沒有辦法傳遞參數的問題。（3）解決了構造函數模式不能共享方法的問題。

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

五、動態原型模式

流程：創建構造函數，在構造函數內部初始化屬性，在構造函數內部在原型上添加方法。通過new操作符創建對象。

需要創建多個類型確定的對象。

優點：（1）可以在初次調用構造函數的時候就完成原型對象的修改。（2）對原型對象的修改能在所有的實例中反映。

缺點：紅寶書上說了這個方案非常完美。

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

六、寄生構造模式

流程：創建一個構造函數，在這個函數內部創建一個對象，用return返回對象。通過new操作符創建。

除了使用new操作符并把使用的包裝函數叫做構造函數以外，這個模式與工程模式其實是一模一樣的。

function Person(name, age) { // 將創建對象的代碼封裝在函數中。
  // 顯式創建要返回的對象
  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)

七、穩妥構造模式

優點：安全。除了調用sayName方法外，沒有其他辦法可以訪問name的值。

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

GPU云服務器云服務器面向對象設計模式 javascript 面向對象 javascript面向對象 javascript面向對象編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105095.html

【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
JavaScript構造器理解

摘要：類類的概念應該是面向對象語言的一個特色，但是并不像，等高級語言那樣擁有正式的類，而是多數通過構造器以及原型方式來仿造實現。因此，出現了構造函數方式，它的關鍵在于構造器概念的引入。于是，這就產生了構造函數原型法的類構造方法。類 Class 類的概念應該是面向對象語言的一個特色，但是JavaScript并不像Java，C++等高級語言那樣擁有正式的類，而是多數通過構造器以及原型方式...

PiscesYE 2019-08-21 10:30 評論0 收藏0
JavaScript面向對象編程——RegExp類型

摘要：由于某些字符類非常常用，的正則表達式中，使用特殊轉義字符表示他們。多行搜索代碼示例對象創建對象可以通過引用類型創建正則表達式對象參數參數被稱為模式，可以使任何簡單或復雜的正則表達式，包含字符類限定符分組向前查找以及反向引用等。概述正則表達式是什么正則表達式（RegularExpression）：由一些普通字符和特殊字符組成的，用以描述一種特定的字符規則的表達式。正則表達式常用在一...

Magicer 2019-08-26 12:17 評論0 收藏0
2017年最好的javascript 書籍

摘要：請記住，這些書中的一些可能不是最新的，但概念和基礎仍應適用。是最好的老師之一。的秘密由部分組成。在你完成這些書后，查看書籍和最好的本土書籍。我看過三本，第1本，第二本，第四本。第一本買的的實體書，其他兩本看的是電子書。第一本是大名鼎鼎老道寫的，書很薄，但是非常經典。javascirpt忍者秘籍是jquery的作者寫的，也是非常經典。you dont kown js系列也是非常好。看了...

mingzhong 2019-08-20 15:05 評論0 收藏0