JS的函数的this指向

函数的this指向 (面试必问)

 * 每一个函数内部都有一个关键字 this
 *    重点：函数内部的this值和函数的调用有关，和函数的定义方式没有任何关系
 *    换句话说：函数内部的this指向谁，取决于函数的调用方式

    // 在全局定义一个函数，内部打印一下this
    function fn() {
      console.log(this)
    }
    // 1.全局定义的函数直接调用，此时 this === window
    fn()
    // 2.将这个函数放在一个对象内部的一个属性中,此时 this === 调用者
    var obj = {
      a: 1,
      b: 'qwe',
      c: fn
    }
    console.log(obj.a) //1
    console.log(obj.c) //一个函数
    obj.c() //{a: 1, b: 'qwe', c: ƒ}

    // 3.将这个函数放在定时器(两个定时器都一样)中执行，this === window
    setInterval(fn, 10)

    // 4.将这个函数当作事件处理函数 此时 this === 事件源
    var oDiv = document.querySelector('div')
    oDiv.onclick = fn

更改函数的this指向

 *刚才我们说的都是函数的基本调用方式里面的this指向
 *我们还有三个可以忽略函数本身的 this 指向转而指向其他地方的三个方法

• call
  • 这个方法是附加在函数调用后面使用，可以忽略函数本身的this指向
    • 语法：函数名.call(新的this指向,传递给函数本身的参数1,传递给函数本身的参数2,传递给函数本身的参数3...)
• apply
  • 这个方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
    • 语法：函数名.apply(新的this指向,[传递给函数本身的参数1,传递给函数本身的参数2,传递给函数本身的参数3...])
• bind
  • 这个方法是附加在函数调用后面使用，可以忽略函数本身的this 指向
  • bind和 call/apply有一点小区别，就是 bind 不会立即执行函数，而是返回一个已经改变了this 指向的函数
    • 语法:var newFn = 函数名.bind(新的this指向); newFn(传递函数需要的参数)
• 面试题:
  • 1. 请你简单描述一下函数内部的this指向问题
  • 2. 如何修改函数内部 this 指向?
  • 3. call / apply / bind 三个方法的区别

    var obj = { name: 'QF001' }
    function fn(a, b) {
      console.log(this)
      console.log(a, b)
      console.log('===============================')
    }
    // 1.正常调用
    fn(10, 20)

    // 2.call
    fn.call(obj, 100, 200)
    // 3.apply
    fn.apply(obj, [1000, 2000])
    // 4.bind
    var newFn = fn.bind(obj)
    newFn(10000, 20000)