[javascript] 이 컨텍스트를 함수에 어떻게 전달합니까?

JAVASCRIPT / 글쓴이

나는 이것이 쉽게 구글 일 수있는 것이라고 생각했지만 아마도 올바른 질문을하지 않을 수도 있습니다 …

주어진 자바 스크립트 함수에서 “this”가 참조하는 것을 어떻게 설정합니까?

예를 들어, 다음과 같은 대부분의 jQuery 기능과 마찬가지로 : 

$(selector).each(function() {
   //$(this) gives me access to whatever selector we're on
});

호출 할 때 적절한 “this”참조가있는 자체 독립형 함수를 작성 / 호출하는 방법은 무엇입니까? jQuery를 사용하므로 jQuery 고유의 방법으로 수행하는 것이 이상적입니다.

답변

자바 스크립트 .call()와 .apply()메소드를 사용하면 함수 의 컨텍스트 를 설정할 수 있습니다 .

var myfunc = function(){
    alert(this.name);
};

var obj_a = {
    name:  "FOO"
};

var obj_b = {
    name:  "BAR!!"
};

이제 전화를 걸 수 있습니다 :

myfunc.call(obj_a);

어떤 경고 FOO합니다. 다른 방법으로지나 obj_b가면 경고 BAR!!합니다. 의 차이 .call()와는 .apply()즉 .call()당신이 함수에 인수를 전달하는 경우 쉼표로 구분 된 목록 소요 .apply()배열을 필요로한다.

myfunc.call(obj_a, 1, 2, 3);
myfunc.apply(obj_a, [1, 2, 3]);

따라서 메소드 hook를 사용하여 함수 를 쉽게 작성할 수 있습니다 apply(). 예를 들어, jQuerys .css()메소드에 기능을 추가하려고합니다 . 원래 함수 참조를 저장하고, 사용자 정의 코드로 함수를 덮어 쓰고 저장된 함수를 호출 할 수 있습니다.

var _css = $.fn.css;
$.fn.css = function(){
   alert('hooked!');
   _css.apply(this, arguments);
};

매직 arguments객체는 객체와 같은 배열 이므로 그냥 전달할 수 있습니다 apply(). 그렇게하면 모든 매개 변수가 원래 함수로 전달됩니다.

답변

사용function.call :

var f = function () { console.log(this); }
f.call(that, arg1, arg2, etc);

함수에서 that원하는 객체는 어디에 있습니까 this?

답변

jQuery는 .call(...)메소드를 사용 this하여 매개 변수로 전달한 함수 내부에 현재 노드를 지정합니다 .

편집하다:

의심 스러울 때 jQuery의 코드를 들여다 보는 것을 두려워하지 마십시오. 모두 명확하고 잘 문서화 된 Javascript입니다.

즉,이 질문에 대한 답은 574 행입니다.
callback.call( object[ name ], name, object[ name ] ) === false

답변

바인드 함수를 사용하여 함수 this내 에서 컨텍스트를 설정할 수 있습니다 .

function myFunc() {
  console.log(this.str)
}
const myContext = {str: "my context"}
const boundFunc = myFunc.bind(myContext);
boundFunc(); // "my context"

답변

또 다른 기본 예 :

작동하지 않는:

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
};
img.src = reader.result;

일:

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
}.bind(this);
img.src = reader.result;

기본적으로 함수에 .bind (this)를 추가하십시오.

답변