js改变this指向的三种方法

js改变this指向的问题

普通函数的this指向是windows
这里的this指向的是windows本身

 function fn(){
          console.log(this);
      }
      fn()

有三种方法改变this的指向

1： call方法
定义一个a函数，函数本身的this是指向windows
这里用call来改变this的指向，这样再次打印this指向的就是obj
call立即执行。简单理解为调用函数的方式，但是它可以改变函数的 this 指向 应用场景: 经常做继承.

语法：函数名.call(调用者, 参数1, …)

  function a(name,age){
            this.name = name
            this.age = age
            console.log(this);//打印的是obj这个对象
            console.log(this.aaa);//打印的是123123123
        }
      const obj = {
        aaa:123123123
      }
       a.call(obj,'张三',21)

2：apply方法
定义一个b函数，函数本身的this是指向windows
这里用apply来改变this的指向，这样再次打印this指向的就是[‘张三’,21]
apply 立即执行。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。应用场景: 经常跟数组有关系
语法：函数名.apply(调用者, [参数, …])

 function b(arr){
            this.arr = arr 
            console.log(this.arr);//打印的是['张三',21],至于为什么没有 aaa:123123123我也不清楚
        }
      const obj1 = {
        aaa:123123123
      }
       b.apply(obj1,['张三',21])

3：bind方法
定义一个c函数，函数本身的this是指向windows
这里用bind来改变this的指向，这样再次打印this指向的就是obj2
bind 懒执行,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数 应用场景:不调用函数,但是还想改变this指向

注意：返回的是一个函数，需要接受函数并需要手动调用

语法：函数名.bind(调用者, 参数, …)

function c(name,age){
    this.name = name
    this.age = age
    console.log(this);
 }
 const obj2 = { }
 const cc = c.bind(obj2,'李四',22)
     cc()

以上三种都是可以改变this指向的方法 但是有区别，call和apply
方法会自动调用函数，但是bind并不会，所以如果只想改变指向而不调用的话可以使用bind方法来改变指向