深入javascript——無處不在的this

Scorpion 發(fā)布于2019-08-21 12:27 / 946人閱讀

摘要：由于匿名函數(shù)的作用域是全局性的，因此閉包的通常指向全局對(duì)象調(diào)用返回值為而不是我們預(yù)期的，在閉包中函數(shù)作為某個(gè)對(duì)象的方法調(diào)用時(shí)，要特別注意，該方法內(nèi)部匿名函數(shù)的指向的是全局變量。

  有人的地方就有江湖，有函數(shù)的地方就有this。而this在不同的環(huán)境下，又表現(xiàn)為不同的形式，難免讓人有種此this非彼this的疑惑

在java等面向?qū)ο蟮恼Z言中，this指的就是當(dāng)前對(duì)象，而在javascript中這就不靈了，javascript中this是在編譯期動(dòng)態(tài)綁定的，這就形成了一把雙刃劍：足夠靈活卻又容易讓人迷惑。在javascript中this可以是全局對(duì)象、當(dāng)前對(duì)象甚至任意對(duì)象（obj.call(this)）。
我們通過函數(shù)的幾種不同調(diào)用方式來看一下各自this的意義：

作為對(duì)象方法調(diào)用

在javascript中函數(shù)也是個(gè)對(duì)象，因此，函數(shù)可以作為一個(gè)對(duì)象的屬性出現(xiàn)：

 var object = {
    name:"jeffie",
    sayWhat:function(){
        console.log(this.name + ":hello"); //jeffie:hello
    }
 }
object.sayWhat();

此處的this指向object對(duì)象，也就是函數(shù)所在的對(duì)象。

作為函數(shù)調(diào)用

當(dāng)函數(shù)直接被調(diào)用時(shí)，此時(shí)函數(shù)中的this指向全局變量，也就是window對(duì)象：

 function obj(){
    console.log(this);
 }
obj();//Window

構(gòu)造函數(shù)中的this

在作為構(gòu)造函數(shù)調(diào)用時(shí)，this指向的是新生成的實(shí)例對(duì)象：

 function Plugin(name,type){
    this.name = name;
    this.type = type;
 }

 var plugin = new Plugin("core",1);
 console.log(plugin.name);//core

使用apply或者call調(diào)用

javascript中每個(gè)函數(shù)都包含兩個(gè)方法：apply()和call()，這兩個(gè)方法非常強(qiáng)大，它們可以切換函數(shù)的上下文執(zhí)行環(huán)境，也就是說可以修改this綁定的對(duì)象。簡(jiǎn)單來說，這兩個(gè)方法可以用來設(shè)置函數(shù)的this，兩個(gè)方法都接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是運(yùn)行函數(shù)的作用域，第二個(gè)參數(shù)是參數(shù)對(duì)象，唯一的區(qū)別是apply第二個(gè)參數(shù)為參數(shù)數(shù)組（Array或者arguments）：

 function Plugin(name,type){
    this.name = name;
    this.type = type;
    this.debugs = function(name,type){
        console.log(this); //Object {name: "base", type: 3} 
    }
 }

 var plugin1 = new Plugin("core",1);
 var plugin2 = {name:"base",type:3};
 console.log(plugin1.debugs.call(plugin2));

通過上面的示例可以看出this值不再指向Plugin對(duì)象了，而是指向了plugin2的對(duì)象。

閉包中使用this

通常我們理解this對(duì)象是運(yùn)行時(shí)基于函數(shù)綁定的，全局函數(shù)中this對(duì)象就是window對(duì)象，而當(dāng)函數(shù)作為對(duì)象中的一個(gè)方法調(diào)用時(shí)，this等于這個(gè)對(duì)象。由于匿名函數(shù)的作用域是全局性的，因此閉包的this通常指向全局對(duì)象window：

var scope = "global";
var object = {
    scope:"local",
    getScope:function(){
        return function(){
            return this.scope;
        }
    }
}

調(diào)用object.getScope()()返回值為global而不是我們預(yù)期的local，在閉包中函數(shù)作為某個(gè)對(duì)象的方法調(diào)用時(shí)，要特別注意，該方法內(nèi)部匿名函數(shù)的this指向的是全局變量。參考上一篇閉包
這屬于 JavaScript 的設(shè)計(jì)缺陷，正確的設(shè)計(jì)方式是內(nèi)部函數(shù)的 this 應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上，為了規(guī)避這一設(shè)計(jì)缺陷，聰明的 JavaScript 程序員想出了變量替代的方法，只需要把外部函數(shù)作用域的this存放到一個(gè)閉包能訪問的變量里面即可，約定俗成，該變量一般被命名為 that：

var scope = "global";
var object = {
    scope:"local",
    getScope:function(){
        var that = this;
        return function(){
            return that.scope;
        }
    }
}
object.getScope()()返回值為local。