一、理解什么是this

1. this是使用call()方法調(diào)用函數(shù)傳遞的第一個參數(shù)，它可以在函數(shù)調(diào)用時修改。

const obj = {
    name: 'xmf',
    fun1: function() {
        console.log(this.name)
    }
}
obj.fun1()  //xmf 第一種調(diào)用方法
obj.fun1.call(obj) //第二種調(diào)用方法，第一種方法是第二種方法的語法糖。將obj賦予fun1()函數(shù)的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. 普通函數(shù)中this的使用

規(guī)則：單獨在使用函數(shù)或者是在函數(shù)外調(diào)用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. 使用對象調(diào)用函數(shù)

規(guī)則：誰調(diào)用了函數(shù)，當前函數(shù)內(nèi)的this就指向誰。

const obj = {
    name: 'xmf',
    fun1: function() {
        console.log(this.name)
    }
}
//由于是obj調(diào)用了fun1()，所以當前函數(shù)的this就是obj，所以打印xmf
obj.fun1(); //xmf 

3. 構造函數(shù)中this

規(guī)則：構造函數(shù)在new之后都會返回一個對象，這個對象就是this。

function people(){
    this.name  = 'xmf'
}
let obj = new people();
console.log(obj.name) //xmf  

5. 箭頭函數(shù)的this執(zhí)行

規(guī)則：箭頭函數(shù)的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()函數(shù)的調(diào)用

規(guī)則：定時器中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內(nèi)層',this)  //箭頭函數(shù)寫定時器，與外層的this一致。
        },1000)
    }
}
obj.fun1();
obj.fun2();

//fun1 window
//fun2外層  obj
//fun2內(nèi)層 obj

三、call()、bind() 、apply() 的區(qū)別

相同點： 三者都可以改變this的指向。

先舉個例子，看看三個方法是如何調(diào)用的。

 var a = {
     name : "小王",
     say : function() {
          alert(this.name);                                
     }
}
 var b = {
     name : "小紅",
}

a.say();          //小王
b.say.call(b);    // 小紅
b.say.bind(b)(); //小紅 ，注意bind返回的是一個方法，需要加'()'調(diào)用
b.say.apply(b); //小紅 

從這個例子，我們可以看到call()與apply()相似，都是直接運行。而bind()是返回一個新的方法，如果要調(diào)用，需要后面加 '()'。下面再看看call()和apply()的區(qū)別。

 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","男"]); 

可以看到所有方法第一個參數(shù)都是給this的；call()和bind()后面的參數(shù)都是與say方法中是一一對應。
apply()后面是一個集合，集合與say方法中是一一對應。這就是他們的區(qū)別。