欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

深入理解JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)

寫(xiě)在前面

成都創(chuàng)新互聯(lián)是少有的網(wǎng)站制作、成都網(wǎng)站制作、營(yíng)銷(xiāo)型企業(yè)網(wǎng)站、小程序開(kāi)發(fā)、手機(jī)APP,開(kāi)發(fā)、制作、設(shè)計(jì)、買(mǎi)鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,自2013年創(chuàng)立以來(lái),堅(jiān)持透明化,價(jià)格低,無(wú)套路經(jīng)營(yíng)理念。讓網(wǎng)頁(yè)驚喜每一位訪客多年來(lái)深受用戶好評(píng)

這篇文章講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。

但是注意：

這篇文章更像是筆記，因?yàn)椤禞avaScript高級(jí)程序設(shè)計(jì)》寫(xiě)得真是太好了！

1. 工廠模式

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;
}

var person1 = createPerson('kevin');

缺點(diǎn)：對(duì)象無(wú)法識(shí)別，因?yàn)樗械膶?shí)例都指向一個(gè)原型

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

function Person(name) {
  this.name = name;
  this.getName = function () {
    console.log(this.name);
  };
}

var person1 = new Person('kevin');

優(yōu)點(diǎn)：實(shí)例可以識(shí)別為一個(gè)特定的類型

缺點(diǎn)：每次創(chuàng)建實(shí)例時(shí)，每個(gè)方法都要被創(chuàng)建一次

2.1 構(gòu)造函數(shù)模式優(yōu)化

function Person(name) {
  this.name = name;
  this.getName = getName;
}

function getName() {
  console.log(this.name);
}

var person1 = new Person('kevin');

優(yōu)點(diǎn)：解決了每個(gè)方法都要被重新創(chuàng)建的問(wèn)題

缺點(diǎn)：這叫啥封裝……

3. 原型模式

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
  console.log(this.name);
};

var person1 = new Person();

優(yōu)點(diǎn)：方法不會(huì)重新創(chuàng)建

缺點(diǎn)：1. 所有的屬性和方法都共享 2. 不能初始化參數(shù)

3.1 原型模式優(yōu)化

function Person(name) {

}

Person.prototype = {
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

優(yōu)點(diǎn)：封裝性好了一點(diǎn)

缺點(diǎn)：重寫(xiě)了原型，丟失了constructor屬性

3.2 原型模式優(yōu)化

function Person(name) {

}

Person.prototype = {
  constructor: Person,
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

優(yōu)點(diǎn)：實(shí)例可以通過(guò)constructor屬性找到所屬構(gòu)造函數(shù)

缺點(diǎn)：原型模式該有的缺點(diǎn)還是有

4. 組合模式

構(gòu)造函數(shù)模式與原型模式雙劍合璧。

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constructor: Person,
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

優(yōu)點(diǎn)：該共享的共享，該私有的私有，使用最廣泛的方式

缺點(diǎn)：有的人就是希望全部都寫(xiě)在一起，即更好的封裝性

4.1 動(dòng)態(tài)原型模式

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype.getName = function () {
      console.log(this.name);
    }
  }
}

var person1 = new Person();

注意：使用動(dòng)態(tài)原型模式時(shí)，不能用對(duì)象字面量重寫(xiě)原型

解釋下為什么：

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
// 報(bào)錯(cuò) 并沒(méi)有該方法
person1.getName();
 
// 注釋掉上面的代碼，這句是可以執(zhí)行的。
person2.getName();

為了解釋這個(gè)問(wèn)題，假設(shè)開(kāi)始執(zhí)行var person1 = new Person('kevin')。

如果對(duì) new 和 apply 的底層執(zhí)行過(guò)程不是很熟悉，可以閱讀底部相關(guān)鏈接中的文章。

我們回顧下 new 的實(shí)現(xiàn)步驟：

  1. 首先新建一個(gè)對(duì)象
  2. 然后將對(duì)象的原型指向 Person.prototype
  3. 然后 Person.apply(obj)
  4. 返回這個(gè)對(duì)象

注意這個(gè)時(shí)候，回顧下 apply 的實(shí)現(xiàn)步驟，會(huì)執(zhí)行 obj.Person 方法，這個(gè)時(shí)候就會(huì)執(zhí)行 if 語(yǔ)句里的內(nèi)容，注意構(gòu)造函數(shù)的 prototype 屬性指向了實(shí)例的原型，使用字面量方式直接覆蓋 Person.prototype，并不會(huì)更改實(shí)例的原型的值，person1 依然是指向了以前的原型，而不是 Person.prototype。而之前的原型是沒(méi)有 getName 方法的，所以就報(bào)錯(cuò)了！

如果你就是想用字面量方式寫(xiě)代碼，可以嘗試下這種：

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
 
    return new Person(name);
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
person1.getName(); // kevin
person2.getName(); // daisy

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

function Person(name) {
 
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };
 
  return o;
 
}
 
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object) // true

寄生構(gòu)造函數(shù)模式，我個(gè)人認(rèn)為應(yīng)該這樣讀：

寄生-構(gòu)造函數(shù)-模式，也就是說(shuō)寄生在構(gòu)造函數(shù)的一種方法。

也就是說(shuō)打著構(gòu)造函數(shù)的幌子掛羊頭賣(mài)狗肉，你看創(chuàng)建的實(shí)例使用 instanceof 都無(wú)法指向構(gòu)造函數(shù)！

這樣方法可以在特殊情況下使用。比如我們想創(chuàng)建一個(gè)具有額外方法的特殊數(shù)組，但是又不想直接修改Array構(gòu)造函數(shù)，我們可以這樣寫(xiě)：

function SpecialArray() {
  var values = new Array();
 
  for (var i = 0, len = arguments.length; i len; i++) {
    values.push(arguments[i]);
  }
 
  values.toPipedString = function () {
    return this.join("|");
  };
  return values;
}
 
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

你會(huì)發(fā)現(xiàn)，其實(shí)所謂的寄生構(gòu)造函數(shù)模式就是比工廠模式在創(chuàng)建對(duì)象的時(shí)候，多使用了一個(gè)new，實(shí)際上兩者的結(jié)果是一樣的。

但是作者可能是希望能像使用普通 Array 一樣使用 SpecialArray，雖然把 SpecialArray 當(dāng)成函數(shù)也一樣能用，但是這并不是作者的本意，也變得不優(yōu)雅。

在可以使用其他模式的情況下，不要使用這種模式。

但是值得一提的是，上面例子中的循環(huán)：

for (var i = 0, len = arguments.length; i len; i++) {
  values.push(arguments[i]);
}

可以替換成：

values.push.apply(values, arguments);

5.2 穩(wěn)妥構(gòu)造函數(shù)模式

function person(name){
  var o = new Object();
  o.sayName = function(){
    console.log(name);
  };
  return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

所謂穩(wěn)妥對(duì)象，指的是沒(méi)有公共屬性，而且其方法也不引用 this 的對(duì)象。

與寄生構(gòu)造函數(shù)模式有兩點(diǎn)不同：

  1. 新創(chuàng)建的實(shí)例方法不引用 this
  2. 不使用 new 操作符調(diào)用構(gòu)造函數(shù)

穩(wěn)妥對(duì)象最適合在一些安全的環(huán)境中。

穩(wěn)妥構(gòu)造函數(shù)模式也跟工廠模式一樣，無(wú)法識(shí)別對(duì)象所屬類型。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：深入理解JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)
路徑分享：http://chinadenli.net/article30/piheso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、Google、外貿(mào)建站、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司