new · 前端筆記

[TOC] # new new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。 當代碼 new Foo(...) 執行時，會發生以下事情： 1. 一個繼承自 Foo.prototype 的新對象被創建。 2. 使用指定的參數調用構造函數 Foo ，并將 this 綁定到新創建的對象。沒有指定參數列表、Foo 不帶任何參數調用的情況下，`new Foo` 等同于 `new Foo()` 3. 如果構造函數返回了一個對象，這個對象即是new 表達式的結果，如果構造函數沒有顯式返回一個對象，則使用步驟1創建的對象。（一般情況下，構造函數不返回值，但是用戶可以選擇主動返回對象，來覆蓋正常的對象創建步驟） ~~~ function Foo (name) { this.name = name console.log(this) } Foo.prototype.sayHi = function (){ console.log(this.name) } // 第一步 var foo = new Foo(123) foo.sayHi() // 123 // 第二步 var foo1 = new Foo(123) // 返回 {name: 123} var foo2 = Foo(123) // 返回 window對象 ~~~ ## 返回值構造函數返回值有如下三種情況： * 返回一個對象 * 沒有 return，即返回 undefined * 返回 undefined 以外的基本類型 情況1：返回一個對象 ~~~ function Car(color, name) { this.color = color; return { name: name } } var car = new Car("black", "BMW"); car.color; // undefined car.name; // "BMW" ~~~ 實例 car 中只能訪問到返回對象中的屬性。 情況2：沒有 return，即返回 undefined ~~~ function Car(color, name) { this.color = color; } var car = new Car("black", "BMW"); car.color; // black car.name; // undefined ~~~ 實例 car 中只能訪問到構造函數中的屬性，和情況1完全相反。 情況3：返回undefined 以外的基本類型 ~~~ function Car(color, name) { this.color = color; return "new car"; } var car = new Car("black", "BMW"); car.color; // black car.name; // undefined ~~~ 與情況2相同 ## 模擬 new ~~~ function objectFactory() { // 使用objectFactory的時候,把arguments,轉化為數組 var args = Array.prototype.slice.call(arguments); //提取第1個構建對象 var Constructor = args.shift(); // 創建constructor實例 instance var instance = Object.create(Constructor.prototype); // 使用apply函數運行args, 把 instance 綁定到 this var temp = Constructor.apply(instance, args); //返回對象判斷是object 還是 null 還是實例 return temp instanceof Object ? temp : instance; } ~~~ # 參考資料 * [JavaScript深入之new的模擬實現](https://github.com/mqyqingfeng/Blog/issues/13) * [new運算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)