什么是this？

(1).JS中的this代表的是當(dāng)前行為的執(zhí)行主體。

(2).this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰，實(shí)際上this的最終指向的是那個調(diào)用它的對象。

接下來我會總結(jié)幾種情況。基本上涵蓋了所有的this指向問題。

1.*在函數(shù)執(zhí)行時(shí)候，首先要看函數(shù)前面是否有" . ",有的話。" . "前面是誰this就指向誰，沒有的話this就指向window

function fn(){
    var user = "浮云先生";
    console.log(this.user); //undefined
    console.log(this); //Window
}
fn(); // 函數(shù)fn()執(zhí)行前面沒有" . ",則this指向window。但是函數(shù)fn是私有作用域，window下沒有user。所以this.user為undefined

解釋：函數(shù)fn()執(zhí)行前面沒有" . ",則this指向window。但是函數(shù)fn是私有作用域，window下沒有user。所以this.user為undefined。

再看一個例子：

function fn() {
    console.log(this);
};
var obj = {
    fn: fn
};
fn(); //--->window
obj.fn(); //--->obj
function fn2() {
    fn();//--->window
};
fn2();

解釋：首先看函數(shù)fn()前面沒有" . ",則this指向window。 obj.fn()，前面是obj，則this指向obj，第三次調(diào)用fn()實(shí)在函數(shù)fn2()中，但是前面沒有" . "，則this指向window。

是不是感覺其實(shí)this很簡單！

注意：這一有一種特殊情況：

function fn() {
    console.log(this);
};
var obj = {
    fn: fn
};
var a = obj.fn;
a(); // --->window

可以看到這里this指向的是window。this永遠(yuǎn)指向的是最后調(diào)用它的對象，也就是看它執(zhí)行的時(shí)候是誰調(diào)用的，函數(shù)fn賦值給變量a的時(shí)候并沒有執(zhí)行,執(zhí)行的時(shí)候是a(). 所以還是上面那句話a前面并沒有" . "，所以最終指向的是window。

2.*自執(zhí)行函數(shù)中的window永遠(yuǎn)指向window

~function() {
    console.log(this); //---> window
}()

3.*給html中某個元素綁定一個事件方法，當(dāng)事件觸發(fā)的時(shí)候，執(zhí)行對應(yīng)的方法，this指向當(dāng)前執(zhí)行方法的元素。

假設(shè)現(xiàn)在有一個id為odiv的div標(biāo)簽元素。

document.getElementById('odiv').onclick = function() {
    console.log(this); // ---> #odiv
}

可以看到this指向當(dāng)前元素odiv。

在ie6—8下，如果使用DOM2事件綁定，方法執(zhí)行的時(shí)候，里面的this部署當(dāng)前元素而是window

document.getElementById('odiv').attachEvent('onclick',function(){
      // this=>window
})

4.*在構(gòu)造函數(shù)或者構(gòu)造函數(shù)原型對象中this指向構(gòu)造函數(shù)的實(shí)例

function fn(){
    console.log(this);//---> a
    this.name = "浮云先生";
}
var a = new fn();
console.log(a.name); //浮云先生

我們這里用變量a創(chuàng)建了一個Fn的實(shí)例（相當(dāng)于復(fù)制了一份Fn到對象a里面），此時(shí)僅僅只是創(chuàng)建，并沒有執(zhí)行，而調(diào)用這個函數(shù)Fn的是對象a，那么this指向的自然是對象a，那么為什么對象a中會有name，因?yàn)槟阋呀?jīng)復(fù)制了一份Fn函數(shù)到對象a中，用了new關(guān)鍵字就等同于復(fù)制了一份。

注意：當(dāng)this遇到return時(shí)

//1
function fn() {  
    this.user = '浮云先生';  
    return {};  
}
var a = new fn();  
console.log(a.user); //undefined


//2
function fn() {  
    this.user = '浮云先生';  
    return function(){};
}
var a = new fn();  
console.log(a.user); //undefined


//3
function fn() {  
    this.user = '浮云先生';  
    return {
        user: '小明'
    };  
}
var a = new fn();  
console.log(a.user); //小明


//4
function fn()  {  
    this.user = '浮云先生';  
    return undefined;
}
var a = new fn();  
console.log(a.user); //浮云先生


//5
function fn() {  
    this.user = '浮云先生';  
    return 1;
}
var a = new fn;  
console.log(a.user); //浮云先生

通過上面代碼可以發(fā)現(xiàn)：

如果返回值是一個對象（引用類型值），那么this指向的就是那個返回的對象，如果返回值不是一個對象(變量)那么this還是指向函數(shù)的實(shí)例。

但是這里需要注意一個特殊情況 null，null也是對象，但是在這里this還是指向那個函數(shù)的實(shí)例，因?yàn)閚ull比較特殊。

function fn() {  
    this.user = '浮云先生';  
    return null;
}
var a = new fn();  
console.log(a.user); //浮云先生

覺得寫的不錯的小伙伴點(diǎn)贊加關(guān)注哦！ (=?ω?=)