修改this指向问题（call，apply，bind）

最新推荐文章于 2023-04-15 14:02:22 发布

hidden bug

最新推荐文章于 2023-04-15 14:02:22 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/hover_bug/article/details/120812180

本文介绍了JavaScript中this的指向问题，特别是在对象方法中如何通过call(), apply() 和 bind() 函数来改变this的指向。通过示例代码详细解释了这三个函数的使用方式和区别，并展示了它们在实际应用中的效果。强调了在函数改变this指向时，必须通过调用函数来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看代码

<script>
    var name = "张三";
    var age = 18;
    var obj = {
        name: "李四",
        age: this.age,
        myfun: function () {
            console.log(this.name + '----' + this.age);
        }
    }
    var aa = {
        name: "王五",
        age: 20
    }
    console.log(obj);
</script>

很显然打印当前obj里面的this.age指向的window对象，所以显示的会是name：李四，age：18

效果：

我们可以通过函数改变this指向，就比如让obj.myfun显示的下面aa对象里面的王五和20

注意：这下面三种方法都是通过方法function来改变的，如果你只写了键名没有写方法是不会有效的

第一种：通过call（）函数

call（）后面可以不跟参数，只有一个参数的话就直接修改值没有添加值

call（）第一个参数是修改this指向对象，后面才是添加的值

<script>
    var name = "张三";
    var age = 18;
    var obj = {
        name: "李四",
        age: this.age,
        myfun: function () {
            console.log(this.name + '----' + this.age);
        }
    }
    var aa = {
        name: "王五",
        age: 20
    }
    // console.log(obj);
    obj.myfun.call(aa);
</script>

这里就是只写了第一个参数就直接修改里面的值

效果：

call（）后面也可以跟参数，就需要用myfun形参来接收，如果后面有参数就需要通过逗号隔开

<script>
    var name = "张三";
    var age = 18;
    var obj = {
        name: "李四",
        age: this.age,
        myfun: function (a, b) {
            console.log(this.name + '----' + this.age + '----' + a + '----' + b);
        }
    }
    var aa = {
        name: "王五",
        age: 20
    }
    // console.log(obj);
    obj.myfun.call(aa, "男", "爱好：吃");
</script>

这里后面就跟了参数，就会把逗号后面的依次写入

效果：

第二种：通过apply（）函数

apply（）如果后面没有跟参数只有第一个参数的话是一样的，就是直接修改this指向对象，这是他们的共同点，不同点在于第二个参数，第三个参数，第n个参数是用一个数组包裹起来再写入进去的

<script>
    var name = "张三";
    var age = 18;
    var obj = {
        name: "李四",
        age: this.age,
        myfun: function (a, b) {
            console.log(this.name + '----' + this.age + '----' + a + '----' + b);
        }
    }
    var aa = {
        name: "王五",
        age: 20
    }
    // console.log(obj);
    //obj.myfun.call(aa, "男", "爱好：吃");
    obj.myfun.apply(aa,["女","爱好：玩"]);
</script>

效果：

如果不是通过数组写入的他就不会显示，会没有效果，

注意：错误演示

 obj.myfun.apply(aa,"女","爱好：玩");

错误效果：

如果跟call函数一样用逗号隔开的话就不会显示出来

通过bind（）函数

bind（）函数除了返回是一个函数以外其余的都和calll（）函数相同，简单来说就是后面还要加一个括号

<script>
    var name = "张三";
    var age = 18;
    var obj = {
        name: "李四",
        age: this.age,
        myfun: function (a, b) {
            console.log(this.name + '----' + this.age + '----' + a + '----' + b);
        }
    }
    var aa = {
        name: "王五",
        age: 20
    }
    // console.log(obj);
    //obj.myfun.call(aa, "男", "爱好：吃");
    // obj.myfun.apply(aa,["女","爱好：玩"]);
    obj.myfun.bind(aa, "男", "没有爱好")();
</script>

效果：