一、理解什么是this
1. this是使用call()方法调用函数传递的第一个参数，它可以在函数调用时修改。
const obj = {
name: 'xmf',
fun1: function() {
console.log(this.name)
}
}
obj.fun1() //xmf 第一种调用方法
obj.fun1.call(obj) //第二种调用方法，第一种方法是第二种方法的语法糖。将obj赋予fun1()函数的this
2. 也可以通过call()自定义this的值。
const obj = {
name: 'xmf',
fun1: function() {
console.log(this.name)
}
}
obj.fun1() //xmf
obj.fun1.call({name:'123'}) //123
二、this的不同指向
1. 普通函数中this的使用
规则：单独在使用函数或者是在函数外调用this，都指向 window。
console.log(this) //window
function fun1(name){
console.log(name) //xmf
console.log(this) //window
}
fun1('xmf'); // 相当于 window.fun1(); 所以是this指向window，请看实例2
2. 使用对象调用函数
规则：谁调用了函数，当前函数内的this就指向谁。
const obj = {
name: 'xmf',
fun1: function() {
console.log(this.name)
}
}
//由于是obj调用了fun1()，所以当前函数的this就是obj，所以打印xmf
obj.fun1(); //xmf
3. 构造函数中this
规则：构造函数在new之后都会返回一个对象，这个对象就是this。
function people(){
this.name = 'xmf'
}
let obj = new people();
console.log(obj.name) //xmf
5. 箭头函数的this执行
规则：箭头函数的this跟 外层this保持一致
let obj ={
xx: this,
name:'xmf',
fun1:function(){
console.log('fun1',this)
console.log('xx',this.xx) //xx window
},
fun2: () => {
console.log('fun2',this); //注意这里有人误认为外层的this是obj。这里我用xx属性证明了对象里面的this是window （对象属性的this 和 对象方法中的this是不同的）
},
}
obj.fun1(); //obj
obj.fun2(); //window
6. setTimeout()和setInterval()函数的调用
规则：定时器中this默认指向的是window
let obj ={
name:'xmf',
fun1:function(){
setTimeout( function(){
console.log('fun1',this) //普通方法定时器，相当于window.setTimeout(); 所以this指向window
},1000)
},
fun2:function(){
console.log('fun2外层',this)
setTimeout( () => {
console.log('fun2内层',this) //箭头函数写定时器，与外层的this一致。
},1000)
}
}
obj.fun1();
obj.fun2();
//fun1 window
//fun2外层 obj
//fun2内层 obj
三、call()、bind() 、apply() 的区别
相同点： 三者都可以改变
this的指向。
先举个例子，看看三个方法是如何调用的。
var a = {
name : "小王",
say : function() {
alert(this.name);
}
}
var b = {
name : "小红",
}
a.say(); //小王
b.say.call(b); // 小红
b.say.bind(b)(); //小红 ，注意bind返回的是一个方法，需要加'()'调用
b.say.apply(b); //小红
从这个例子，我们可以看到call()与apply()相似，都是直接运行。而bind()是返回一个新的方法，如果要调用，需要后面加 '()'。下面再看看call()和apply()的区别。
var a = {
name : "小王",
say : function(age,sex) {
alert(‘姓名=’+this.name+" 年龄="+age+" 性别=",sex);
}
}
var b = {
name : "小红",
}
b.say.call(b,"18","男");
b.say.bind(b,"18","男")();
b.say.apply(b,["18","男"]);
可以看到所有方法第一个参数都是给this的；call()和bind()后面的参数都是与say方法中是一一对应。
apply()后面是一个集合，集合与say方法中是一一对应。这就是他们的区别。
