快捷導(dǎo)航

Javascript模擬實現(xiàn)new原理解析

更新時間：2020年03月03日 13:46:47 作者：秦至

這篇文章主要介紹了Javascript模擬實現(xiàn)new原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

new是JS中的一個關(guān)鍵字，用來將構(gòu)造函數(shù)實例化的一個運算符。例子：

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

從上面的例子可以得出兩點結(jié)論：

new操作符實例化了一個對象；
這個對象可以訪問構(gòu)造函數(shù)的屬性；
這個對象可以訪問構(gòu)造函數(shù)原型上的屬性；
對象的**__proto__**屬性指向了構(gòu)造函數(shù)的原型；

由于new是關(guān)鍵字，我們只能去聲明一個函數(shù)去實現(xiàn)new的功能，首先實現(xiàn)上面的三個特性，第一版代碼如下：

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

// construct: 構(gòu)造函數(shù)
function newFunction() {
 var res = {};
 // 排除第一個構(gòu)造函數(shù)參數(shù)
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply執(zhí)行構(gòu)造函數(shù)，將構(gòu)造函數(shù)的屬性掛載在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的特性實現(xiàn)已經(jīng)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

如上，如果構(gòu)造函數(shù)return了一個對象，那么new操作后返回的是構(gòu)造函數(shù)return的對象。讓我們來實現(xiàn)下這個特性，最終版代碼如下：

// construct: 構(gòu)造函數(shù)
function newFunction() {
 var res = {};
 // 排除第一個構(gòu)造函數(shù)參數(shù)
 var construct = Array.prototype.shift.call(arguments);
 res.__proto__ = construct.prototype;
 // 使用apply執(zhí)行構(gòu)造函數(shù)，將構(gòu)造函數(shù)的屬性掛載在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操作符的模擬實現(xiàn)。我們再來看下官方對new的解釋

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

new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象的實例。

new操作符會干下面這些事：

創(chuàng)建一個空的簡單JavaScript對象（即{}）；
鏈接該對象（即設(shè)置該對象的構(gòu)造函數(shù)）到另一個對象；
將步驟1新創(chuàng)建的對象作為this的上下文；
如果該函數(shù)沒有返回對象，則返回this。

4條都已經(jīng)實現(xiàn)。還有一個更好的實現(xiàn)，就是通過Object.create去創(chuàng)建一個空的對象:

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: