原生JavaScript中bind函数的简单实现原理

bind函数实现概述

今日深入探讨bind函数的实现机制，并厘清shim与polyfill的概念差异，现进行归纳总结。

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
  if (typeof this !== "function") {
   // closest thing possible to the ECMAScript 5 internal IsCallable function
   throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  }

  var aArgs = Array.prototype.slice.call(arguments, 1), 
    fToBind = this, 
    fNOP = function () {},
    fBound = function () {
     return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis || window,
                aArgs.concat(Array.prototype.slice.call(arguments)));
    };

  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();

  return fBound;
 };
}

基于官方文档的实现方案，将从两个维度阐述核心要点。

参数处理机制

首要讨论点为参数处理，重点涉及arguments对象的运用。

代码`var aArgs = Array.prototype.slice.call(arguments, 1)`用于提取bind函数的参数数组，排除首个参数（即目标绑定对象oThis）。

代码`aArgs.concat(Array.prototype.slice.call(arguments))`利用数组方法将参数追加至参数数组末尾。需注意，该函数返回fBound后执行，其参数数组源自fBound，与原始参数数组不同，此机制类似柯里化。

上下文绑定与原型链保护

其次讨论上下文绑定，这是bind函数的核心功能，旨在解决上下文变化问题。

代码`fToBind = this`保存了当前对象的上下文，随后通过apply方法使被绑定对象能够使用该上下文。

代码`fNOP.prototype = this.prototype;`

代码`fBound.prototype = new fNOP();`

此处以fNOP为中介，将原对象this.prototype的属性传递给fBound，确保fBound在定义时的上下文中执行。

若直接`bound.prototype = self.prototype`，两者将指向同一对象，修改bound.prototype会导致self.prototype同步改变，违背初衷。通过空函数nop中转可有效避免此问题。

上述关于原生js中bind函数的简单实现即为分享的全部内容，旨在提供参考，感谢支持。