call和apply和bind的区别以及this指向个人理解

相同点: 改变函数调用的this指向

不同点

1.参数不同, call的第一个参数是改变this的对象, 后面参数是以第二第三顺序排列, 而apply的第二个参数是一个数组,最后是bind只传this对象一个参数

2. 执行不同: call和apply是立即执行,而bind不会立即执行,只是绑定this二级,返回function

3.绑定this次数不同, call和apply是一次, 而bind是一直绑定

最后this的指向问题

this的指向是谁调用函数就指向谁,没有调用者的情况默认绑定window,但是在箭头函数出来后就有了区别, 因为箭头的函数没有作用域, 箭头函数的this指向定义时所在父级作用域内,不是普通函数调用时才确定this指向

call和apply和bind三个改变this指向的时候,需要注意箭头函数, 如果call绑定的时候是在返回的箭头函数上时无效,不能改变this指向

本文属于个人对this和改变this的理解, 如有纰漏，疏忽，或者误解，欢迎各位小伙伴留言指出。

习题练习

var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person2 = { name: 'person2' }
// 开始题目:
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
// 思路
person1.foo1(): 隐式绑定, this指向发起调用的对象person1
person1.foo1.call(person2): 显示绑定, this指向person2
person1.foo2(): foo2是一个箭头函数, 箭头函数中没有this, 会向上级作用域寻找, 上级作用域this指向window
person1.foo2.call(person2): foo2是一个箭头函数, 对箭头函数绑定this是不生效的, 依然会去上一层作用域寻找this, this指向window
person1.foo3()(): 默认绑定, 调用foo3返回一个function定义的独立函数, 在对独立函数调用, this指向window
person1.foo3.call(person2)(): 默认绑定, 通过显式绑定调用foo3, 再对foo3返回的函数独立调用, this指向window
person1.foo3().call(person2): 显式绑定, 通过隐式绑定调用foo3, 在对foo3返回的函数显式绑定person2, this指向person2
person1.foo4()(): 通过隐式绑定调用 foo4, 调用foo4返回一个箭头函数, 箭头函数的this会向上级寻找, this指向person1
person1.foo4.call(person2)(): 通过显式绑定调用foo4, 调用foo4返回一个箭头函数, 箭头函数的this会向上级寻找, this指向person2
person1.foo4().call(person2): 通过隐式绑定调用foo4, 在对返回的箭头函数进行显式绑定, 由于箭头函数中并不存在this, 所以显式绑定call并不生效, 箭头函数的this会向上级寻找, this指向person1