JavaScript手寫new方法

KeyNG發表於2020-06-29
JavaScript

1.看一下正常使用的new方法

function father(name){
    this.name=name;
    this.sayname=function(){
        console.log(this.name)
    }
}

var son=new father('kimi')
dog.sayname();

輸出結果：

kimi

 

2.手寫一個new方法

function father(name){
    this.name=name;
    this.sayname=function(){
        console.log(this.name)
    }
}

function myNew(ctx, ...args){ // ...args為ES6展開符,也可以使用arguments
    //先用Object建立一個空的物件
    let obj=new Object();
    //新物件會被執行prototype連線
    obj.__proto__=ctx.prototype;
    //新物件和函式呼叫的this繫結起來
    let res=ctx.call(obj,...args);
    //判斷函式返回值如果是null或者undefined則返回obj,否則就放回res
    return res instanceof Object?res:obj;
}

var son=myNew(father,'kimi')
son.sayname();

輸出結果：

kimi

 

3.總結：

new一個物件的過程是：

1>建立一個空物件

2>對新物件進行[prototype]繫結（即son._proto_=father.prototype）

3>新物件和函式呼叫的this會繫結起來

4>執行建構函式中的方法

5>如果函式沒有返回值則自動返回這個新物件

相關文章