如何在 JavaScript 原型函数中保留上下文？

在 JavaScript 原型函数中保留上下文：综合指南

许多 JavaScript 开发人员在尝试保留上下文（“this 的值”）时遇到挑战。 ") 在原型函数中。本指南旨在全面了解如何有效解决此问题。

在提供的示例中：

MyClass = function() {
  this.element = $('#element');
  this.myValue = 'something';

  // some more code
}

MyClass.prototype.myfunc = function() {
  // at this point, "this" refers to the instance of MyClass

  this.element.click(function() {
    // at this point, "this" refers to the DOM element
    // but what if I want to access the original "this.myValue"?
  });
}

new MyClass();

在原型函数中定义事件处理程序时会出现问题“我的函数。”在单击事件期间，“this”不再引用 MyClass 实例，而是引用 DOM 元素。

使用 Bind 保留上下文

“bind”方法提供了简单的解决方案。它创建一个新函数，即使在不同的上下文中调用，也保留原始函数的上下文（此值）。

通过在示例中使用绑定：

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

单击事件处理程序保留 MyClass 实例上下文，允许访问“this.myValue”。

其他绑定示例

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

在此示例中：

• fx1 被直接调用，从而产生“this”的全局上下文（“全局测试”）。
• fx2 是一个绑定函数，它保留 obj 的上下文并正确传递参数。

自定义注意事项

如果多个原型函数需要上下文保留，则可能需要创建自定义绑定函数。您可以为 MyClass 创建上下文感知版本的绑定：

MyClass.prototype.myBind = function(func) {
  var context = this;
  return function() {
    func.apply(context, arguments);
  };
};

然后可以在原型函数中使用此自定义绑定方法：

MyClass.prototype.myfunc = function() {

  this.element.click(this.myBind(function() {
    // ...
  }));
};

结论

在 JavaScript 原型函数中保留上下文对于维护正确的功能和避免意外行为至关重要。 “绑定”方法提供了有效且直观的解决方案，但在更复杂的场景中可能需要自定义。通过了解这些技术，您可以自信地使用原型函数，而不会影响上下文保存。

以上是如何在 JavaScript 原型函数中保留上下文？的详细内容。更多信息请关注PHP中文网其他相关文章！