call和apply理解及使用方法

本文解析了JavaScript中call与apply函数的区别及使用方法。通过对比两者传递参数的不同形式,加深了对这两个函数的理解。

call和apply遇见就胆怯,追究到底还是由于对其了解不透彻。今天读某个框架源码时,大大的伤了一把自尊,call和apply用法模糊,导致读源码逻辑不清楚。翻出犀牛书,扎进去,189页-190页读几遍,总结如下:

call用法:

f.call(o,para1,para2,....);

apply用法:

f.apply(o,[para1,para2,....]);

说明:

1、f:是要调用的函数

2、o:是 f 函数中this指向的对象

3、para1,para2,...:是调用 f 函数时传入的实参

4、apply和call区别:传入 f 中 实参形式不同,call实参形式是o之后的所有以逗号分隔的参数,apply实参形式是o之后的一个数组。

5、所谓的call或apply返回值:是 f 函数的返回值


如有不正确之处,欢迎指正。


### `call` `apply` 的区别与用法 在 JavaScript 中,`call` `apply` 是函数对象的两个方法,它们用于显式指定函数执行时的 `this` 值。两者的主要区别在于参数传递的方式不同。 #### `call` 方法 `call` 允许在调用函数时指定 `this` 值,并将其他参数依次传递给函数。其基本语法为: ```javascript function.call(thisArg, arg1, arg2, ...) ``` 例如,可以通过 `call` 来模拟继承: ```javascript function Person(age, sex) { this.age = age; this.sex = sex; } Person.prototype.sayHi = function(x, y) { console.log("hello," + this.sex); return 1000; }; function Student(name, sex) { this.name = name; this.sex = sex; } const stu = new Student("Jack", "Gary"); const r1 = Person.prototype.sayHi.call(stu, 10, 20); console.log(r1); // 输出 1000 ``` `call` 的特点是将参数逐个传递[^1]。 #### `apply` 方法 `apply` 与 `call` 的功能相同,但参数传递方式不同。`apply` 接受两个参数:第一个是 `this` 值,第二个是一个数组或类数组对象,用于传递函数所需的参数。其基本语法为: ```javascript function.apply(thisArg, [argsArray]) ``` 例如,使用 `apply` 调用上述函数: ```javascript const r2 = Person.prototype.sayHi.apply(stu, [10, 20]); console.log(r2); // 输出 1000 ``` `apply` 的优势在于可以方便地将类数组对象(如 `arguments`)作为参数传递[^2]。 #### 两者的适用场景 - **`call`**:适合参数数量固定的情况,可以直接将参数逐个列出。 - **`apply`**:适合参数数量不固定或需要动态传递的情况,例如使用 `arguments` 对象或数组。 #### 示例代码 以下是一个综合示例,展示了 `call` `apply` 在不同场景下的应用: ```javascript function greet() { console.log(`Hello, ${this.name}`); } const obj = { name: "Alice" }; greet.call(obj); // 输出 "Hello, Alice" const args = ["Bob"]; greet.apply(obj, args); // 输出 "Hello, Bob" ``` 通过 `call` `apply`,可以灵活地控制函数执行时的上下文,实现类似继承或上下文切换的功能[^3]。 --- ### 相关问题 1. `call` `apply` 在异步函数中如何表现? 2. 如何使用 `bind` 显式绑定 `this` 值? 3. `call` `apply` 在类方法中的行为差异? 4. 如何理解 `call` `apply` 对 `this` 的绑定机制?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值