Function.prototype.bind()

原创于 2023-09-03 22:18:42 发布 · 872 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

本文介绍了JavaScript中bind()函数的基本用法，如何确保函数调用时保持正确的this上下文，以及为何在使用回调时可能出现问题。通过实例演示了如何通过bind()创建一个绑定到特定对象的方法，避免新手常见的全局变量与对象属性混淆问题。

bind() 最简单的用法是创建一个函数，不论怎么调用，这个函数都有同样的 this 值。JavaScript 新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，期望方法中的 this 是原来的对象（比如在回调中传入这个方法）。如果不做特殊处理的话，一般会丢失原来的对象。基于这个函数，用原始的对象创建一个绑定函数，巧妙地解决了这个问题：

this.x = 9; // 在浏览器中，this 指向全局的 "window" 对象
var module = {
  x: 81,
  getX: function () {
    return this.x;
  },
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 返回 9 - 因为函数是在全局作用域中调用的

// 创建一个新函数，把 'this' 绑定到 module 对象
// 新手可能会将全局变量 x 与 module 的属性 x 混淆
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81