學習Javascript之模擬實現new

前言

本文1021字，閱讀大約須要5分鐘。

總括: 本文對new進行了一個簡單介紹，而後使用一個函數模擬實現了new操做符作的事情。

• 參考文檔：new 運算符
• 公衆號：「前端進階學習」，回覆「666」，獲取一攬子前端技術書籍

人生是沒有畢業的學校。

正文

new是JS中的一個關鍵字，用來將構造函數實例化的一個運算符。例子：

function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log("I'm " + this.name);
}
var cat = new Animal('Tom');
console.log(cat.name); // Tom
console.log(cat.__proto__ === Animal.prototype); // true
cat.sayName(); // I'm Tom

從上面的例子能夠得出兩點結論：

1. new操做符實例化了一個對象；
2. 這個對象能夠訪問構造函數的屬性；
3. 這個對象能夠訪問構造函數原型上的屬性；
4. 對象的_proto_屬性指向了構造函數的原型；

因爲new是關鍵字，咱們只能去聲明一個函數去實現new的功能，首先實現上面的三個特性，初版代碼以下：

附：對原型原型鏈不熟悉的能夠先看理解Javascript的原型和原型鏈。

// construct: 構造函數
function newFunction() {
  var res = {};
  // 排除第一個構造函數參數
  var construct = Array.prototype.shift.call(arguments);
  res.__proto__ = construct.prototype;
  // 使用apply執行構造函數，將構造函數的屬性掛載在res上面
  construct.apply(res, arguments);
  return res;
}

咱們測試下：

function newFunction() {
  var res = {};
  var construct = Array.prototype.shift.call(arguments);
  res.__proto__ = construct.prototype;
  construct.apply(res, arguments);
  return res;
}
function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log("I'm " + this.name);
}
var cat = newFunction(Animal, 'Tom');
console.log(cat.name); // Tom
console.log(cat.__proto__ === Animal.prototype); // true
cat.sayName(); // I'm Tom

一切正常。new的特性實現已經80%，但new還有一個特性：

function Animal(name) {
    this.name = name;
    return {
        prop: 'test'
    };
}
var cat = new Animal('Tom');
console.log(cat.prop); // test
console.log(cat.name); // undefined
console.log(cat.__proto__ === Object.prototype); // true
console.log(cat.__proto__ === Animal.prototype); // false

如上，若是構造函數return了一個對象，那麼new操做後返回的是構造函數return的對象。讓咱們來實現下這個特性，最終版代碼以下：

// construct: 構造函數
function newFunction() {
  var res = {};
  // 排除第一個構造函數參數
  var construct = Array.prototype.shift.call(arguments);
  res.__proto__ = construct.prototype;
  // 使用apply執行構造函數，將構造函數的屬性掛載在res上面
  var conRes = construct.apply(res, arguments);
  // 判斷返回類型
  return conRes instanceof Object ? conRes : res;
}

測試下：

function Animal(name) {
    this.name = name;
  return {
    prop: 'test'
    };
}
var cat = newFunction(Animal, 'Tom');
console.log(cat.prop); // test
console.log(cat.name); // undefined
console.log(cat.__proto__ === Object.prototype); // true
console.log(cat.__proto__ === Animal.prototype); // false

以上代碼就是咱們最終對new操做符的模擬實現。咱們再來看下官方對new的解釋

引用MDN對new運算符的定義：

new 運算符建立一個用戶定義的對象類型的實例或具備構造函數的內置對象的實例。

new操做符會幹下面這些事：

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

4條都已經實現。還有一個更好的實現，就是經過Object.create去建立一個空的對象:

// construct: 構造函數
function newFunction() {
  // 經過Object.create建立一個空對象；
  var res = Object.create(null);
  // 排除第一個構造函數參數
  var construct = Array.prototype.shift.call(arguments);
  res.__proto__ = construct.prototype;
  // 使用apply執行構造函數，將構造函數的屬性掛載在res上面
  var conRes = construct.apply(res, arguments);
  // 判斷返回類型
  return conRes instanceof Object ? conRes : res;
}

以上。

---

能力有限，水平通常，歡迎勘誤，不勝感激。

訂閱更多文章可關注公衆號「前端進階學習」，回覆「666」，獲取一攬子前端技術書籍