什么是this
在JavaScript中，this关键字是指当前正在执行代码的对象。通常情况下的this指向如下：
- 默认绑定
- 默认情况下，this指向全局对象
- 在函数中，当不处于严格模式时，this指向全局对象
- 在函数中，在严格模式下this为undefined
- 隐式绑定
- 如果一个函数中有this，这个函数又被上一级的对象所调用，那么this指向的就是上一级的对象
- this指向的是被调用方法的上一级对象，而不是它的最外层对象
- this 是在运行时被确定，而不是在定义时被确定
- 在方法的参数中传入函数时也需要特别注意，传入函数的 this 也指向其方法被调用的上一级对象
- 显示绑定
- 使用了bind()方法来显式修改this的指向，与bind()方法有类似功能的还有call()方法和apply()方法
- new绑定
- 如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例
- 在箭头函数中，this指向函数声明时所在作用域下的this的值
- 在事件处理程序中，this绑定到放置侦听器的元素
默认绑定
Global
在全局执行上下文中，this指的是全局对象
console.log(this === window); // true
Function
如果不在严格模式下，则函数this引用全局对象
function f() {
return this;
}
console.log(f() === window); // true
当在严格模式下，一个函数的this将是undefined，但显示的用window调用除外
'use strict';
function f() {
return this;
}
console.log(f()); // undefined
console.log(window.f() === window); // true
隐式绑定
function f() {
console.log(this.a);
}
var obj = {
a: 2,
f: f,
};
var obj1 = {
a: 3,
obj: obj,
};
var func = obj.f;
var a = "Global";
function doFunc(fn) {
fn();
}
obj.f(); // 2 // 如果一个函数中有this，这个函数又被上一级的对象所调用，那么this指向的就是上一级的对象
obj1.obj.f(); // 2 // this指向的是被调用方法的上一级对象，而不是它的最外层对象
func(); // Global // this 是在运行时被确定，而不是在定义时被确定
doFunc(obj.f); // Global // 在方法的参数中传入函数时也需要特别注意，传入函数的this也指向其方法被调用的上一级对象
显示绑定
使用了bind()方法来显式修改this的指向
function f() {
console.log(this.a);
}
var obj = {
a: 2,
f: f,
};
var a = "Global";
setTimeout(obj.f.bind(obj), 100); // 2
new绑定
如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例
function fn() {
this.user = "Tom";
return 1; //或 return undefined
}
var fun = new fn();
console.log(fun.user); // Tom
function fn() {
this.user = "Tom";
return {}; //或 return function(){}
}
var fun = new fn();
console.log(fun.user); // undefined
箭头函数中的this
this是静态的，始终指向函数声明时所在作用域下的this的值，call()和apply()都不能改变指针的指向
function who() {
console.log(this.name);
}
let who1 = () => {
console.log(this.name);
};
window.name = "Tom";
const name1 = {
name: "Jerry",
};
//直接调用
who(); // Tom
who1(); // Tom
//使用call()
who.call(name1); // Jerry
who1.call(name1); // Tom
事件处理程序中的this
this绑定到放置侦听器的元素
const el = document.getElementById('my-el');
el.addEventListener('click', function() {
console.log(this === el); // true
});
==================================
