一段關(guān)于JS中this應(yīng)用奇葩代碼引發(fā)的思考

AlanKeene 發(fā)布于2019-08-21 17:40 / 3078人閱讀

摘要：，對(duì)外公開的接口。更需要注意立即執(zhí)行函數(shù)，返回的是一個(gè)匿名函數(shù)，也是一個(gè)閉包，在這里一定要注意一個(gè)問題是在進(jìn)入可執(zhí)行上下文時(shí)創(chuàng)建的。三在方法中，注意如下代碼省略代碼的實(shí)際參數(shù)是一個(gè)自執(zhí)行匿名函數(shù)，這個(gè)匿名函數(shù)接受了兩個(gè)參數(shù)，但只返回了。

function DemoFunction(){
    this.init = function(){
        var func = (function(va){
        this.va = va;
        return function(){
            va += this.va;
            return va;
        }
        })(function(va1, va2){
            var va3 = va1 + va2;
            return va1;
        }(1,2));
        
        console.log(func(20));

        this.func = func;
        console.log(this.func(100));
    }
}
var a = new DemoFunction();
a.init();

首先我們得有如下幾個(gè)概念：

執(zhí)行上下文：每次當(dāng)控制器轉(zhuǎn)到ECMAScript可執(zhí)行代碼時(shí)，即會(huì)進(jìn)入一個(gè)可執(zhí)行上下文，參考文獻(xiàn)：深入理解JavaScript系列（11）：執(zhí)行上下文（Execution Contexts）

this：this的創(chuàng)建是在 “進(jìn)入執(zhí)行上下文” 時(shí)創(chuàng)建的，在代碼執(zhí)行過程中是不可變的，參考文獻(xiàn)：深入理解JavaScript系列（13）：This? Yes,this!

自執(zhí)行函數(shù)：準(zhǔn)確來說應(yīng)該叫：立即調(diào)用函數(shù)表達(dá)式。因?yàn)樗暶骱蠹磮?zhí)行，參考文獻(xiàn)：深入理解JavaScript系列（4）：立即調(diào)用的函數(shù)表達(dá)式

詳細(xì)解釋此段代碼

一、首先看DemoFunction的構(gòu)造函數(shù)

這是代碼的重點(diǎn)，第一層代碼可以縮減為如下：

function DemoFunction(){
    this.init = function(){
        //省略代碼....
    }
}

表示為DemoFunction的實(shí)例提供init方法（聲明：此處有誤導(dǎo)成份，方法應(yīng)盡可能放在原型鏈接上，也就是prototype上。），對(duì)外公開的接口。

二、在init方法中，再次省略代碼如下：

var func = (function(va){
    this.va = va;
    return function(){
        va += this.va;
        return va;
    }
})(/*省略代碼...*/);

//省略代碼....

上面代碼介紹：

首先定義了一個(gè)立即執(zhí)行函數(shù)，并把此函數(shù)的執(zhí)行結(jié)果賦值給func。

需要注意立即執(zhí)行函數(shù)中this.va=va這行代碼，由于立即執(zhí)行函數(shù)沒有調(diào)用者，所以在進(jìn)入可執(zhí)行上下文時(shí)，this會(huì)被賦值為Global(瀏覽器中為window對(duì)象)。

更需要注意立即執(zhí)行函數(shù)，返回的是一個(gè)匿名函數(shù)，也是一個(gè)閉包，在這里一定要注意一個(gè)問題：this是在進(jìn)入可執(zhí)行上下文時(shí)創(chuàng)建的。

三、在init方法中，注意如下代碼：

var func = (function(va){
    this.va = va;
    return function(){
        va += this.va;
        return va;
    }
})(function(va1, va2){
    var va3 = va1 + va2;
    return va1;
}(1,2));
//省略代碼....

va的實(shí)際參數(shù)是一個(gè)自執(zhí)行匿名函數(shù)，這個(gè)匿名函數(shù)接受了兩個(gè)參數(shù)va1,va2，但只返回了va1。以此為據(jù)，那么可以確定va的值也就為1。接著就執(zhí)行this.va=va這句代碼，由于當(dāng)前this為window，所以參數(shù)va的值被賦值到了window的一個(gè)叫va的屬性上。

四、在init方法中，加上輸出語句：

var func = (function(va){
    this.va = va;
    return function(){
        va += this.va;
        return va;
    }
    })(function(va1, va2){
        var va3 = va1 + va2;
        return va1;
    }(1,2));
    
    console.log(func(20));

    this.func = func;
    console.log(this.func(100));
}

結(jié)果分析：

第一個(gè)console.log輸出的是func(20)，這里一定要注意調(diào)用者是沒有具體指定的，此時(shí)默認(rèn)的就是Global（也就是widnow對(duì)象），因此輸出為：2

第二個(gè)console.log輸出的是this.func(100)，可以看到this.func與func是指向同一個(gè)函數(shù)的引用，但此時(shí)的調(diào)用者則指定為this，也就是當(dāng)前對(duì)象的實(shí)例，因此輸出為：NaN。原因：this(當(dāng)前對(duì)象的實(shí)例)作為調(diào)用者，在func的函數(shù)中va += this.va這句代碼中的this是指向當(dāng)前對(duì)象的實(shí)例，但當(dāng)前對(duì)象的實(shí)例上是沒有va屬性的。但是va是有值的，當(dāng)前值為2了。是因?yàn)殚]包把va值存到內(nèi)存中了。那么如何讓第二次得到的值也是2呢，結(jié)果很簡(jiǎn)單，如下：

    function DemoFunction(){
        this.va = 0;
        this.init = function(){
            var func = (function(va){
            this.va = va;
            return function(){
                va += this.va;
                return va;
            }
            })(function(va1, va2){
                var va3 = va1 + va2; 
                return va1;
            }(1,2));
            console.log(func(20));
            
            this.func = func;
           
            console.log(this.func(100));
        }
    }
    var a = new DemoFunction();
    a.init();