JavaScript 绑定this

1.临时改变函数调用时this的指向

• 方法：call()与apply()，第一个参数为此次调用时的this指向，如果不传，则则等同于指定全局对象，后面的参数为函数原本的参数
• 区别：apply()方法传递参数时，使用数组进行包裹

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

• 注意：传入的this必须是一个对象，如果传入非对象，被自动转成包装对象

2.强制绑定函数的this

• 由来：一般来说，函数谁调用指向谁，但是bing()方法可以返回一个强制绑定了this的函数
• 语法：fn.bind(要绑定的this,传参)

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

• 传参：除了给函数绑定this，还可以绑定参数，参数绑定后再传参调用无效

<script>
    var multiplier = 5
    function getValue(num){
        return this.multiplier * num
    }

    //this指向全局 5*2 = 10
    console.log(getValue(2)) //10

    //同事绑定this和参数
    var getValue2 = getValue.bind({multiplier:6},4)
    //直接调用 6*4 = 24
    console.log(getValue2()) //24
    //传参无效
    console.log(getValue2(5)) //24
</script>

应用场景：Vue中methods所有的方法的this都是指向实例本身，这就需要用到bind()方法，比如在vue中对模版解析时，会对含有@click属性的元素进行事件监听，这个监听的回调方法需要使用bing()为其绑定this

<button @click="onClick" id="btn">test</button>

//目标元素
var btn = document.querySelector("#btn")
//为元素添加事件 并绑定this
btn.addEventListener('click',onClick.bind(vm))