js的基本知识 —— 函数的this指向

一、函数的this指向

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

1.全局定义的函数直接调用, 此时 this === window

2. 将这个函数放在一个对象内部的一个属性中, 此时 this === 调用者

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

4. 将这个函数当作 事件处理函数 此时 this === 事件源

        function fn() {
          console.log(this)
        }    
    // 1. 全局定义的函数直接调用
            fn()
    // 2. 将这个函数放在一个对象内部的一个属性中
            var obj = {
                a: 1,
                b: 'qwe',
                c: fn
            }
            console.log(obj.a)  // 1
            console.log(obj.c)  // 一个函数
            obj.c()  //返回调用者——obj       
     // 3. 将这个函数放在定时器中执行
            setTimeout(fn, 10)
      // 4. 将这个函数当作 事件处理函数
            var oDiv = document.querySelector('div')
            oDiv.onclick = fn

二、更改函数的 this 指向

1.call

• 这个方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
  • 语法: 函数名.call(新的 this 指向, 传递给函数本身的参数1, 传递给函数本身的参数2, 传递给函数本身的参数3, ...)

2.apply

• 这个方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
  • 语法: 函数名.apply(新的 this 指向, [传递给函数本身的参数1, 传递给函数本身的参数2, 传递给函数本身的参数3, ...])

3.bind

• 这个方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
  • 语法: var newFn = 函数名.bind(新的 this 指向); newFn(传递函数需要的参数)
• bind 和 call/apply 有一点小区别, 就是 bind 不会立即执行函数, 而是返回一个已经改变了 this 指向的函数

        var obj = { name: 'QF001' }
            function fn(a, b) {
                console.log(a, b)
                console.log(this)
                console.log('1.手动分割线=============')
            } 
  // 1. 正常调用
       fn(10, 20) 
  // 2. call
        fn.call(obj, 100, 200)//参数：新的 this 指向, 传递给函数本身的参数1, 传递给函数本身的参数2
  // 3. apply
        fn.apply(obj, [1000, 2000])
  // 4. bind
        var newFn = fn.bind(obj);
        newFn(10000, 20000)