当前位置: 首页 > Web前端 > HTML

理解JS中call、apply、bind方法的作用和区别

时间:2023-03-28 14:39:02 HTML

call、apply、bind方法我们常说的call()、apply()、bind()方法的目的是改变this函数运行时的指向。首先,这到底是什么?下面的列表简要描述了词法作用域和动态作用域之间的区别。虽然JS没有动态作用域。但是这个机制与动态作用域非常相似。因此,我们在调用函数的时候也间接调用了call、apply、bind这三个方法。更改函数运行的上下文。此外,我们还有很多其他的方法来确定这个点。作用域域名不同于词法作用域。在编写代码或定义时确定。注意声明函数的位置。动态作用域是在运行时确定的,注意函数被调用的地方。参数和性能略有不同。constname='杰瑞';constme={name:'Emon',};functionintroduce(habbit1,habit2){console.log(`我叫${this.name},我喜欢${habit1},${habit2}`);}introduce('basketball','football');//我叫Jerry,我喜欢篮球、足球callMethodtheFun.call(thisArg,arg1,arg2,...);//调用theFun,this指向thisArg,"arg1,arg2,..."是传递给theFun的参数introduce.call(me,"coding","sleeping");//我叫Emon,我喜欢编码,睡觉我们也可以用ES6的解构赋值方式传参:theFun.call(thisArg,...[arg1,arg2,...]);//参数“[arg1,arg2,...]”通过扩展语法(Spread语法)“...”进行扩展,然后传递参数introduce.call(me,...["coding","sleeping"]);//我叫Emon,我喜欢编码,睡觉applyMethod:theFun.apply(thisArg,[arg1,arg2,...]);//给theFun传参的方式是通过数组"[arg1,arg2,...]"introduce.apply(me,["coding","sleeping"]);//我叫Emon,我喜欢编码,sleepingbind方法bind()在传参方面和call()是一样的。但不同的是:call()返回函数调用的结果,而bind()返回绑定到this的函数。我经常使用bindFun中的bind方法constbindButtonDom=document.getElementById("bind-button");bindButtonDom.addEventListener("click",introduce.bind(me,"bindfunction","sleeping")//bind方法本身返回一个绑定this的方法);