call/apply/bind的区别

Posted 2021-05-29 郭郭郭牧鑫

在js的书写中不少东西牵扯到this指向的问题，关于这个问题，我们有三个属性可以改变this的指向

1.作用

1. 他们的作用都是改变函数内部的this。
2. 这三个函数都是函数对象的方法，也就是说只有函数才可以直接调用这些方法

区别

     call()/apply()的比较

1. 不同：在于第二个参数，call第二个参数是一个一个的数据，apply第二个参数是数组。
2. 相同：但都是指向this的第一个参数

     call()/apply()----->bind()

1. bind: bind只修改this指向，需要加（）才能执行

应用场景：伪数组借用数组方法  arguments

function fn() {
    console.log(arguments);
    // 要往arguments集合中追加一个数100；
    // arguments.push(100);
    // Array.prototype.push.call(arguments, 100)

    // 往arguments集合中追加多个值，[100,200,300]
    // Array.prototype.pop.call(arguments)
    [].pop.bind(arguments)();
     console.log(arguments);
   }

fn(3,4,5)

 调用函数的this指向

  var name = '王五'

  var obj = {
    name: '张三',
    fn() {
      console.log(this.name)
    }
  }

  var pox = {
    name: '李四'
  }
  obj.fn.apply(pox);//输出的结果为李四
  obj.fn.call(pox);//输出的结果为李四
  obj.fn.bind(pox)();//输出的结果为李四

如果我们使用的fn是一个箭头函数的话，那么输出结果，则指向它的父级作用域，也就是王五，并且使用call，apply，bind是无法将它的this指向改变的