改变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>

 call  apply  bind总结

相同点：都可以改变内部的this指向。

区别点：

1、call和apply会调用函数，并且改变函数的内部this指向

2、call和apply传递的参数不一样，call传递参数arg1,arg2...形式，apply必须数组形式[arg]

3、bind不会调用函数，可以改变函数内部this指向

主要应用场景：

1、call经常做继承

2、apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值

3、bind不调用函数，但是还想改变this指向，比如改变定时器内部函数的this指向。比如点击事件要等到点击时再调用的情况。