替换this(3种)

最新推荐文章于 2023-12-02 17:49:28 发布

新时代农民工--小明

最新推荐文章于 2023-12-02 17:49:28 发布

阅读量570

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43376417/article/details/124927573

版权

js 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了JavaScript中call、apply和bind方法的使用，用于改变函数内部的this指向。通过实例展示了它们如何替换对象方法的上下文，并提供了临时替换和永久替换的示例。call和apply主要区别在于参数传递方式，bind则创建了函数的新副本，保留指定的this和参数。理解这些概念对于提升JavaScript编程能力至关重要。

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

文章目录

先准备数据

    const newobj={
      uname:'小明',
      age:22,
      jub(a,b,c){
        console.log(`I an ${this.uname} age ${this.age}`)
        console.log(a,b,c)
      }
    }
    const obj={
      uname:'小红',
      age:120
    }

call替换

临时替换，除了第一个参数会被替换为函数中的this, 其它参数都会被作为函数的参数传入
调用函数，替换this，传入参数

    newobj.jub.call(obj,1,2,3)

apply替换

临时替换，第一个参数替换为函数的this,数组会打散后作为函数的参数,只接收两个参数，多余的没用
调用函数，替换this,打散数组传入作为参数,所以第二参数必须是数组，传非array/object的参数会报错

    newobj.jub.apply(obj,[1,2,3])

bind替换

永久替换。注意，bind不调用函数，而是创建一个新的函数，并返回这个新的函数，需要自己手动调用，，
参数和上面的call一样第一个参数会作为这个新的函数的thsi,后面的作为参数传入

    const clone =newobj.jub.bind(obj,1,2,3)
    clone()