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 중국어 웹사이트의 기타 관련 기사를 참조하세요!