JavaScript之new運算符

JavaScript之new運算符

new運算符建立一個用戶定義的對象類型的實例或具備構造函數的內置對象的實例。new關鍵字會進行以下的操做：

1. 建立一個空的簡單JavaScript對象（即{}）；
2. 連接該對象（即設置該對象的構造函數）到另外一個對象 ；
3. 將步驟1新建立的對象做爲this的上下文 ；
4. 若是該函數沒有返回對象，則返回this。

var cat = new Animal("cat");

new Animal("cat") = function () {
    var obj = {};        // 第1步
    obj.__proto__ = Animal.prototype;    // 第2步
    var result = Animal.call(obj,"cat");    // 第3步:obj.Animal("cat")
    return typeof result === 'object'? result : obj;    // 第4步
}

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);// expected output: "Eagle"

建立一個用戶自定義的對象須要兩步：

1. 經過編寫函數來定義對象類型。
2. 經過new來建立對象實例。

建立一個對象類型，須要建立一個指定其名稱和屬性的函數；對象的屬性能夠指向其餘對象，看下面的例子：
當代碼new Foo(…)執行時，會發生如下事情：

1. 一個繼承自Foo.prototype的新對象被建立。
2. 使用指定的參數調用構造函數Foo，並將 this綁定到新建立的對象。newFoo等同於new Foo()，也就是沒有指定參數列表，Foo不帶任何參數調用的狀況。
3. 由構造函數返回的對象就是new表達式的結果。若是構造函數沒有顯式返回一個對象，則使用步驟1建立的對象。（通常狀況下，構造函數不返回值，可是用戶能夠選擇主動返回對象，來覆蓋正常的對象建立步驟）

你始終能夠對已定義的對象添加新的屬性。例如，car1.color = "black"語句給car1添加了一個新的屬性color，並給這個屬性賦值 "black"。可是，這不會影響任何其餘對象。要將新屬性添加到相同類型的全部對象，你必須將該屬性添加到Car對象類型的定義中。
你可使用Function.prototype屬性將共享屬性添加到之前定義的對象類型。這定義了一個由該函數建立的全部對象共享的屬性，而不單單是對象類型的其中一個實例。下面的代碼將一個值爲null的color屬性添加到car類型的全部對象，而後僅在實例對象car1中用字符串 "black" 覆蓋該值。詳見 [prototype](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 。

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color);    // undefined
 
Car.prototype.color = "original color";
console.log(car1.color);    // original color
 
car1.color = 'black';
console.log(car1.color);   // black

console.log(car1.__proto__.color) //original color
console.log(car2.__proto__.color) //original color
console.log(car1.color)  // black
console.log(car2.color) // original color

---

推薦閱讀：
JavaScript之call()理解

---

我是Cloudy，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。
我的筆記，整理不易，感謝閱讀、點贊和收藏。
文章有任何問題歡迎你們指出，也歡迎你們一塊兒交流前端各類問題！