寫出幾種建立對象的方式，並說說他們的區別是什麼？【前端每日一題-26】

時間 2019-11-07

標籤寫出幾種建立對象方式說說他們區別什麼前端每日一題-26 简体版

原文原文鏈接

寫出幾種建立對象的方式，並說說他們的區別是什麼？

初見此題，沒啥好說的，腦海中閃現以下兩種方式：javascript

//字面量
var obj={};

//new實例化
var obj=new Object();複製代碼

難度就這麼點？百度查了查，發現本身理解得有些片面了。以下正解：java

工廠方式建立對象

function createPerson(name) {
  var obj = {};
  obj.name = name;
  obj.sayMyname = function() {
    console.log(this.name);
  };
  return obj;
}

var p1 = createPerson('Mike');
p1.sayMyname(); //Mike

var p2 = createPerson('Lily');
p2.sayMyname(); //Lily

console.log(p1 instanceof createPerson); //false
console.log(p1 instanceof Object); //true
console.log(p2 instanceof createPerson); //false
console.log(p2 instanceof Object); //true複製代碼

能夠明顯的感受到，用此方法建立的對象沒法識別創造者（這裏的創造者全是Object）。app

構造函數建立對象

當new去調用一個函數，這個時候函數中的this就是建立出來的對象，並且函數的返回值就是this（隱式返回）。ide

function createPerson(name) {
  this.name = name;
  this.sayMyname = function() {
    console.log(this.name);
  };
}

var p1 = new createPerson('Mike');
p1.sayMyname(); //Mike

var p2 = new createPerson('Lily');
p2.sayMyname(); //Lily

console.log(p1 instanceof createPerson); //true
console.log(p1 instanceof Object); //true
console.log(p2 instanceof createPerson); //true
console.log(p2 instanceof Object); //true複製代碼

優勢：建立自定義函數意味着未來能夠將它的實例標識爲一種特定的類型，這是構造函數賽過工廠模式的地方
缺點：每一個方法都要在每一個實例上從新建立一遍，如（sayMyname）

原型方式

function Person() {}

Person.prototype.name = 'Mike';

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

var p1 = new Person();

p1.sayMyname();複製代碼

優勢：可讓全部的對象實例共享它所包含的屬性和方法
缺點：原型中是全部屬性都是共享的，可是實例通常都是要有本身的單獨屬性的。因此通常不多單獨使用原型模式。

混合模型

構造函數模式定義實例屬性
原型模式用於定義方法和共享的屬性

function CreatePerson(name) {  this.name = name;}CreatePerson.prototype.sayMyname = function() {  console.log(this.name);};var p1 = new CreatePerson('Mike');p1.sayMyname();var p2 = new CreatePerson('Lily');p2.sayMyname();console.log(p1.sayMyname == p2.sayMyname); //true;緣由：都是在原型下面，在內存中只存在一份，地址相同複製代碼