如何用原生JavaScript实现call和bind方法？

本文共计706个文字，预计阅读时间需要3分钟。

JavaScript 手动实现 call 和 bind 是常见的编程技巧。网上有很多关于如何实现这些功能的文章。然而，call 和 bind 的原理并非如表面所说那么简单。今天，就让我来揭秘这些所谓的原理。

首先，我们要明白，call 和 bind 的本质是改变函数的执行上下文（即 this 指向）。具体来说：

1. call 方法：它允许你直接指定函数执行时的上下文。使用方式如下： javascript function myFunction() { console.log(this.value); }

var obj={ value: 123 }; myFunction.call(obj); // 输出：123

2. bind 方法：它返回一个新函数，当这个新函数被调用时，其 this 指向会被绑定到指定的上下文。使用方式如下： javascript function myFunction() { console.log(this.value); }

var obj={ value: 123 }; var boundFunction=myFunction.bind(obj); boundFunction(); // 输出：123

接下来，我们来看看如何手动实现这两个方法：

1. 实现 call 方法： javascript Function.prototype.myCall=function(context) { context=context || window; context.fn=this; var args=[]; for (var i=1; i

2. 实现 bind 方法： javascript Function.prototype.myBind=function(context) { var self=this; return function() { self.apply(context, arguments); }; };

通过以上实现，我们可以看到，call 和 bind 的原理其实是通过改变函数的执行上下文来实现的。这些所谓的原理并没有那么复杂，只要掌握了 JavaScript 的作用域和闭包机制，就能轻松实现这两个方法。

js手动实现call和bind都是谎言

网上有很多关于说自己实现call和bind的原理的文章，然而call和bind的原理真如他们所说的那样吗？今天就让我来推翻这些所谓的”原理“，揭开谎言下的真相。

首先看看网上对call的实现：

// 手写 call Function.prototype.mycall = function (context) { context = context || window; context.fn = this; const args = [...arguments].slice(1); const result = context.fn(...args); // 执行fn时上下文context已被修改，不是我们所期望的call delete context.fn; return result; } function show() { console.log(this); } show.mycall({haha:122});

以上代码的执行结果是

如你所见，这样实现的call并不是我们所期望的那样。

对比于函数自带的call：

show.call({haha:122})

其结果为

分析其原因不难发现，根据函数mycall，执行context.fn(...args)之前修改了上下文context，所以执行fn时所使用的上下文是修改后的上下文，导致与预期结果相差甚远。

核心

而且，往更深的层次去思考，call绝不是这样（或类似这样）实现的，call是底层语言为浏览器封装好的函数，是绝对不能也没必要用js强行模仿的。

综上，js模仿call和bind绝对没有get到底层原理，这样的模仿只能用于娱乐而已，没有实际价值。bind和call类似，这里就不赘述了。