样式代码

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

body代码

    <div></div>

1.函数的this指向

每一个函数内部都有一个关键字是 this

重点: 函数内部的 this 只和函数的调用有关, 和函数的定义方式没有任何关系

换句话说: 函数内部的 this 指向谁, 取决于函数的调用方式

在全局定义一个函数, 内部打印一下 this

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

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

    fn()

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

    var obj = {
        a: 1,
        b: 'qwe',
        c: fn
    }
    console.log(obj.a)  // 1
    console.log(obj.c)  // 一个函数
    obj.c()

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

    setTimeout(fn, 10)

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

    var oDiv = document.querySelector('div')
    oDiv.onclick = fn

2.更改函数的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(传递函数需要的参数)

代码

     var obj = { name: 'QF001' }
    function fn(a, b) {
        console.log(a, b)
        console.log(this)
        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)