var self = this?

var self = this?

---

이벤트 핸들러에 대한 콜백의 범위 변경으로 인스턴스 메소드를 사용 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. 앨리어싱 (aliasing)에 의해 동일한 방식으로 처리되어야하는 다른 의사 변수입니다.

---

예, 이것은 일반적인 표준으로 보입니다. 일부 코더는 자기를 사용하고 다른 코더는 나를 사용합니다. 이벤트와 달리 "실제"객체에 대한 참조로 사용됩니다.

실제로 얻는 데 시간이 조금 걸렸습니다. 처음에는 이상하게 보입니다.

나는 보통 내 객체의 맨 위에서 이것을 수행합니다 (데모 코드는 실례합니다-다른 것보다 더 개념적이며 우수한 코딩 기술에 대한 교훈은 아닙니다) :

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

---

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: in spite of, nested functions within an object takes on the global window object rather than the surrounding object.

---

One solution to this is to bind all your callback to your object with javascript's bind method.

You can do this with a named method,

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

doCallBack(MyNamedMethod.bind(this)); 

Or with an anonymous callback

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

Doing these instead of resorting to var self = this shows you understand how the binding of this behaves in javascript and doesn't rely on a closure reference.

Also, the fat arrow operator in ES6 basically is the same a calling .bind(this) on an anonymous function:

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

---

I haven't used jQuery, but in a library like Prototype you can bind functions to a specific scope. So with that in mind your code would look like this:

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

The bind method returns a new function that calls the original method with the scope you have specified.

---

Just adding to this that in ES6 because of arrow functions you shouldn't need to do this because they capture the this value.

---

I think it actually depends on what are you going to do inside your doSomething function. If you are going to access MyObject properties using this keyword then you have to use that. But I think that the following code fragment will also work if you are not doing any special things using object(MyObject) properties.

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

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

});

참고URL : https://stackoverflow.com/questions/337878/var-self-this