欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年06月01日 15:01:07   作者：冴羽  
本篇文章主要介紹了JavaScript創(chuàng)建對象的多種方式以及優(yōu)缺點(diǎn)，主要介紹了5種方式，有興趣的可以了解下

寫在前面

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

但是注意：

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

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)：對象無法識別，因?yàn)樗械膶?shí)例都指向一個原型

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í)例可以識別為一個特定的類型

缺點(diǎn)：每次創(chuàng)建實(shí)例時(shí)，每個方法都要被創(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)：解決了每個方法都要被重新創(chuàng)建的問題

缺點(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)：方法不會重新創(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)：重寫了原型，丟失了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í)例可以通過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)：有的人就是希望全部都寫在一起，即更好的封裝性

4.1 動態(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();

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

解釋下為什么：

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)錯 并沒有該方法
person1.getName();
 
// 注釋掉上面的代碼，這句是可以執(zhí)行的。
person2.getName();

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

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

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

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

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

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

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ù)模式，我個人認(rèn)為應(yīng)該這樣讀：

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

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

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

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

你會發(fā)現(xiàn)，其實(shí)所謂的寄生構(gòu)造函數(shù)模式就是比工廠模式在創(chuàng)建對象的時(shí)候，多使用了一個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)妥對象，指的是沒有公共屬性，而且其方法也不引用 this 的對象。

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論