this指向问题以及call、apply、bind的用法和区别

this指向问题

1.普通函数

1.1普通非匿名函数： 谁调用了函数或者方法，那么这个函数或者对象中的this就指向谁

let getThis = function () {
    
    
  console.log(this);
}

let obj={
    
    
  name:"Jack",
  getThis:function(){
    
    
    console.log(this);
  }
}
//getThis()方法是由window在全局作用域中调用的，所以this指向调用该方法的对象，即window
getThis();//window
//此处的getThis()方法是obj这个对象调用的，所以this指向obj
obj.getThis();//obj

1.2普通匿名函数： 匿名函数的执行具有全局性，则匿名函数中的this指向是window，而不是调用该匿名函数的对象

let obj = {
    
    
  getThis: function () {
    
    
     return function () {
    
    
       console.log(this);
     }
   }
}

obj.getThis()(); //window

上面代码中，getThi()方法是由obj调用，但是obj.getThis()返回的是一个匿名函数，而匿名函数中的this指向window，所以打印出window。如果想在上述代码中使this指向调用该方法的对象，可以提前把this传值给另外一个变量(_this或者that)：

let obj = {
    
    
  getThis: function () {
    
    
  	//提前保存this指向
  	let _this=this
  	return function () {
    
    
      console.log(_this);
  	}
  }
}

obj.getThis()(); //obj

2.箭头函数

箭头函数中的this是在函数定义的时候就确定下来的，而不是在函数调用的时候确定的；
箭头函数中的this指向父级作用域的执行上下文；（技巧：因为javascript中除了全局作用域，其他作用域都是由函数创建出来的，所以如果想确定this的指向，则找到离箭头函数最近的function，与该function平级的执行上下文中的this即是箭头函数中的this）
箭头函数无法使用apply、call和bind方法改变this指向，因为其this值在函数定义的时候就被确定下来。

2.1找得到最近的function： 首先，距离箭头函数最近的是getThis(){}，与该函数平级的执行上下文是obj中的执行上下文，箭头函数中的this就是下注释代码处的this，即obj。

let obj = {
    
    
  //此处的this即是箭头函数中的this
  getThis: function () {
    
    
    return  ()=> {
    
    
      console.log(this);
    }
  }
}
obj.getThis()(); //obj

2.2找不到function： 该段代码中存在两个箭头函数，this找不到对应的function(){}，所以一直往上找直到指向window。

//代码中有两个箭头函数，由于找不到对应的function，所以this会指向window对象。
let obj = {
    
    
  getThis: ()=> {
    
    
     return  ()=> {
    
    
       console.log(this);
     }
   }
}
obj.getThis()(); //window

call、apply和bind

作用：
都可以改变函数内部的this指向。

区别点：

call 和 apply 会立即调用函数，并且改变函数内部this指向。
call 和 apply 传递的参数不一样，call 传递参数arg1,arg2…形式， apply 必须数组形式[arg]
bind 不会立即调用函数，可以改变函数内部this指向，传递参数arg1,arg2…形式。

主要应用场景：

call 经常做继承。
apply 经常跟数组有关系，比如借助于数学对象实现数组最大值最小值。
bind 不调用函数，但是还想改变this指向，比如改变定时器内部的this指向。

call方法：
改变函数内部this指向，call()方法调用一个对象，简单理解为调用函数的方式，它可以改变函数的this指向。
写法：fun.call(thisArg, arg1, arg3, …) ， thisArg为想要指向的对象，arg1,arg3为参数
call 的主要作用也可以实现继承

  function Person(uname, age) {
    
    
    this.uname = uname;
    this.age = age;
  }
  function Son(uname, age) {
    
    
    Person.call(this, uname, age);
  }
  var son = new Son("zhang", 12);
  console.log(son);

apply方法：
apply()方法调用一个函数，简单理解为调用函数的方式，它可以改变函数的this指向。
写法：fun.apply(thisArg, [argsArray])，thisArg:在fun函数运行时指定的this值，argsArray:传递的值，必须包含在数组里面，返回值就是函数的返回值，因为他就是调用函数。
apply的主要应用，比如可以利用apply可以求得数组中最大值

const arr = [1, 22, 3, 44, 5, 66, 7, 88, 9];
const max = Math.max.apply(Math, arr);
console.log(max);

bind方法：
bind()方法不会立即调用函数，但是能改变函数内部this指向
写法：fun.bind(thisArg, arg1, arg2, …)，thisArg:在fun函数运行时指定的this值，arg1,arg2:传递的其他参数。
返回由指定的this值和初始化参数改造的原函数拷贝

var o = {
    
    
    name: "lisa"
};
function fn() {
    
    
    console.log(this);
}
var f = fn.bind(o);
f();

bind应用
如果有的函数我们不需要立即调用，但是又需要改变这个函数的this指向，此时用bind再合适不过了，比如定时器的使用。

const btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
    
    
    btns[i].onclick = function() {
    
    
      this.disabled = true;
      setTimeout(
        function() {
    
    
          this.disabled = false;
        }.bind(this),
        2000
      );
    };
}