[[438318]]

18.1 基礎(chǔ)

new的作用是通過構(gòu)造函數(shù)來創(chuàng)建一個(gè)實(shí)例對象，該實(shí)例與原型和構(gòu)造函數(shù)之間的關(guān)系如下圖所示：

18.2 new過程中發(fā)生了什么

當(dāng)一個(gè)構(gòu)造函數(shù)new的過程到底發(fā)生了什么?簡要概述主要分為以下幾個(gè)步驟：

• 一個(gè)新對象被創(chuàng)建;
• 該對象的__ proto __屬性指向該構(gòu)造函數(shù)的原型，即Fn.prototype;
• 將執(zhí)行上下文(this)綁定到新創(chuàng)建的對象中;
• 如果構(gòu)造函數(shù)有返回值(對象或函數(shù))，那么這個(gè)返回值將取代第一步中新創(chuàng)建的對象。

new真的做了這幾步嗎?秉承著“實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)”的原則，下面將這幾個(gè)關(guān)鍵點(diǎn)進(jìn)行逐一驗(yàn)證。

function Fun() { 
    this.a = 10; 
    this.b = 20; 
    this.method1 = () => { 
        return this.a + this.b; 
    } 
    this.method2 = () => { 
        return this; 
    } 
} 
 
Fun.prototype = { 
    method2: () => { 
        console.log('原型上的method1被訪問'); 
    } 
} 

18.2.1 驗(yàn)證點(diǎn)1——新對象被創(chuàng)建

驗(yàn)證點(diǎn)1是新對象被創(chuàng)建，其實(shí)這個(gè)里面有兩層含義：

new之后返回的內(nèi)容是一個(gè)對象

const fun = new Fun(); 
console.log(fun); //  { a: 10, b: 20, method1: [Function] } 
console.log(typeof(fun)); // object 

通過打印其內(nèi)容，并通過typeof進(jìn)行驗(yàn)證，其返回內(nèi)容確實(shí)是一個(gè)對象。

每次返回的都是一個(gè)新創(chuàng)建的對象

const fun1 = new Fun(); 
const fun2 = new Fun(); 
console.log(fun1 === fun2); // false 

通過創(chuàng)建兩個(gè)實(shí)例，通過判斷兩個(gè)實(shí)例不相等，則證明確實(shí)每次返回的是一個(gè)新的對象。

18.2.2 驗(yàn)證點(diǎn)2——該對象可訪問原型上的屬性和方法

驗(yàn)證點(diǎn)2是新創(chuàng)建的實(shí)例可訪問原型上的屬性和方法，驗(yàn)證該關(guān)鍵點(diǎn)只需要訪問原型上的方法即可實(shí)現(xiàn)，若原型上的方法能夠被正常訪問，則表示該驗(yàn)證點(diǎn)通過，負(fù)責(zé)不通過。

const fun3 = new Fun(); 
 
fun3.method3(); // 原型上的method3被訪問 

通過驗(yàn)證，原型上的方法確實(shí)能夠被訪問。

18.2.3 驗(yàn)證點(diǎn)3——this指向

驗(yàn)證this指向只需要將this指向打印出來即可。

const fun4 = new Fun(); 
 
console.log(fun4.method2()); // { a: 10, b: 20, method1: [Function], method2: [Function] } 
 
console.log(fun4.method2() === fun4); // true 

18.2.4 驗(yàn)證點(diǎn)4——構(gòu)造函數(shù)有返回值的處理邏輯

一個(gè)函數(shù)的返回值可以有多種，例如：string、boolean、number、Object、function等，下面我們驗(yàn)證一些內(nèi)容，看構(gòu)造函數(shù)有不同的返回值，其實(shí)例為何值。

返回值為string

function Fun() { 
    this.a = 10; 
    this.b = 20; 
    return 'test'; 
} 
Fun.prototype = { 
    method: () => { 
        console.log('原型上的method被訪問'); 
    } 
} 
 
const fun = new Fun(); 
console.log(fun); // { a: 10, b: 20 } 

觀察其最終結(jié)果，字符串沒有沒正常返回，返回值是一個(gè)新的實(shí)例。

返回值為Object

function Fun() { 
    this.a = 10; 
    this.b = 20; 
    return { 
        c: 30 
    }; 
} 
Fun.prototype = { 
    method: () => { 
        console.log('原型上的method被訪問'); 
    } 
} 
 
const fun = new Fun(); 
console.log(fun); // { c: 30 } 

觀察其結(jié)果，返回值是函數(shù)中返回的對象，則表征當(dāng)構(gòu)造函數(shù)返回值為對象時(shí)，會(huì)返回其對象，不返回實(shí)例化后的內(nèi)容。

返回值為function

function Fun() { 
    this.a = 10; 
    this.b = 20; 
    return function() { 
        this.d = 40; 
    }; 
} 
Fun.prototype = { 
    method: () => { 
        console.log('原型上的method被訪問'); 
    } 
} 
 
const fun = new Fun(); 
console.log(fun); // [Function] 

返回函數(shù)的效果和返回對象的效果一致。

通過不斷嘗試總結(jié)，可以得出以下結(jié)論：

構(gòu)造函數(shù)的返回值為基本類型，其返回值是實(shí)例化后的對象，不受返回值的影響;

構(gòu)造函數(shù)的返回值是引用類型，其返回值即為new之后的返回值。

18.3 實(shí)現(xiàn)一個(gè)new

介紹了這么多，已經(jīng)理解了new時(shí)發(fā)生的事情并經(jīng)過了驗(yàn)證，下面就手動(dòng)實(shí)現(xiàn)一個(gè)自己的new函數(shù)。

function myNew(Fn, ...args) { 
    // 一個(gè)新的對象被創(chuàng)建 
    const result = {}; 
    // 該對象的__proto__屬性指向該構(gòu)造函數(shù)的原型 
    if (Fn.prototype !== null) { 
        Object.setPrototypeOf(result, Fn.prototype); 
    } 
 
    // 將執(zhí)行上下文（this）綁定到新創(chuàng)建的對象中 
    const returnResult = Fn.apply(result, args); 
    // 如果構(gòu)造函數(shù)有返回值（對象或函數(shù)），那么這個(gè)返回值將取代第一步中新創(chuàng)建的對象。 
    if ((typeof returnResult === 'object' || typeof returnResult === 'function') && returnResult !== null) { 
        return returnResult; 
    } 
    return result; 
} 

小試牛刀

function Fun() { 
    this.a = 10; 
    this.b = 20; 
} 
Fun.prototype = { 
    method: () => { 
        console.log('原型上的method被訪問'); 
    } 
} 
const fun1 = new Fun(); 
console.log(fun1); // { a: 10, b: 20 } 
const fun2 = myNew(Fun); 
console.log(fun2); // { a: 10, b: 20 }