1.給元素的某個事件行爲綁定方法,事件觸發,方法執行,此時方法中的this通常都是當前元素自己:app
<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:this
function fn() { console.log(this); } let obj = { name: 'OBJ', fn: fn }; fn(); //window obj.fn(); //{name: 'OBJ',fn: fn}
3.構造函數執行(也便是new執行),函數中的this是當前類的實例:spa
function F() { console.log(this); } let f = new F; // F {}
4.箭頭函數中沒有this,所用到的this都是其上下文中的this(或者說是上級上下文):code
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的指向:blog
let obj = { fn: function(){ console.log(this); } } obj.fn(); //obj obj.fn.call(12); //12