JavaScript call,apply,bind用法

时间:2022-08-01 18:48:12

共同点:他们3个都是用来改变函数调用时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向

1.call与apply作用是一样的,都是改变此次函数调用时this的指向,但是在传参时有一些区别

<script>
    function Person(name){
        this.name = name
    }
    Person.prototype.say = function(f1,f2){
        console.log(`你好,我是${this.name},我的朋友是${f1}和${f2}`)
    }
    var p1 = new Person("张三")
    p1.say("李四","王五") //你好,我是张三,我的朋友是李四和王五

    var cat = {name:"喵喵"}
    // 本来cat是不能调用say()的,因为它本身没有这个属性
    // 但是我们不想去创建这个属性,想直接调用Person原型上面的say()
    // 我们可以使用 call 和 apply 调用这个say(),并改变某个函数运行时内部的this指向

    // call传参
    p1.say.call(cat,"威威猫","蓝猫") //你好,我是喵喵,我的朋友是威威猫和蓝猫
    // apply的参数放在数组中传入
    p1.say.apply(cat,["威威猫","蓝猫"]) //你好,我是喵喵,我的朋友是威威猫和蓝猫
</script>

2.bind()

bind返回一个强制绑定默认this的函数

<script>
    var name ="全局的name"
    function showName(){
        console.log(this.name)
    }
    showName() //"全局的name"
    var p = {
        name:"张三",
        showName: showName
    }
    p.showName() //"张三"
    // 将强制绑定默认this的函数返回
    var test_bind = showName.bind({name:"坂本"})
    test_bind() //"坂本"
</script>