this指向总结

1.简述this的指向问题

关于this的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象

下面分几种情况讨论：

1.普通函数调用

没什么特殊情况，this指向全局对象window

let username='cn'；
//var 全局作用域，指向window
function fn(){
    alert(this.username);//undefined
}
fn();  //window.fn() //指向window

2.对象函数调用

哪个对象调用函数，this指向它本身，不管几级调用，this指向上一级。

window.b=2;
    let obj = {
      a:1,
      fn:function(){
        console.log(this.a); //1
        console.log(this.b); //undefine
      }
    }
    obj.fn(); //this指向obj本身

3.构造函数调用

let test = function(){
      this.name = 'test';
    }
    let con1 = new test();
    con1.name = 'con1';
    console.log(con1.name);//con1
    let con2 = new test(); 
    console.log(con2.name);//test

4.箭头函数调用

箭头函数里面没有this，所以箭头函数里面的this是继承外面的环境

let obj = {
      a:'1',
      fn: function(){
        setTimeout(()=>{
          console.log(this.a); //1
        });
      }
    }
    obj.fn()

2.三种改变this指向方法

call()、apply()、bind()；

共同点：第一个参数都为改变this的指针。若第一个参数为null/undefin时，this默认指向window。

call(无数个参数)

• 第一个参数：改变this指向。
• 第二个参数：实参。
• 使用后会自动执行函数。

function fn(a,b,c){
      console.log(this,a+b+c);
    }
    fn(); //this指向window
    fn.call(Object,1,2,3); //this指向Object对象，输出为6

apply(两个参数)

• 第一个参数： 改变this指向。
• 第二个参数： 数组(里面为实参)。
• 使用时会自动执行函数。

function fn(a,b,c){
      console.log(this,a+b+c);
    }
    fn(); //this指向window
    fn.apply(Object,[1,2,3]); //this指向Object对象，输出为6

bind(无数个参数)

• 第一个参数： 改变this指向。
• 第二个参数： 实参。
• 返回值为一个新的函数
• 使用时不会自动执行函数，需要手动调用返回新函数。

function fn(a,b,c){
      console.log(this,a+b+c);
    }
    fn(); //this指向window
    let ff=fn.bind('hhh',1,2,3); //this指向String，输出为6
    ff()

区别：

call、apply与bind区别：前两个可以自动执行，bind不会自动执行，需要手动调用.

call、bind与apply区别：前两个都有无数个参数，apply只有两个参数，而且第二个参数为数组

主要应用场景：

• call 经常做继承。
• apply 经常跟数组有关，比如借助于数学对象实现数组最大值最小值。
• bind 经常改变定时器内部this指向。