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

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); // Tomconsole.log(cat.__proto__ === Animal.prototype); // truecat.sayName(); // I’m Tom

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

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

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

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

// construct: 構(gòu)造函數(shù)function newFunction() { var res = {}; // 排除第一個(gè)構(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;}

我們測(cè)試下：

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); // Tomconsole.log(cat.__proto__ === Animal.prototype); // truecat.sayName(); // I’m Tom

一切正常。new的特性實(shí)現(xiàn)已經(jīng)80%，但new還有一個(gè)特性：

function Animal(name) { this.name = name; return { prop: ’test’ };}var cat = new Animal(’Tom’);console.log(cat.prop); // testconsole.log(cat.name); // undefinedconsole.log(cat.__proto__ === Object.prototype); // trueconsole.log(cat.__proto__ === Animal.prototype); // false

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

// construct: 構(gòu)造函數(shù)function newFunction() { var res = {}; // 排除第一個(gè)構(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;}

測(cè)試下：

function Animal(name) { this.name = name; return { prop: ’test’ };}var cat = newFunction(Animal, ’Tom’);console.log(cat.prop); // testconsole.log(cat.name); // undefinedconsole.log(cat.__proto__ === Object.prototype); // trueconsole.log(cat.__proto__ === Animal.prototype); // false

以上代碼就是我們最終對(duì)new操作符的模擬實(shí)現(xiàn)。我們?cè)賮?lái)看下官方對(duì)new的解釋

引用MDN對(duì)new運(yùn)算符的定義：

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

new操作符會(huì)干下面這些事：

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

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

// construct: 構(gòu)造函數(shù)function newFunction() { // 通過(guò)Object.create創(chuàng)建一個(gè)空對(duì)象； var res = Object.create(null); // 排除第一個(gè)構(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;}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。