[javascript] jQuery의 $ .proxy () 이해

Program / 글쓴이

에서 문서 나는 이해 .proxy()인수로 전달하는 기능의 범위를 변경합니다. 누군가 나에게 이것을 더 잘 설명해 주시겠습니까? 왜 이렇게해야합니까?

답변

그것이 궁극적으로하는 것은 this함수의 가치가 원하는 가치가되도록하는 것입니다.

일반적인 예는 핸들러 setTimeout내에서 발생하는 것 click입니다.

이것을 가지고 :

$('#myElement').click(function() {
        // In this function, "this" is our DOM element.
    $(this).addClass('aNewClass');
});

의도는 간단합니다. 때 myElement클릭하면, 클래스를 얻어야한다 aNewClass. 핸들러 내부 this는 클릭 된 요소를 나타냅니다.

그러나 수업을 추가하기 전에 짧은 지연을 원한다면 어떻게해야합니까? 우리는 setTimeout그것을 달성하기 위해 a 를 사용할 수도 있지만 문제는 우리가주는 기능에 관계없이 그 함수 내부 setTimeout의 가치가 요소 this가 아니라는 것 window입니다.

$('#myElement').click(function() {
    setTimeout(function() {
          // Problem! In this function "this" is not our element!
        $(this).addClass('aNewClass');
    }, 1000);
});

대신 우리가 할 수있는 것은를 호출 $.proxy()하여 함수와 할당하려는 값을 보내면 this해당 값을 유지하는 함수를 반환합니다.

$('#myElement').click(function() {
   // ------------------v--------give $.proxy our function,
    setTimeout($.proxy(function() {
        $(this).addClass('aNewClass');  // Now "this" is again our element
    }, this), 1000);
   // ---^--------------and tell it that we want our DOM element to be the
   //                      value of "this" in the function
});

따라서 $.proxy()함수와 원하는 값 을 제공 한 후 제대로 설정 this되었는지 확인하는 함수를 반환했습니다 this.

어떻게합니까? 메소드를 사용하여 함수를 호출 하는 익명 함수를 반환 .apply()하므로 명시 적으로의 값을 설정할 수 있습니다 this.

반환되는 함수를 간단히 보면 다음과 같습니다.

function() {
    // v--------func is the function we gave to $.proxy
    func.apply( ctx );
    // ----------^------ ctx is the value we wanted for "this" (our DOM element)
}

따라서이 익명 함수는에 주어지며 setTimeout모든 기능은 올바른 this컨텍스트로 원래 함수를 실행하는 것 입니다.

답변

더 세부로하지 않고 (이 대략 때문에 필요한 것이다 컨텍스트 인 ECMAScript에서, 이 컨텍스트 변수 등)

ECMA- / Javascript에는 세 가지 유형의 “컨텍스트”가 있습니다.

  • 세계적인 맥락
  • 기능 문맥
  • 평가 컨텍스트

모든 코드는 실행 컨텍스트 에서 실행됩니다 . 이 하나의 글로벌 컨텍스트 및 기능 (및 평가) 컨텍스트의 많은 경우가있을 수 있습니다. 이제 흥미로운 부분 :

함수의 모든 호출은 함수 실행 컨텍스트에 들어갑니다. 함수의 실행 컨텍스트는 다음과 같습니다.

활성화 오브젝트
범위 체인
이 값

그렇게 이 값은 실행 컨텍스트와 관련되는 특수 객체입니다. ECMA- / Javascript 에는 함수 실행 컨텍스트 에서이 값을 변경할 수있는 두 가지 함수가 있습니다 .

.call()
.apply()

함수 foobar()가 있으면 다음 을 호출 하여이 값을 변경할 수 있습니다 .

foobar.call({test: 5});

이제 foobar전달한 객체에 액세스 할 수 있습니다 .

function foobar() { 
    this.test // === 5
}

이것은 정확히 무엇입니까 jQuery.proxy(). functionand context(객체 이외의 다른 것)를 취하고 .call()또는 호출하여 함수를 연결하고 .apply()새 함수를 반환합니다.

답변

이 기능을 작성했습니다.

function my_proxy (func,obj)
{
    if (typeof(func)!="function")
        return;

    // If obj is empty or another set another object 
    if (!obj) obj=this;

    return function () { return func.apply(obj,arguments); }
}

답변

“즉시 호출 된 함수 표현식, 짧은 : IIFE” 자체 실행 함수를 사용하여 동일한 목표를 달성 할 수 있습니다 .

    $('#myElement').click(function() {  
      (function(el){
         setTimeout(function() {
              // Problem! In this function "this" is not our element!
            el.addClass('colorme');
        }, 1000);
      })($(this)); // self executing function   
    });
.colorme{
  color:red;
  font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <div id="myElement">Click me</div>
</body>
</html>

스 니펫 확장

답변