jQuery에서 $.proxy() 이해
서류상으로는 이해합니다..proxy()인수로 전달된 함수의 범위를 변경합니다.누가 좀 더 잘 설명해 주시겠어요?우리가 왜 이렇게 해야 합니까?
그것이 궁극적으로 하는 것은 그것의 가치를 보장하는 것입니다.this어떤 기능에서 당신이 원하는 가치가 될 것입니다.
일반적인 예는 에 있습니다.setTimeout그것은 내부에서 발생합니다.click핸들러
다음을 수행:
$('#myElement').click(function() {
// In this function, "this" is our DOM element.
$(this).addClass('aNewClass');
});
의도는 아주 간단합니다.언제myElement클릭하면 클래스가 표시됩니다.aNewClass핸들러 내부this클릭한 요소를 나타냅니다.
하지만 우리가 수업을 추가하기 전에 잠시 지연되기를 원한다면 어떻게 될까요?우리는 사용할 수 있습니다.setTimeout그것을 달성하기 위해, 하지만 문제는 우리가 어떤 기능을 주든 간에.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맥락.
더 자세히 설명하지 않고 (이것은 ECMA스크립트의 컨텍스트, 이 컨텍스트 변수 등에 관한 것이기 때문에 필요할 것입니다.)
ECMA-/Javascript에는 세 가지 유형의 "콘텍스트"가 있습니다.
- 글로벌 컨텍스트
- 함수 컨텍스트
- 평가 컨텍스트
모든 코드는 실행 컨텍스트에서 실행됩니다.하나의 글로벌 컨텍스트가 있으며 함수(및 평가) 컨텍스트의 많은 인스턴스가 있을 수 있습니다.이제 흥미로운 부분은:
함수의 모든 호출은 함수 실행 컨텍스트에 들어갑니다.함수의 실행 컨텍스트는 다음과 같습니다.
활성화 개체
스코프 체인
이 값
따라서 이 값은 실행 컨텍스트와 관련된 특수 개체입니다.ECMA-/Javascript에는 함수 실행 컨텍스트에서 이 값을 변경할 수 있는 두 가지 함수가 있습니다.
.call()
.apply()
만약 우리가 기능을 가지고 있다면,foobar()다음을 호출하여 이 값을 변경할 수 있습니다.
foobar.call({test: 5});
이제 우리는 접근할 수 있습니다.foobar우리가 전달한 객체:
function foobar() {
this.test // === 5
}
바로 이것입니다.jQuery.proxy()네. 그것은 필요합니다.function그리고.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); }
}
"즉시 호출 함수 표현식, 줄여서 IIF"를 사용하여 동일한 목표를 달성할 수 있습니다.
자동 실행 기능 :
$('#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>언급URL : https://stackoverflow.com/questions/4986329/understanding-proxy-in-jquery
'source' 카테고리의 다른 글
| strto 시간과 날짜를 사용하여 현재와 비교하여 이전 달과 연도를 얻는 방법은 무엇입니까? (0) | 2023.08.10 |
|---|---|
| 함수가 비동기인지 어떻게 알 수 있습니까? (0) | 2023.08.10 |
| 드라이버 클래스 oracle.jdbc를 로드하지 못했습니다.HikariConfig 클래스 로더 또는 스레드 컨텍스트의 OracleDriver (0) | 2023.08.10 |
| 노드에서 줄 바꿈('\n')으로 문자열을 분할하는 방법은 무엇입니까? (0) | 2023.08.10 |
| ID의 순서를 유지하면서 하위 카테고리의 순위 지정 (0) | 2023.08.10 |