先看MDN中对于call的解释 call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。 语法 fun.call(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局 JavaScript中的`call`和`apply`是两种非常重要的函数调用方式,它们允许开发者改变函数内部`this`的指向,并且能以不同的形式传递参数。本文主要探讨这两个方法的使用和区别。 `call()`方法的基本用法是`fun.call(thisArg[, arg1[, arg2[, ...]]])`。`thisArg`参数会在`fun`函数执行时被用作`this`的值。`arg1, arg2, ...`则是传递给`fun`函数的参数列表。需要注意的是,如果`thisArg`是`null`或`undefined`,在非严格模式下,`this`会自动指向全局对象(在浏览器环境中即`window`对象)。同时,如果`thisArg`是一个原始值(如数字、字符串或布尔值),`this`会指向对应的包装对象。 举个例子,假设我们有以下代码: ```javascript var p = "456"; function f1() { this.p = "123"; } function f2() { console.log(this.p); } f2(); // 输出 "456",因为在全局作用域中调用,this指向全局对象 f2.call(f1()); // 输出 "123",因为f2中的this被设置为f1的返回值,即一个新对象 ``` 这里的`f1.call(thisArg)`实际上使得`f2`中的`this`指向了`f1`创建的对象,因此`f2`可以访问到`f1`的属性。 `call`和`apply`的主要区别在于传递参数的方式。`call`接受一系列单独的参数,而`apply`接受一个包含所有参数的数组。例如: ```javascript function f1(a, b, c) { console.log(a, b, c); } f1.call(null, 1, 2, 3); // 直接传入参数 f1.apply(null, [1, 2, 3]); // 通过数组传递参数 ``` 当使用`apply`时,数组的元素会被作为单独的参数传递。如果传递的不是数组,`apply`可能会导致错误。 `call`和`apply`在实现继承时也发挥着关键作用。例如: ```javascript function f1() { this.father = "father"; } function f2() { f1.call(this); // 这里的this指向f2,使f2继承f1的属性 this.child = "child"; } var test = new f2(); console.log(test.father); // 输出 "father" ``` 在这个例子中,`f2`通过`call`调用`f1`,使得`f1`的属性`father`被添加到了`f2`实例`test`上,实现了继承的效果。 关于参数的传递,`call`是逐一传入,而`apply`则接收一个数组。例如: ```javascript function f2(x, y, z) { console.log(this.p, x, y, z); } function f1() { this.p = "测试call"; } function f3() { this.p = "测试apply"; } f2.call(f1(), 4, 5, 6); // 输出 "测试call" 4 5 6 f2.call(f1(), [4, 5, 6]); // 输出 "测试call" 4 undefined undefined f2.apply(f3(), [4, 5, 6]); // 输出 "测试apply" 4 5 6 f2.apply(f3(), 4, 5, 6); // 报错,因为apply的第二个参数应该是数组 ``` 这段代码展示了`call`和`apply`处理参数的不同方式以及错误的参数格式可能导致的问题。 总结来说,`call`和`apply`是JavaScript中灵活控制`this`和参数传递的重要工具。它们在函数调用、对象继承和方法借用等方面具有广泛的应用。了解并熟练掌握这两者,能够提升JavaScript编程的效率和灵活性。
- 粉丝: 8
- 资源: 942
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助