js 中的bind_js bind-优快云博客

本文链接：https://blog.youkuaiyun.com/Jacoh/article/details/95647568

博客主要记录了对JavaScript中Bind()方法的理解，包含其简单代码实现及应用举例，帮助读者掌握该方法在JavaScript里的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录

Understanding JavaScript Bind ()

代码实现 simple：

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

代码实现：

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,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

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

    return fBound;
  };
}

应用举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bind</title>
</head>
<body>
  <button>click</button>

  <script>
    var logger = {
      x: 0,
      updateCount: function(){
        this.x++;
        console.log(this.x);
      }
    }
	// 错误的写法
	document.querySelector('button').addEventListener('click', logger.updateCount);
	
    // 正确的写法
    document.querySelector('button').addEventListener('click', function(){
		logger.updateCount();
	});

	// 正确的写法（使用bind简化）
    document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));
  </script>
</body>
</html>

【2025-03-22】更新
增加 new、 apply、call 的实现：

// new
function _new(ctor, ...args) {
  if (typeof ctor !== 'function') {
    throw 'ctor must be a function';
  }
  let obj = new Object();
  obj.__proto__ = Object.create(ctor.prototype);
  let res = ctor.apply(obj, ...args);

  let isObject = typeof res === 'object' && typeof res !== null;
  let ifFunction = typeof res === 'function';
  return isObject || isFunction ? res : obj;
}

// call
Function.prototype.call = function(scop, ...args) {
 var context = scop || window;
 context.fn = this;
 var result = eval("context.fn(...args)");
 delete context.fn;
 return result;
}

// apply
Function.prototype.apply = function(scop, args) {
 var context = scop || window;
 context.fn = this;
 var result = eval("context.fn(...args)");
 delete context.fn;
 return result;
}

至此，结束。