事件绑定中 this 的指向问题

html 代码：

<div class="container">
    <div id="aa" onclick="clicke()"></div>
</div>

1. 在 element 上绑定事件

此时 this 指向 全局变量

function clicke() {
  	console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
}

2. js 绑定 onclick 事件

此时的 this 指向 该元素

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

3. js 使用 addEventListener 绑定事件

此时的 this 指向 该元素, 注意： 在IE浏览器中，使用为 attachEvent(), this 指向全局变量

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

4. jquery 的 3种绑定 click 事件

此时的 this 均指向该元素

$('#aa').bind('click', function () {
    console.log(this); //  <div id="aa"></div>
})

$('#aa').click(function() {
    console.log(this); //  <div id="aa"></div>
})

$('#aa').on('click', function () {
    console.log(this); //  <div id="aa"></div>
})

注意： 在 ES6 箭头函数中，this 指向当前函数作用域的上层。在这里 即指向 全局
写个小例子：

var demo = function () {
    this.a = 'demo';
    this.c = {
        a: 'c',
        b: () => {return this.a},
        d: function () {return this.a}
    }
}

console.log(new demo().c.b()); // demo
console.log(new demo().c.d()); // c

jquery 具体代码：

$('#aa').bind('click', () => {
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
})

$('#aa').click(() => {
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
})

$('#aa').on('click', () => {
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
})