JavaScript 中 call()、apply()、bind() 的用法

JavaScript 中 call()、apply()、bind() 的用法

  1. call()、apply()、bind() 都是用来重定义 this 这个对象的

  2. 对比call 、bind 、 apply 传参情况下

简而言之：call和apply都是改变this的指向，但是call后面连接字符串（ff.study.call(db, 1, 2)），apply连接数组（ff.study.apply(db, [1, 2])）

<script>
class Fa {
    constructor(a) {}
    study(a, b) {
        console.log(this);
        return a + b;
    }
}
var db = {
    a: 2
}
var ff = new Fa();
console.log(ff.study());
console.log(ff.study.call(db, 1, 2));
console.log(ff.study.apply(db, [1, 2]));
</script>

bind

bind()可以改变函数中this指向 但它不会调用函数
返回由指定this值和初始化参数改造的原函数拷贝

<script>
class Fa {
    constructor(a) {}
    study(a, b) {
        console.log(this);
        return a + b;
    }
}
var db = {
    a: 2
}
var ff = new Fa();
console.log(ff.study.bind(db));
var ff1 = ff.study.bind(db, 1, 2)
console.log(ff1());
</script>
bind小练习
<body>
<button id="btn">接收验证码</button>

<script>
    var btn = document.querySelector('#btn');
    var num = 30;
    btn.addEventListener('click', function() {
        this.innerHTML = "剩余时间" + num + "s";
        setInterval(function() {
            num--;
            this.innerHTML = "剩余时间" + num + "s";
        }.bind(this), 1000);
    })
</script>

</body>
posted @ 2020-12-04 14:57  qqaazzhf  阅读(90)  评论(0)    收藏  举报