JavaScript 中 call()、apply()、bind()用法 作者：马育民 • 2024-11-22 21:47 • 阅读：10018 # 说明 `call()`、`apply()`、`bind()` 会改变 `this` # 准备代码 ### 定义 lilei 对象 ``` const lilei = { name:"李雷", age:20, say:function(){ console.log("我叫"+this.name+"，我今年"+this.age+"岁") }, sum:function(x,y){ return x + y } } ``` 调用 `say()` 方法： ``` lilei.say() ``` 执行结果： ``` 我叫李雷，我今年20岁 ``` ### 定义 hanmeimei 对象 这里定义 `hanmeimei` 对象： ``` const hanmeimei = { name:"韩梅梅", age:19 } ``` # call() 用法 ### 基本用法 此处调用 `lilei.say.call()` 方法，并传入 `hanmeimei` 对象，此时 `say()` 中的 **`this` 表示 `hanmeimei` 对象**： ``` lilei.say.call(hanmeimei) ``` 执行结果如下： ``` 我叫韩梅梅，我今年19岁 ``` ### 传参数用法 此处调用 `lilei.sum.call()` 方法，除了传入 `hanmeimei` 对象（此时 `sum()` 中的 **`this` 表示 `hanmeimei` 对象**），后面还传入 `1` 和 `3` ，就是正常传值： ``` lilei.sum.call(hanmeimei,1,3) ``` 执行结果： ``` 韩梅梅 计算结果：4 ``` # apply() 用法 ### 基本用法 与 `call()` 用法相同 此处调用 `lilei.say.apply()` 方法，并传入 `hanmeimei` 对象，此时 `say()` 中的 **`this` 表示 `hanmeimei` 对象**： ``` lilei.say.apply(hanmeimei) ``` 执行结果如下： ``` 我叫韩梅梅，我今年19岁 ``` ### 传参数用法 此处调用 `lilei.sum.apply()` 方法，除了传入 `hanmeimei` 对象（此时 `sum()` 中的 **`this` 表示 `hanmeimei` 对象**），后面还传入 **数组 `[1,3]`** ： ``` lilei.sum.apply(hanmeimei,[1,3]) ``` 执行结果： ``` 韩梅梅 计算结果：4 ``` # bind ### 基本用法 与 `call()` 用法类似，但是返回的是 **函数对象** ``` console.log( typeof lilei.say.bind(hanmeimei) ) ``` 执行结果： ``` function ``` 因为返回的是函数对象，所以调用时，需要在后面再加上 `()`，如下： ``` lilei.say.bind(hanmeimei)() ``` 传入 `hanmeimei` 对象，此时 `say()` 中的 **`this` 表示 `hanmeimei` 对象** 执行结果如下： ``` 我叫韩梅梅，我今年19岁 ``` ### 传参数用法 此处调用 `lilei.sum.bind()` 方法，除了传入 `hanmeimei` 对象（此时 `sum()` 中的 **`this` 表示 `hanmeimei` 对象**），后面还传入 `1` 和 `3` ，就是正常传值： **提示：** 最后要加上 `()`，因为 `bind()` 返回的是函数对象 ``` lilei.sum.bind(hanmeimei,1,3)() ``` 执行结果： ``` 韩梅梅 计算结果：4 ``` # 总结 ### call()、apply() 相同点 `call()` 、`apply()`、`bind()` ，第一个参数是 **对象** 类型，是 `this` 的指向对象 ### call()、apply() 区别 除了第一个对象，传入后面对象时： - call()：是正常传值 - apply()：将所有参数放在数组中，然后传入数组 ### bind() `bind()` 返回函数对象，除此之外，与 `call()` 相同 参考： https://www.runoob.com/w3cnote/js-call-apply-bind.html 原文出处：http://www.malaoshi.top/show_1GW5Zx3xSTv.html