JS-創(chuàng)建對(duì)象

william 發(fā)布于2019-08-23 14:08 / 2152人閱讀

摘要：創(chuàng)建對(duì)象使用或者對(duì)象字面量都可以創(chuàng)建對(duì)象，但是這樣創(chuàng)建的對(duì)象過(guò)于簡(jiǎn)單，不易于對(duì)象的屬性與方法的擴(kuò)展與繼承。下面講的對(duì)象可以與中的做類比。通過(guò)調(diào)用構(gòu)造函數(shù)創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。

創(chuàng)建對(duì)象

使用new Object()或者對(duì)象字面量都可以創(chuàng)建對(duì)象，但是這樣創(chuàng)建的對(duì)象過(guò)于簡(jiǎn)單，不易于對(duì)象的屬性與方法的擴(kuò)展與繼承。
下面講的對(duì)象可以與JavaEE中的bean做類比。

工廠模式

對(duì)，首先可能想到的是使用設(shè)計(jì)模式中的工廠模式

function createPizza(type) {
  var o = new Object();
  o.type = type;
  o.bake = function() {
    alert("Start~");
    alert(this.type);
    alert("End~");
  };
  return o;
}

var cheesePizza = createPizza("cheese");
var veggiePizza = createPizza("veggie");
cheesePizza.bake();

優(yōu)點(diǎn)

工廠模式解決了創(chuàng)建多個(gè)類似對(duì)象的問(wèn)題

缺點(diǎn)

對(duì)象無(wú)法識(shí)別，即創(chuàng)建出來(lái)的對(duì)象無(wú)法通過(guò)instanceof等分析出屬于哪種類型

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

用構(gòu)造函數(shù)可用來(lái)創(chuàng)建特定類型的對(duì)象

// 構(gòu)造函數(shù)首字母遵循OO語(yǔ)言慣例進(jìn)行大寫(xiě)
function Pizza(type) {
  this.type = type;
  this.bake = function() {
    alert("Start~");
    alert(this.type);
    alert("End~");
  };
}

var cheesePizza = new Pizza("cheese");
var veggiePizza = new Pizza("veggie");
cheesePizza.bake();

與工廠模式相比：

沒(méi)有在方法中顯示創(chuàng)造對(duì)象（o）；

直接將屬性與方法賦值給this；

沒(méi)有return語(yǔ)句

在用new的時(shí)候，會(huì)經(jīng)歷一下4步：

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

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

執(zhí)行構(gòu)造函數(shù)代碼（為對(duì)象添加屬性）

返回新對(duì)象

如果不使用new，將構(gòu)造函數(shù)當(dāng)做函數(shù)使用，則this指向Global對(duì)象（在瀏覽器中為window對(duì)象），當(dāng)然，可以使用call方法來(lái)指定作用域，例如

var o = new Object();
Pizza.call(o, "salty");
o.bake();

使用構(gòu)造函數(shù)方法，每個(gè)實(shí)例對(duì)象都有一個(gè)constructor構(gòu)造函數(shù)屬性，該屬性指向Pizza（使用對(duì)象字面量、工廠模式方法創(chuàng)建的對(duì)象該屬性指向Object）

cheesePizza.constructor == Pizza

檢查某個(gè)對(duì)象屬于哪種類型，一般使用instanceof，cheesePizza同時(shí)屬于Pizza與Object（之所以屬于Object，是因?yàn)樗袑?duì)象均繼承于Object）

cheesePizza instanceof Pizza;
cheesePizza instanceof Object;

優(yōu)點(diǎn)

與工廠模式相比，構(gòu)造函數(shù)模式能夠識(shí)別出對(duì)象類型
與下面的原型模式相比，能夠?qū)崿F(xiàn)對(duì)象屬性的互相獨(dú)立，在引用類型屬性上很有用

缺點(diǎn)

每個(gè)實(shí)例對(duì)象的方法都是獨(dú)立的，導(dǎo)致方法不能夠共享

原型模式

每個(gè)函數(shù)（不是實(shí)例對(duì)象）都有一個(gè)prototype屬性，該屬性是一個(gè)指針，指向一個(gè)對(duì)象，對(duì)象的用途是包含所有實(shí)例共享的屬性和方法。prototype通過(guò)調(diào)用構(gòu)造函數(shù)創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。使用原型對(duì)象的好處是可以讓所有實(shí)例對(duì)象共享屬性與方法。

function Pizza() {

}

Pizza.prototype.type = "original"
Pizza.prototype.bake = function() {
  alert("Start~");
  alert(this.type);
  alert("End~");
};

var cheesePizza = new Pizza();
cheesePizza.type = "cheese";
var veggiePizza = new Pizza();
veggiePizza.type = "veggie";

cheesePizza.bake();
veggiePizza.bake();

各個(gè)對(duì)象共享屬性與方法，同時(shí)每個(gè)對(duì)象都可以建立自己的屬性，并屏蔽掉原型對(duì)象的同名屬性，因?yàn)楣蚕韺傩耘c方法，所以以下等式成立

cheesePizza.bake == veggiePizza.bake

對(duì)象字面量重寫(xiě)原型對(duì)象

也可以通過(guò)對(duì)象字面量來(lái)重寫(xiě)整個(gè)原型對(duì)象：

Pizza.prototype = {
  type: "original",
  bake: function() {
    alert("Start~");
    alert(this.type);
    alert("End~");
  }
}

這樣完全重寫(xiě)，原型對(duì)象上的constructor屬性不再指向Pizza函數(shù)（全新的constructor指向Object），不過(guò)不影響通過(guò)instanceof來(lái)識(shí)別對(duì)象類型。如果constructor特別重要的話，可以顯式將它置為適當(dāng)?shù)闹担?/p>

Pizza.prototype = {
  constructor: Pizza,
  type: "original",
  bake: function() {
    alert("Start~");
    alert(this.type);
    alert("End~");
  }
}

不過(guò)這種方式會(huì)將constructor的屬性特征變?yōu)榭擅杜e，而默認(rèn)情況下它是不可枚舉的，如果想不可枚舉，可以使用Object.defineProperty()方法。

原型的動(dòng)態(tài)性

對(duì)原型對(duì)象的修改會(huì)體現(xiàn)在實(shí)例對(duì)象上，即使實(shí)例對(duì)象先被創(chuàng)建。但是通過(guò)對(duì)象字面量重寫(xiě)的原型對(duì)象則沒(méi)有該動(dòng)態(tài)性

優(yōu)點(diǎn)

定義在原型對(duì)象上的屬性，能夠保證在各實(shí)例對(duì)象上的共享

缺點(diǎn)

對(duì)于引用類型的屬性，各實(shí)例的共享會(huì)導(dǎo)致額外的問(wèn)題。

組合使用構(gòu)造函數(shù)模式與原型模式

整合構(gòu)造函數(shù)模式與原型模式，構(gòu)造函數(shù)模式用于定義實(shí)例屬性，原型模式用于定義方法和共享屬性。

動(dòng)態(tài)原型模式 寄生構(gòu)造函數(shù)模式 穩(wěn)妥構(gòu)造函數(shù)模式 各創(chuàng)建模式在Chrome瀏覽器中的表現(xiàn)

可以通過(guò)Chrome瀏覽器觀察使用工廠模式創(chuàng)建的cheesePizza對(duì)象屬性為：

cheesePizza
{type: "cheese", bake: ?}
  bake: ? ()
  type: "cheese"
  __proto__:
    constructor: ? Object()
    hasOwnProperty: ? hasOwnProperty()
    isPrototypeOf: ? isPrototypeOf()
    propertyIsEnumerable: ? propertyIsEnumerable()
    toLocaleString: ? toLocaleString()
    toString: ? toString()
    valueOf: ? valueOf()
    __defineGetter__: ? __defineGetter__()
    __defineSetter__: ? __defineSetter__()
    __lookupGetter__: ? __lookupGetter__()
    __lookupSetter__: ? __lookupSetter__()
    get __proto__: ? __proto__()
    set __proto__: ? __proto__()

使用構(gòu)造函數(shù)模式創(chuàng)建cheesePizza對(duì)象屬性為：

cheesePizza
Pizza {type: "cheese", bake: ?}
  bake: ? ()
  type: "cheese"
  __proto__:
    constructor: ? Pizza(type)
    __proto__:
      constructor: ? Object()
      hasOwnProperty: ? hasOwnProperty()
      isPrototypeOf: ? isPrototypeOf()
      propertyIsEnumerable: ? propertyIsEnumerable()
      toLocaleString: ? toLocaleString()
      toString: ? toString()
      valueOf: ? valueOf()
      __defineGetter__: ? __defineGetter__()
      __defineSetter__: ? __defineSetter__()
      __lookupGetter__: ? __lookupGetter__()
      __lookupSetter__: ? __lookupSetter__()
      get __proto__: ? __proto__()
      set __proto__: ? __proto__()

使用原型模式創(chuàng)建cheesePizza對(duì)象屬性為：

cheesePizza
Pizza {type: "cheese"}
  type: "cheese"
  __proto__:
    bake: ? ()
    type: "original"
    constructor: ? Pizza()
    __proto__:
      constructor: ? Object()
      hasOwnProperty: ? hasOwnProperty()
      isPrototypeOf: ? isPrototypeOf()
      propertyIsEnumerable: ? propertyIsEnumerable()
      toLocaleString: ? toLocaleString()
      toString: ? toString()
      valueOf: ? valueOf()
      __defineGetter__: ? __defineGetter__()
      __defineSetter__: ? __defineSetter__()
      __lookupGetter__: ? __lookupGetter__()
      __lookupSetter__: ? __lookupSetter__()
      get __proto__: ? __proto__()
      set __proto__: ? __proto__()

參考文章

ESLint 需要約束 for-in (guard-for-in)

個(gè)人不定期更新主頁(yè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100145.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

william

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RackNerd：美國(guó)便宜vps，Intel平臺(tái)21.8美元/年起，AMD平臺(tái)VPS14.18美元/

閱讀 2216·2021-10-08 10:15
CSS 深入理解之 border 【筆記】

閱讀 1262·2019-08-30 15:52
如何解決因float帶來(lái)的排版問(wèn)題？

閱讀 584·2019-08-30 12:54
兩列布局之左邊固定寬度，右邊自適應(yīng)（絕對(duì)定位實(shí)現(xiàn)方法）

閱讀 1606·2019-08-29 15:10
-webkit-overflow-scrolling

閱讀 2748·2019-08-29 12:44
快速構(gòu)建一個(gè)使用axios的vue應(yīng)用程序

閱讀 3067·2019-08-29 12:28
可擴(kuò)展標(biāo)記語(yǔ)言XML之一：XML的概念、作用與示例

閱讀 3418·2019-08-27 10:57
vue-cli3 搭建的前端項(xiàng)目基礎(chǔ)模板

閱讀 2286·2019-08-26 12:24

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS-創(chuàng)建對(duì)象

相關(guān)文章

[譯]執(zhí)行上下文、作用域鏈和JS內(nèi)部機(jī)制

javascript對(duì)象詳解：proto和prototype的區(qū)別和聯(lián)系

后端知識(shí)點(diǎn)總結(jié)——NODE.JS基礎(chǔ)

JS 原型模式

JS-對(duì)象

關(guān)于javascript的原型和原型鏈，看我就夠了（一）

發(fā)表評(píng)論

0條評(píng)論

william

男|高級(jí)講師

TA的文章

RackNerd：美國(guó)便宜vps，Intel平臺(tái)21.8美元/年起，AMD平臺(tái)VPS14.18美元/

CSS 深入理解之 border 【筆記】

如何解決因float帶來(lái)的排版問(wèn)題？

兩列布局之左邊固定寬度，右邊自適應(yīng)（絕對(duì)定位實(shí)現(xiàn)方法）

-webkit-overflow-scrolling

快速構(gòu)建一個(gè)使用axios的vue應(yīng)用程序

可擴(kuò)展標(biāo)記語(yǔ)言XML之一：XML的概念、作用與示例

vue-cli3 搭建的前端項(xiàng)目基礎(chǔ)模板

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS-創(chuàng)建對(duì)象

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！