SeouliteLab

jQuery jQuery.proxy() 메서드 이해하기: 함수 컨텍스트 설정하기 본문

프로그래밍

jQuery jQuery.proxy() 메서드 이해하기: 함수 컨텍스트 설정하기

Seoulite Lab 2024. 4. 3. 09:13

jQuery.proxy() 메서드는 jQuery에서 사용되며, 함수의 컨텍스트를 설정하여 해당 함수가 호출될 때 this의 값을 지정할 수 있습니다. 이를 통해 함수의 this가 원하는 대상을 가리키도록 할 수 있습니다.

예제 1: 함수 컨텍스트 설정하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.proxy() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 객체 생성
    var obj = {
      name: "John",
      greet: function(){
        console.log("Hello, " + this.name + "!");
      }
    };

    // 함수 컨텍스트 설정
    var greetProxy = $.proxy(obj.greet, obj);

    // 함수 호출
    greetProxy(); // 출력: Hello, John!
  </script>
</head>
<body>
</body>
</html>

설명: 이 예제에서는 객체의 greet 메서드에 대해 함수 컨텍스트를 설정하고 호출하여 this가 올바른 객체를 가리키도록 합니다.

예제 2: 이벤트 핸들러에서 함수 컨텍스트 설정하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.proxy() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 버튼 클릭 이벤트 핸들러
    function handleClick(){
      console.log("버튼이 클릭되었습니다. this.name: " + this.name);
    }

    // 버튼 생성
    var button = document.createElement("button");
    button.textContent = "Click me";

    // 버튼에 이벤트 핸들러 연결
    $(button).click($.proxy(handleClick, { name: "John" }));

    // 버튼 추가
    $(document.body).append(button);
  </script>
</head>
<body>
</body>
</html>

설명: 이 예제에서는 클릭 이벤트 핸들러에 대해 함수 컨텍스트를 설정하여 this가 올바른 객체를 가리키도록 합니다.

예제 3: 메서드에 대한 함수 컨텍스트 설정하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.proxy() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 객체 생성
    var obj = {
      name: "Jane",
      greet: function(){
        console.log("Hello, " + this.name + "!");
      }
    };

    // 함수 컨텍스트 설정 및 호출
    var greetProxy = $.proxy(obj, "greet");
    greetProxy(); // 출력: Hello, Jane!
  </script>
</head>
<body>
</body>
</html>

설명: 이 예제에서는 객체의 메서드에 대한 함수 컨텍스트를 설정하고 호출하여 this가 올바른 객체를 가리키도록 합니다.

예제 4: 함수에 대한 함수 컨텍스트 설정하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.proxy() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 함수 정의
    function greet(){
      console.log("Hello, " + this.name + "!");
    }

    // 함수 컨텍스트 설정 및 호출
    var greetProxy = $.proxy(greet, { name: "Alice" });
    greetProxy(); // 출력: Hello, Alice!
  </script>
</head>
<body>
</body>
</html>

설명: 이 예제에서는 함수에 대한 함수 컨텍스트를 설정하고 호출하여 this가 올바른 객체를 가리키도록 합니다.

예제 5: 함수 컨텍스트를 변경하여 이벤트 핸들러 등록하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.proxy() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 객체 생성
    var obj = {
      name: "Eve",
      greet: function(){
        console.log("Hello, " + this.name + "!");
      }
    };

    // 함수 컨텍스트 설정 및 이벤트 핸들러 등록
    $(document).ready(function(){
      $("button").click($.proxy(obj, "greet"));
    });
  </script>
</head>
<body>
  <button>Click me</button>
</body>
</html>

설명: 이 예제에서는 함수 컨텍스트를 변경하여 이벤트 핸들러를 등록합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .keydown() 메서드 이해하기: 키보드 이벤트 처리하기  (0) 2024.04.03
jQuery.ready() 메서드 이해하기: 문서 준비 이벤트 처리하기  (0) 2024.04.03
jQuery jQuery.holdReady() 메서드 이해하기: 문서 준비 이벤트 제어하기  (0) 2024.04.03
jQuery .hover() 메서드 이해하기: 요소에 마우스를 올렸을 때 처리하기  (0) 2024.04.03
jQuery .focusout() 메서드 이해하기: 요소가 포커스를 잃었을 때 처리하기  (0) 2024.04.03
'프로그래밍' Related Articles more