浅谈bind、call、apply区别,使用方法及场景

谈到bind、call、apply,首先想到的是改变this全局上下文指向,但三者的区别,就自己的使用浅谈心得。

首先,直接调用三个方法并打印,获取直观对比,demo代码如下:

<script>
    var objA = {
        name: '小王',
    }
    var objB = {
        log: function () {
            return this.name
        }
    }
    console.log(objB.log.bind(objA))
    console.log(objB.log.call(objA))
    console.log(objB.log.apply(objA))
</script>

控制台输出结果如下:

在调用bind方法改变this指向时,执行的方法不会执行,而调用call方法和apply方法时,在改变this指向的同时,执行的方法也会执行;

除了以上这一直观的区别外,在使用时传入入参格式也有区别,demo代码如下:


<script>
    var objA = {
        name: '小王',
    }
    var objB = {
        log: function (age) {
            return `${this.name},年龄${age}岁`
        }
    }
    console.log(objB.log.bind(objA, 20)())
    console.log(objB.log.call(objA, 20))
    console.log(objB.log.apply(objA, [ 20 ]))
</script>

控制台输出如下:

使用bind方法和call方法时入参格式为逗号分割的入参,使用apply方法时入参格式为一个数组,入参依次为数组元素,多个入参就在这一数组中依次添加;

依据个人开发习惯:

在绑定方法时多使用bind方法;

在调用其他实例方法时,多使用call方法或apply方法;

猜你喜欢

转载自blog.csdn.net/Beamon__/article/details/81612427