原生JS实现call和bind的底层原理辨析

原生JS实现call和bind的底层原理辨析

关于使用原生JavaScript手动实现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方法与预期行为存在显著差异。

将其与JavaScript内置的call方法进行对比：

show.call({haha:122})

内置call方法的执行结果为：

分析原因可知，在手动实现的mycall函数中，执行context.fn(...args)之前，上下文对象context已被修改。因此，fn执行时使用的上下文是修改后的版本，导致最终结果与预期不符。

核心问题在于：

进一步深入思考，call方法的实现绝非上述方式（或类似方式）。call是浏览器底层语言封装好的函数，既不能也不需要通过JavaScript强行模拟。

综上所述，使用JavaScript模拟call和bind并未触及底层原理，这种模拟仅具有娱乐性质，缺乏实际价值。bind方法的实现与call类似，此处不再赘述。