改变函数内部的this指针的指向

JS this指向与方法
本文介绍了JavaScript中通过call、apply及bind方法改变函数内部this指向的技巧。详细解释了三种方法的区别,包括参数形式的不同,并提供了具体的使用示例。

每个函数都包含两个非继承来的方法call()和apply();

使用call()或者apply(),可以改变this的指向;

假设要改变fn函数内部的this的指向,指向obj,那么可以fn.call(obj);或者fn.apply(obj);


call和apply的区别:

call和apply的区别在于参数,他们两个的第一个参数都是一样的,表示调用该函数的对象;

apply的第二个参数是数组,是[arg1,arg2,arg3]这种形式,而call是arg1,arg2,arg3这样的形式。


另外还可以用bind函数:

var bar=fn.bind(obj);

那么fn中的this就指向obj对象了,bind函数返回新的函数,这个函数内的this指针指向obj对象。


<think>我们被要求解释bind、apply、call这三个方法在改变函数内部this指向时的区别。 首先,这三个方法都是Function原型上的方法,用于显式绑定函数执行时的this值。 然后,我们需要分别说明它们的用法和区别: 1. call:立即调用函数,第一个参数是this指向,后续参数是逗号分隔的参数列表。 2. apply:立即调用函数,第一个参数是this指向,第二个参数是一个数组(或类数组)作为函数的参数。 3. bind:创建一个新的函数,新函数this被永久绑定到bind的第一个参数,后续参数作为新函数的预设参数(部分应用)。 接下来,我们给出代码示例来说明它们的使用。 最后,根据规则,在回答结束后提出3-5个相关问题,以“§§相关问题§§”开头,然后列出问题。 注意:回答必须使用中文,且格式要严格遵循示例。</think>### 改变函数 this 指向的方法(bind、apply、call 的区别) 这三种方法都能显式绑定函数的 `this` 值,但使用场景和行为有显著差异: | **方法** | **执行时机** | **参数传递** | **返回值** | **使用场景** | |----------|--------------|--------------|------------|--------------| | **`call`** | 立即执行 | 逗号分隔参数列表<br>`func.call(ctx, arg1, arg2)` | 函数执行结果 | 需要立即调用且参数已知 | | **`apply`** | 立即执行 | 数组形式参数<br>`func.apply(ctx, [arg1, arg2])` | 函数执行结果 | 需要立即调用且参数为数组 | | **`bind`** | 延迟执行 | 逗号分隔参数列表<br>`boundFunc = func.bind(ctx, arg1)` | 绑定后的新函数 | 需要创建固定上下文的回调函数 | **核心区别示例**: ```javascript const user = { name: "Alice" }; function greet(greeting, punctuation) { console.log(`${greeting}, ${this.name}${punctuation}`); } // 1. call - 立即执行,参数逐个传递 greet.call(user, "Hello", "!"); // 输出: "Hello, Alice!" // 2. apply - 立即执行,参数数组传递 greet.apply(user, ["Hi", "?"]); // 输出: "Hi, Alice?" // 3. bind - 创建新函数,延迟执行 const boundGreet = greet.bind(user, "Hey"); boundGreet("..."); // 输出: "Hey, Alice..." ``` **关键特性**: 1. **参数预设**:`bind` 支持柯里化(部分参数预设) ```javascript const log = console.log.bind(console, "[DEBUG]"); log("Error occurred"); // 输出: [DEBUG] Error occurred ``` 2. **构造函数绑定**:`bind` 绑定的函数用作构造函数时,原始 `this` 绑定失效 3. **链式调用**:`call/apply` 可实现方法借用 ```javascript Array.prototype.slice.call(document.querySelectorAll('div')) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值