js 中的bind

最新推荐文章于 2024-03-31 15:50:35 发布

Zhi.C.Yue

最新推荐文章于 2024-03-31 15:50:35 发布

阅读量226

点赞数 1

分类专栏：笔记学习文章标签： js

学习同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

笔记

28 篇文章 0 订阅

订阅专栏

记录

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>