Js中this的指向问题

一、理解什么是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方法中是一一对应。这就是他们的区别。