JavaScript call,apply,bind用法

Posted 2022-11-30 orochiz-

共同点：他们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>