JS中this的幾種狀況

1.給元素的某個事件行爲綁定方法，事件觸發，方法執行，此時方法中的this通常都是當前元素自己：

<div id="div"></div>

div.onclick = function() {
    console.log(this); //=><div id="div"></div>
};

div.addEventListener('click', function () {
    console.log(this);  //=><div id="div"></div>
}, false);

這裏邊有個特殊狀況就是DOM2級綁定事件

div.attachEvent('onclick',function anonymous(){
    console.log(this); //=>window
});

 

2.普通函數執行，它裏邊的this是誰，取決於方法執行前面是否有「.」，有的話，「.」前面是誰this就是誰，沒有的話而且是在非嚴格模式下this就是window，嚴格模式下是undefined：

function fn() {
    console.log(this);
}
let obj = {
    name: 'OBJ',
    fn: fn
}; 
fn(); //window
obj.fn(); //{name: 'OBJ',fn: fn}

 

3.構造函數執行(也便是new執行)，函數中的this是當前類的實例：

function F() {
    console.log(this);
}
let f = new F; // F {}

 

4.箭頭函數中沒有this，所用到的this都是其上下文中的this(或者說是上級上下文)：

let obj = {
    fn: () => {
        console.log(this);            
    }
}
obj.fn(); //window

let obj = {
    fn: function () {
        setTimeout(_ => {
            console.log(this);    
        }, 1000);
    }
};
obj.fn(); //obj

 

5.基於call/apply/bind能夠改變函數中this的指向：

let obj = {
    fn: function(){
        console.log(this);
        }
}
obj.fn(); //obj
obj.fn.call(12); //12