call、apply、bind方法的实现

简介: 先分析下3个方法的作用改变this的指向。传入参数。call apply返回函数结果, bind 返回新函数一、call方法的实现改变this指向首先我们知道,对象上的方法,在调用时,this是指向对象的。

先分析下3个方法的作用

改变this的指向。

传入参数。

call apply返回函数结果, bind 返回新函数

一、call方法的实现

改变this指向

首先我们知道,对象上的方法,在调用时,this是指向对象的。

img_672728664bb3d24fa066f9f950741af6.png

知道了这一点我们就可以实现改变this的指向

img_6e0aad6c28b1e07bd096ecb231ee7d49.png

测试

img_ffcf7b921852687297a27d35c1d026c3.png

现在,改变this的值,实现了

最简单实现es6

img_7a223ea1fc97aaa3be6b13519a5fe1c4.png

二、apply方法的实现

其实apply和call差不多,没什么大区别

利用已经写好的myCall来实现

img_a440ca7003a039299528e3a34c3a2869.png

不用myCall

img_7abe7954cf5f882256c227c385ae4abe.png

测试

img_7115ee524d4fe69c4deba076fa565cfc.png

效果没区别

三、bind方法的实现(利用call方法实现)

首先我们可以通过给目标函数指定作用域来简单实现bind()方法:

img_3c8096b8c58758177e32183d841ac555.png

考虑到函数柯里化的情况,我们可以构建一个更加健壮的bind():

img_775f20524b4c595f9fda9cd00fe760f9.png

这次的bind()方法可以绑定对象,也支持在绑定的时候传参。

继续,Javascript的函数还可以作为构造函数,那么绑定后的函数用这种方式调用时,情况就比较微妙了,需要涉及到原型链的传递:

img_66732ad501eb147d39f23697c0531fcb.png

这是《JavaScript Web Application》一书中对bind()的实现:通过设置一个中转构造函数F,使绑定后的函数与调用bind()的函数处于同一原型链上,用new操作符调用绑定后的函数,返回的对象也能正常使用instanceof,因此这是最严谨的bind()实现。

对于为了在浏览器中能支持bind()函数,只需要对上述函数稍微修改即可:

img_eb04b1503a3f9221152bd45db919dbcd.png
img_83a21cd0b4843eeba48365fa98042b30.png

四、模拟代码

模拟call

img_fbad936f5cd5bf63964dac8e222df5b6.png

模拟apply

img_183b4bc809e605f5ac1249910e28d178.png

模拟bind

img_81da298741d40aca936c5fcf5a9d2f18.png
相关文章
new bind apply call instanceof 等笔记
new bind apply call instanceof 等笔记
36 0
|
13天前
|
JavaScript 前端开发 开发者
call、bind、apply区别
【10月更文挑战第26天】`call`、`bind` 和 `apply` 方法在改变函数 `this` 指向和参数传递方面各有特点,开发者可以根据具体的需求和使用场景选择合适的方法来实现更灵活和高效的JavaScript编程。
20 1
|
1月前
|
前端开发 JavaScript
比较一下apply/call/bind ?
本文首发于微信公众号“前端徐徐”,详细介绍了 JavaScript 中 `apply`、`call` 和 `bind` 方法的概念、使用场景及手动实现。主要内容包括: - **apply**:使用数组作为参数调用函数,并指定 `this`。 - **call**:直接传递参数调用函数,并指定 `this`。 - **bind**:返回一个绑定了 `this` 和部分参数的新函数。 文章还对比了这三个方法的区别,并提供了手动实现的代码示例。
16 2
|
3月前
|
JavaScript 前端开发 测试技术
手写call , apply , bind 方法的实现
本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例,展示了如何改变函数内的`this`指向,并立即执行该函数。通过在`Function.prototype`上定义`myCall`,利用`Symbol`确保新增属性的唯一性,从而避免命名冲突。接着介绍了如何处理不定数量的参数传递,最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别,并展示了其实现方式,主要在于参数传递形式的不同。最后,通过`bind`方法创建了一个返回新函数的例子,该新函数具有固定的`this`上下文,同时支持分批参数传递。
34 2
手写call , apply , bind 方法的实现
|
6月前
call\apply\bind详解
call\apply\bind详解
32 0
bind、call、apply 区别
bind、call、apply 区别
78 0
call、apply、bind笔记
call、apply、bind笔记
62 0
apply、bind和call
apply、bind和call
88 0
|
JavaScript 前端开发
一文搞定this、apply、call、bind
一文搞定this、apply、call、bind