如何在 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 實例上下文，允許存取「this.myValue」。 ：

MyClass.prototype.myfunc = function() {

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

fx1 被直接調用，從而產生“this”的全局上下文（“全局測試”）。傳遞參數。 MyClass 建立上下文感知版本的綁定：

然後可以在原型函數中使用此自訂綁定方法：

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);

結論

• 結論
• 在JavaScript 原型函數中保留上下文對於維護正確的功能和避免意外行為至關重要。透過了解這些技術，您可以自信地使用原型函數，而不會影響上下文保存。

以上是如何在 JavaScript 原型函數中保留上下文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！