《javascript高級程序設(shè)計》筆記：創(chuàng)建對象

姘存按發(fā)布于2019-08-21 17:24 / 1861人閱讀

摘要：簡單方式創(chuàng)建對象字面量方式創(chuàng)建對象方式創(chuàng)建對象雖然構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕韯?chuàng)建單個對象，但這些方式有個明顯的缺點使用同一個接口創(chuàng)建很多對象，會產(chǎn)生大量的重復代碼，如上面的代碼，每創(chuàng)建一個類似的對象，就會重復上面的寫法，代碼較為冗余為了

1. 簡單方式創(chuàng)建對象

  // 字面量方式創(chuàng)建對象
  var person1 = {
    name: "xyc",
    age: 23,
    sayHi: function() {
      console.log(name);
    }
  };
  
  // Object方式創(chuàng)建對象
  var person2 = new Object();
  person2.name = "lxy";
  person2.age = 18;
  person2.sayHi = function() {
    console.log(person2.name);
  }

雖然Object構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕韯?chuàng)建單個對象，但這些方式有個明顯的缺點：使用同一個接口創(chuàng)建很多對象，會產(chǎn)生大量的重復代碼，如上面的代碼，每創(chuàng)建一個類似的person對象，就會重復上面的寫法，代碼較為冗余

為了解決這個問題（代碼重復），下面引入工廠模式 ==>

2. 工廠模式創(chuàng)建對象

  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 person1 = createPerson("Nicholas", 29, "Software Engineer");
  var person2 = createPerson("Greg", 27, "Doctor");

通俗的解釋：工廠模式就是利用了函數(shù)的封裝調(diào)用，類比工廠材料==>成品的過程，完成入口參數(shù)==>對象的過程，函數(shù)可以無數(shù)次的生成，因此能夠避免上面產(chǎn)生大量重復代碼的情況。工廠模式雖然解決了創(chuàng)建多個相似對象的問題，但卻沒有解決對象識別的問題（即怎樣知道一個對象的類型）

為解決這個問題（對象識別），下面引入構(gòu)造函數(shù)模式

3. 構(gòu)造函數(shù)創(chuàng)建對象 3.1 構(gòu)造函數(shù)與普通函數(shù)的區(qū)別

命名規(guī)則：構(gòu)造函數(shù)一般是首字母大寫，普通函數(shù)遵照小駝峰式命名法

函數(shù)調(diào)用：
構(gòu)造函數(shù)：
（1）new fn( )
（2）構(gòu)造函數(shù)內(nèi)部會創(chuàng)建一個新的對象，即f的實例
（3）函數(shù)內(nèi)部的this指向新創(chuàng)建的f的實例
（4）默認的返回值是f的實例
普通函數(shù)：
（1）fn( )
（2）在調(diào)用函數(shù)的內(nèi)部不會創(chuàng)建新的對象
（3）函數(shù)內(nèi)部的this指向調(diào)用函數(shù)的對象（如果沒有對象調(diào)用，默認是window）
（4）返回值由return語句決定

構(gòu)造函數(shù)的返回值：
有一個默認的返回值，新創(chuàng)建的對象（實例），當手動添加返回值后（return語句）：
（1）返回值是基本數(shù)據(jù)類型-->真正的返回值還是那個新創(chuàng)建的對象（實例）
（2）返回值是復雜數(shù)據(jù)類型（對象）-->真正的返回值是這個對象

function foo() {
  var f2 = new foo2();
  console.log(f2);    // {a: 3}
  console.log(this);  // window
  return true;
}
function foo2() {
  console.log(this);  // foo2類型的對象 不是foo2函數(shù)
  return {a: 3};
}
var f1 = foo();
console.log(f1);      // true

3.2 new 操作符作用

使用new操作符調(diào)用構(gòu)造函數(shù)會經(jīng)歷下面幾個步驟：
（1）創(chuàng)建一個以這個函數(shù)為原型的空對象.
（2）將函數(shù)的 prototype 賦值給對象的 proto 屬性
（3）將對象作為函數(shù)的 this 傳進去。如果有 return 出來東西是對象的話就直接返回 return 的內(nèi)容，沒有的話就返回創(chuàng)建的這個對象

function NewFunc(func){
  var ret = {};
  if (func.prototype !== null) {
    ret.__proto__ = func.prototype;
  }
  var ret1 = func.apply(ret, Array.prototype.slice.call(arguments, 1));
  if ((typeof ret1 === "object" || typeof ret1 === "function") && ret1 !== null) {
    return ret1;
  }
  return ret;
}

普通函數(shù)的作用主要是封裝作用，能夠在作用域內(nèi)多處調(diào)用而已

3.3 構(gòu)造函數(shù)解決對象識別

創(chuàng)建自定義的構(gòu)造函數(shù)意味著可以通過 instanceof 將它的實例標識為一種特定的類型

  function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
      console.log(this.name);
    }
  }
  
  var person1 = new Person("xyc", 23);
  var person2 = new Person("lxy", 22);
  
  console.log(person1 instanceof Person); //true
  console.log(person2 instanceof Person); //true
  console.log(person1 instanceof Object); //true 因為Person繼承自O(shè)bject,所以這里一樣成立.

3.4 缺陷

構(gòu)造函數(shù)創(chuàng)建對象的方式解決了代碼重復和對象識別的問題，但是創(chuàng)建的對象中含有方法時，每實例化一個Person，就會產(chǎn)生一個方法，也就是一個對象，每個對象分別占據(jù)內(nèi)存。因此，構(gòu)造函數(shù)創(chuàng)建對象的方式存在內(nèi)存大量占用的風險

利用原型共享的特性，下面引入原型模式

4. 原型創(chuàng)建對象

  function Person(){}
  Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
      alert(this.name);
    } 
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.sayName();    //"Nicholas"
  person2.sayName();    //"Nicholas"
  
  person1.friends.push("Van");
  alert(person1.friends);    //"Shelby,Court,Van"
  alert(person2.friends);    //"Shelby,Court,Van"
  alert(person1.friends === person2.friends);  //true

原型創(chuàng)建對象的方式將屬性和方法都存在與原型中，也就是說，只要通過這種形式創(chuàng)建的對象都會共享這些屬性和對象，相對于方法共享這是我們樂于看到的，但是屬性共享讓每個實例缺失了“個性”；另外對于引用類型的屬性共享時，如上面的例子，多個實例對引用類型的操作會被篡改。

實例一般都要有屬于自己的全部屬性，這也決定了原型創(chuàng)建方式的局限性。下面引入非常經(jīng)典的對象創(chuàng)建方式

5. 構(gòu)造函數(shù)+原型創(chuàng)建對象（重點）

組合構(gòu)造函數(shù)模式與原型模式：構(gòu)造函數(shù)模式用于定義實力屬性，而原型模式用于定義方法和共享的屬性

  function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
  }
  
  Person.prototype = {
    constructor : Person,
    sayName : function(){
      alert(this.name);
    }
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.friends.push("Van");
  alert(person1.friends);    //"Shelby,Count,Van"
  alert(person2.friends);    //"Shelby,Count"
  alert(person1.friends === person2.friends); //false
  alert(person1.sayName === person2.sayName); //true

這種方式創(chuàng)建的實例對象，每個實例都會有自己的一份實例屬性的副本，但同時又共享著對方法的引用，最大限度地節(jié)省了內(nèi)存；另外，這種方式還支持相構(gòu)造函數(shù)傳遞參數(shù)，解決了上面的各種問題