jQuery/JavaScript“This”포인터 혼동

Question

기능이있을 때 "this"의 동작 bar 나를 당황스럽게합니다. 아래 코드를 참조하십시오. HTML 요소가 아닌 클릭 핸들러에서 막대가 호출 될 때 "this"가 일반 이전 JS 객체 인스턴스가되도록 배열 할 수있는 방법이 있습니까?

// a class with a method

function foo() {

    this.bar();  // when called here, "this" is the foo instance

    var barf = this.bar;
    barf();   // when called here, "this" is the global object

    // when called from a click, "this" is the html element
    $("#thing").after($("<div>click me</div>").click(barf));
}

foo.prototype.bar = function() {
    alert(this);
}

Answer 1

JavaScript의 세계에 오신 것을 환영합니다! :디

당신은 JavaScript 범위와 폐쇄 영역을 방황했습니다.

짧은 답변 :

this.bar()

범위 아래에서 실행됩니다 foo, (처럼 이것 ~을 참고하여 foo)

var barf = this.bar;
barf();

글로벌 범위에 따라 실행됩니다.

이것은 기본적으로 다음을 의미합니다.

this.bar에 의해 지적 된 함수를 이것 (foo). 이것을 복사했을 때. JavaScript는 BARF가 가리키는 기능을 실행하며 이것, 그것은 단지 글로벌 범위로 실행됩니다.

이를 수정하려면 변경할 수 있습니다

barf();

다음과 같은 것 :

barf.apply(this);

이것은 JavaScript에의 범위를 바인딩하라고 지시합니다 이것 실행하기 전에 바프에게.

jQuery 이벤트의 경우 익명 함수를 사용하거나 스코핑을 지원하기 위해 프로토 타입에서 바인드 함수를 확장해야합니다.

더 많은 정보를 위해서:

• 범위에 대한 좋은 설명
• jQuery 바인딩이지지 스코핑에 바인딩됩니다

Answer 2

좋은 설명이 있습니다 this JavaScript의 키워드에서 사용할 수 있습니다 퀴크 스 모드.

Answer 3

당신은 이것을 찾을 수 있습니다 :

jQuery 이벤트에서 'this'의 가치 제어

아니면 이거:

http://www.learningjquery.com/2007/08/what-is-this

유용한.

Answer 4

책을 얻으십시오 : JavaScript : 좋은 부분.

또한 Douglas Crockford의 최대한 많이 읽으십시오.http://www.crockford.com/javaScript/

Answer 5

당신은 사용할 수 있습니다 Function.apply 무엇을 설정하는 기능에서 this 다음을 참조해야합니다.

$("#thing").after($("<div>click me</div>").click(function() {
    barf.apply(document); // now this refers to the document
});

Answer 6

이 때문입니다 이것 항상 함수가 첨부 된 인스턴스입니다. 이벤트 핸들러의 경우 이벤트를 트리거 한 클래스입니다.

당신은 다음과 같은 익명의 기능으로 자신을 도울 수 있습니다.

function foo() {
  var obj = this;
  $("#thing").after($("<div>click me</div>").click(function(){obj.bar();}));
}

foo.prototype.bar = function() {
  alert(this);
}

Answer 7

this.bar();  // when called here, "this" is the foo instance

이 주석은 FOO가 생성자가 아닌 정상 함수로 사용될 때 잘못입니다. 여기:

foo();//this stands for window