手動實現一個new

先說說new是作什麼，怎麼用的？ 看代碼，咱們一一解釋

//構造函數
    function Animal(type){
        this.type = type
    }
    Animal.prototype.say = function(){
        //爲了區分咱們打印一個哺乳
        console.log("say")
    }
    //實例化
    let animal = new Animal('哺乳動物')

    console.log(animal)//
    console.log(animal.type)//打印結果是 哺乳動物
    animal.say() //打印結果是 哺乳

複製代碼

一、首先構造函數是一個對象，證實new 返回一個對象，根據咱們的測試咱們暫時先這麼定義 二、實例化對象能夠拿到構造函數的屬性 三、實例對象也能夠擁有構造函數的原型上的方法和屬性

下面咱們根據構造函數->實例化後的一些特性來模擬new的實現。

function mockNew(){
        //參數不定的狀況下咱們用arguments來操做,順便用下es6的解構
        //上邊咱們解釋過，參數有兩部分組成，構造函數（也就是所謂的類），參數
        let [Fn,options] = [[...arguments][0],[...arguments].slice(1)]
        console.log(Fn,options)//打印結果 Animal構造函數，和 tom/2

        //返回一個對象，那咱們就定義一個對象
        let obj = {}
        //下面咱們實現對象的功能
        // 怎麼得到構造函數的屬性 也就是讓obj拿到構造函數的屬性（屬性都在options裏面）
        Fn.apply(obj,options)//執行構造函數，並把this指向obj，這樣是否是就搞定了
        
        // 接下來咱們實現obj擁有構造函數原型上的方法
        // 這就用到原型鏈了，每個對象都有__proto__屬性，每一個函數都有prototype原型
        // 爲了能詳細說明  咱們再畫一下
        obj.__proto__ = Fn.prototype
        return obj
    }
複製代碼

//構造函數
    function Animal(type){
        this.type = type
    }
    Animal.prototype.say = function(){
        //爲了區分咱們打印一個哺乳
        console.log("我是構造函數的say方法")
    }
    //實例化
    // let animal = new Animal('哺乳動物')
    let animal = mockNew(Animal,'mock哺乳動物')

    console.log('實例對象：', animal)//
    console.log('實例的type屬性：'+animal.type)//打印結果是 哺乳動物
    animal.say() //打印結果是 哺乳
複製代碼

測試一下效果：

貌似沒毛病！

//還有一種狀況 若是構造函數有返回值 咱們先測試原生new是怎麼作的

function Animal1(type){
        this.type = type
        // return {name:"xd"} //若是是對象 new執行完 返回此對象
        return type //若是是非引用類型，new的返回結果不變
    }

    let animal1 = new Animal1('哺乳動物1')

    console.log(animal1,animal1.type)

複製代碼

既然是模擬 咱們要作到同樣的效果

function mockNew(){
        //參數不定的狀況下咱們用arguments來操做,順便用下es6的解構
        //上邊咱們解釋過，參數有兩部分組成，構造函數（也就是所謂的類），參數
        let [Fn,options] = [[...arguments][0],[...arguments].slice(1)]
        console.log(Fn,options)//打印結果 Animal構造函數，和 tom/2

        //返回一個對象，那咱們就定義一個對象
        let obj = {}
        //下面咱們實現對象的功能
        // 怎麼得到構造函數的屬性 也就是讓obj拿到構造函數的屬性（屬性都在options裏面）
        let result = Fn.apply(obj,options)//執行構造函數，並把this指向obj，這樣是否是就搞定了

        // 接下來咱們實現obj擁有構造函數原型上的方法
        // 這就用到原型鏈了，每個對象都有__proto__屬性，每一個函數都有prototype原型
        // 爲了能詳細說明  咱們再畫一下
        obj.__proto__ = Fn.prototype

        //定義result就是構造函數返回值，判斷返回值是否是引用類型，若是是返回構造函數返回值，若是不是返回咱們定義的obj

        return result instanceof Object? result: obj
    }
複製代碼

模擬new 操做聊完了 歡迎吐槽！