call，apply，bind的区别

时间: 2023-05-02 20:02:42 浏览: 106

Javascript中apply、call、bind的巧妙使用

在JavaScript中，函数是一等公民，它不仅可以作为对象来操作，还可以在运行时改变其上下文（Context），这使得JavaScript的函数非常灵活。在日常开发中，我们常常需要改变函数内部的this指向，以适应不同的上下文环境。JavaScript为此提供了三个方法：apply、call和bind，它们都能达到改变函数this指向的目的，但在使用方式上有所区别。我们来了解apply和call方法。两者的作用是完全相同的，都可以立即执行一个函数，并且允许我们指定函数内的this值。不同之处在于它们接收参数的方式。apply接受一个参数数组，而call则接受一系列参数列表。举个例子： ```javascript function sayHi() { console.log('Hi, I\'m ' + this.name); } var person = { name: 'Alice' }; sayHi(); // 输出: Hi, I'm undefined sayHi.call(person); // 输出: Hi, I'm Alice sayHi.apply(person); // 输出: Hi, I'm Alice ``` 在这个例子中，sayHi函数内部的this默认指向全局对象（在浏览器中是window），通过调用call或apply方法，并传入person对象，sayHi函数内部的this指向了person对象，从而能正确输出"Hi, I'm Alice"。当函数参数明确时，我们通常使用call方法，参数逐个传入；当函数参数不确定时，使用apply方法，将参数放入数组中传递。接下来，我们看一个数组之间追加元素的例子。假设我们有两个数组array1和array2，我们可以使用apply方法将array2的元素追加到array1中，如下： ```javascript var array1 = [12, "foo", { name: "Joe" }, -2458]; var array2 = ["Doe", 555, 100]; Array.prototype.push.apply(array1, array2); // array1的值变为[12, "foo", { name: "Joe" }, -2458, "Doe", 555, 100] ``` 此技巧可以扩展到任意数量的数组，通过apply方法我们可以将多个数组合并到一个数组中去。 apply和call还有一个常用的场景是调用JavaScript内置对象的方法。由于JavaScript中的Object.prototype.toString.call可以返回传入参数的准确类型，我们可以用此来检查一个对象是否为数组： ```javascript function isArray(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } ``` 当遇到JavaScript中的类数组对象时（如NodeList对象或者arguments对象），这些对象虽然具有length属性，但却不是真正的数组，因此它们没有Array对象的所有方法。我们可以通过apply方法结合slice方法将类数组对象转换为真正的数组，从而使用数组的方法。例如： ```javascript var domNodes = Array.prototype.slice.apply(document.getElementsByTagName("*")); // 现在domNodes是一个真正的数组，并可以使用Array的所有方法 ``` bind方法与apply和call方法稍有不同，它不会立即执行函数，而是返回一个新的函数，这个新函数的this被永久地绑定到了bind第一个参数的值。这个特性使得bind方法非常适合在需要记忆函数的this上下文时使用。 ```javascript var apple = { color: "red", say: function() { console.log("My color is " + this.color); } }; var banana = { color: "yellow" }; var bananaSay = apple.say.bind(banana); bananaSay(); // 输出: My color is yellow ``` 在这个例子中，通过bind方法，我们将apple对象的say方法中的this绑定到了banana对象。即使在其他地方调用bananaSay方法，其内部的this仍然指向banana对象。总结来说，apply、call和bind是JavaScript中处理函数上下文的强大工具，它们可以让我们更加灵活地控制函数内部的this指向。理解它们的用法可以帮助我们编写更加优雅和高效的代码。

"call，apply，bind的区别"。 call、apply、bind都是JavaScript中管理函数作用域的方法。 call()和apply()都可以将函数作为对象的方法来调用，即改变函数的执行环境。不同的是，call()方法接受的是若干个参数列表，而apply()方法接受的是一个包含多个参数的数组。 bind()方法则是在函数的执行环境绑定一个特定的this值，并返回一个新的函数，该新函数的this值被绑定为传递给bind()方法的第一个参数。同时，bind()方法也可以传递若干个参数作为新函数的参数。（注意：bind()方法并不会立即执行原函数，而是返回一个新的绑定了this值的函数）。因此，call()和apply()适用于需要在执行函数时动态改变函数的执行环境，而bind()适用于需要将函数的this值永久地绑定到一个特定的对象上。

阅读全文

call，apply，bind的区别

相关推荐

JavaScript call, apply, bind 深度解析与实战示例

理解JavaScript：this、apply、call与bind全面解析

call apply bind 区别

js call apply bind区别

j s的call apply bind区别

call apply bind的区别

call apply bind传参区别

call apply bind

原生JS实现 call apply bind

call apply bind的区别有哪些

call apply bind 有什么区别

call apply bind 代码

call apply bind实现

js call apply bind

重构call apply bind方法

手写call apply bind方法

call apply bind的使用示范

call apply bind的应用场景

请针对call apply bind举例

最新推荐

go 生成基于 graphql 服务器库.zip

基于JAVA+SpringBoot+Vue+MySQL的社区物资交易互助平台 源码+数据库+论文(高分毕业设计).zip

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

python实现生成一个窗口，其窗口题目为“二冷配水模型模型”，窗口中包含八个输入栏，三个按钮，每个按钮点击后会产生一个不同的页面

基于JAVA+SpringBoot+Vue+MySQL的社区物资交易互助平台源码+数据库+论文(高分毕业设计).zip

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序