var self = 이거?

var self = 이거?

인스턴스 메서드를 이벤트 처리기의 콜백으로 사용하면 다음 범위가 변경됩니다.this"내 인스턴스"에서 "콜백을 호출한 것"까지.그래서 제 코드는 이렇게 생겼습니다.

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

효과는 있지만, 그것이 최선의 방법입니까?제가 보기엔 이상해 보입니다.

이 질문은 jQuery에만 해당되는 것이 아니라 일반적으로 JavaScript에만 해당됩니다.핵심 문제는 임베디드 함수에서 변수를 "채널"하는 방법입니다.다음은 예입니다.

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

이 기법은 클로저를 사용하는 것에 의존합니다.하지만 그것은 작동하지 않습니다.this왜냐면this범위마다 동적으로 변경될 수 있는 유사 변수입니다.

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

우리가 뭘 할 수 있을까요?일부 변수에 할당하고 별칭을 사용합니다.

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

this이 점에서 고유하지 않습니다.arguments별칭을 사용하여 동일한 방식으로 처리해야 하는 또 다른 유사 변수입니다.

네, 이것이 일반적인 기준인 것 같습니다.어떤 코더는 자기 자신을 사용하고, 다른 코더는 나를 사용합니다.이벤트와 반대로 "실제" 개체에 대한 참조로 사용됩니다.

이것은 제가 정말로 얻는 데 약간의 시간이 걸린 것입니다. 처음에는 이상하게 보입니다.

저는 보통 제 목표의 맨 위에서 이 작업을 수행합니다(데모 코드는 다른 무엇보다 개념적이며 훌륭한 코딩 기술에 대한 교훈이 아닙니다).

function MyObject(){
  var me = this;

  //Events
  Click = onClick; //Allows user to override onClick event with their own

  //Event Handlers
  onClick = function(args){
    me.MyProperty = args; //Reference me, referencing this refers to onClick
    ...
    //Do other stuff
  }
}

ES2015 또는 유형 스크립트 및 ES5를 수행하는 경우 코드에서 화살표 기능을 사용할 수 있으며 이 오류는 인스턴스에서 원하는 범위를 나타냅니다.

this.name = 'test'
myObject.doSomething(data => {
  console.log(this.name)  // this should print out 'test'
});

설명하자면:ES2015에서 화살표 기능 캡처this그들의 정의 범위에서.일반적인 함수 정의에서는 그렇게 하지 않습니다.

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

edit: 객체 내의 중첩 함수는 주변 객체가 아닌 전역 창 객체를 차지합니다.

이에 대한 한 가지 해결책은 자바스크립트를 사용하여 모든 콜백을 객체에 바인딩하는 것입니다.bind방법.

명명된 방법으로 이 작업을 수행할 수 있습니다.

function MyNamedMethod() {
  // You can now call methods on "this" here 
}

doCallBack(MyNamedMethod.bind(this)); 

아니면 익명의 콜백으로

doCallBack(function () {
  // You can now call methods on "this" here
}.bind(this));

에 의존하는 대신에 이것들을 하는 것.var self = this의 바인딩을 이해하는 방법을 보여줍니다.this자바스크립트로 동작하며 폐쇄 참조에 의존하지 않습니다.

또한 ES6의 뚱뚱한 화살표 연산자는 기본적으로 동일한 호출입니다..bind(this)익명 기능에서:

doCallback( () => {
  // You can reference "this" here now
});

저는 jQuery를 사용하지 않았지만 프로토타입과 같은 라이브러리에서 특정 범위에 함수를 바인딩할 수 있습니다.이 점을 염두에 두고 코드는 다음과 같습니다.

 $('#foobar').ready('click', this.doSomething.bind(this));

바인딩 메서드는 지정한 범위로 원래 메서드를 호출하는 새 함수를 반환합니다.

여기에 화살표 기능 때문에 ES6에서 추가하는 것은 화살표 기능이 다음을 캡처하기 때문에 이 작업을 수행할 필요가 없습니다.thisvalue.value.value.

내 생각에 그것은 실제로 당신의 내면에서 무엇을 할 것인가에 달려있다고 생각합니다.doSomething기능경. 액할우에 .MyObject이 키워드를 사용하는 속성을 입력한 다음 이 키워드를 사용해야 합니다.하지만 저는 당신이 다음을 사용하여 특별한 일을 하지 않는다면 다음 코드 조각도 작동할 것이라고 생각합니다.object(MyObject)특성.

function doSomething(){
  .........
}

$("#foobar").ready('click', function(){

});

언급URL : https://stackoverflow.com/questions/337878/var-self-this