改变this指向——call、bind、apply

JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题，常用的有bind、call、apply三种方法

1、call方法

第一个参数传递this指向的对象，后面的参数传递值

// call
        var a = 4
        var b = 5
        var o = {
            name: '你是哈包吗',
            a: 3,
            b: 4
        }
        function fn(a, b) {
            console.log(this)
            console.log(a + b)
            console.log(this.a + this.b)
        }
        fn(1, 2) // Window 3 9
        fn.call(o, 1, 2) // {name:'你是哈包吗', a:3, b:4} 3 7

call 第一个可以调用函数第二个可以改变函数内的this指向

call 的主要作用可以实现继承

2、apply

第一个参数传递this指向的对象，第二个参数为数组，数组里面放要传递的值

（1）也是调用函数第二个可以改变函数内部的this指向

（2）但是他的参数必须是数组（或者伪数组）

3、bind

bind区别于call不会调用函数，只是绑定，返回由指定的this值和初始化参数改造的原函数拷贝

第一个参数传递this指向的对象

（1）不会调用原来的函数可以改变函数内部的this指向

（2）返回的是原函数改变this之后产生的新函数

// bind
        var o = {
            name: '你是哈包吗'
        }
        function fn(a, b) {
            console.log(this)
        }
        var f = fn.bind(o, 1, 2)
        f() // {name: '你是哈包吗'}

（3）如果有的函数我们不需要立即调用，但是又想改变这个函数的this指向，此时用bind

（4）应用场景：我们有一个获取验证码按钮，当我们点击了之后，就禁用这个按钮，10秒钟之后开启这个按钮

<button>获取验证码</button>
    <script>
        var btn1 = document.querySelector('button')
        btn1.onclick = function () {
            this.disabled = true
            var time = 10
            var myVar = setInterval(function () {
                time -= 1
                this.innerHTML = `获取验证码(${time}s)` // 在计时器里的this指向window，但是通过bind改变this指向后，this指向了btn1按钮
                if(time === 0)clearInterval(myVar)
            }.bind(this), 1000)
            setTimeout(function () {
                this.disabled = false
                this.innerHTML = `获取验证码`
            }.bind(this), 10000)
        }
    </script>