jQuery - proxy 함수
proxy 함수는 특정한 문맥(context)을 갖는 함수를 리턴해 줍니다.
문맥이란 어떤 함수의 환경(특히 함수가 가지는 데이터(변수)의 스코프)을 의미합니다.
Context(문맥)
자바스크립트는 자바와 C언어 같은 스택기반 언어가 아니기 때문에 변수가 갖는 스코프가 사용되는 시점에 따라 달라집니다.
특히 this 키워드는 쓰이는 곳에 따라 그 의미가 달라지는데 그 유형은 다음과 같습니다.
함수에서의 this
함수 안에서의 this는 전역객체인 window객체를 가리킵니다.
|
1
2
3
4
5
6
7
8
9
10
11 |
<script type="text/javascript">
var i = 10;
var testFunc = function(){
var i = 30;
console.log("함수 안에서 this.i = " + this.i);
}
testFunc(); //함수 안에서 this.i = 10
</script>
|
cs |
메서드로서의 this
메서드로서의 this는 자신이 속한 인스턴스(객체)를 가리킵니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<script type="text/javascript">
var i = 10;
var TestFunc = function(){
this.i = 30;
this.log = function(){
console.log("함수 안에서 this.i = " + this.i);
}
}
var obj = new TestFunc(); //함수 안에서 this.i = 30
obj.log();
</script> |
cs |
jQuery 이벤트 리스너 안에서의 this
jQuery 이벤트 리스너 안에서의 this는 이벤트가 발생한 요소객체를 가리킵니다.
이 경우 this == event.currentTarget 이 성립합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>proxy 테스트</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').on('click', function(event){
var target = $(this);
console.log(target.val()); //클릭한 버튼값이 나옴
console.log("this == currentTarget : " + (this == event.currentTarget)); //tthis == currentTarget : true
});
});
</script>
</head>
<body>
<input type="button" value="버튼1"><br>
<input type="button" value="버튼2"><br>
<input type="button" value="버튼3"><br>
</body>
</html> |
cs |
이처럼 자바스크립트 에서는 문맥(context)에 따라 변수의 의미가 달라질 수 있는데
proxy 함수를 통해 특정 대상함수의 문맥을 결정지을 수 있습니다.
그러면 대상함수는 원래의 자신의 문맥이 아닌 지정된 대리 문맥을 갖게 됩니다.
함수 사용
jQuery.proxy(대상함수, context)
대상함수 : context를 변경할 대상함수를 지정
context : 대상함수에 입힐 context 지정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<script type="text/javascript">
var value = "전역 value";
var callValue = function(){
var value = "지역 value";
console.log(this.value);
}
var obj = {
value : "obj의 멤버변수"
}
var proxyFunc = $.proxy(callValue, obj);//obj의 context를 갖는 callValue 함수 리턴
callValue();//전역 value;
proxyFunc();//obj의 멤버변수
</script> |
cs |
jQuery.proxy(대상함수, context, 추가 인자값들)
대상함수 : context를 변경할 대상함수를 지정
context : 대상함수에 입힐 context 지정
추가 인자값 : proxy 함수가 실행될때 필요한 추가 인자값들을 넘깁니다.(생략 가능)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<script type="text/javascript">
var value = "전역 value";
var callValue = function(val1, val2){
console.log(this.value);
console.log("addValue : " + val1);
console.log("addValue : " + val2);
}
var obj = {
value : "obj의 멤버변수"
}
var proxyFunc = $.proxy(callValue, obj, "addValue3", "addValue4");//obj의 context를 갖는 callValue 함수 리턴
callValue("addValue1", "addValue2");//전역 value;
proxyFunc();//obj의 멤버변수
</script> |
cs |
결과
|
1
2
3
4
5
6 |
전역 value
addValue : addValue1
addValue : addValue2
obj의 멤버변수
addValue : addValue3
addValue : addValue4 |
cs |
jQuery.proxy(context, 대상함수 이름)
context : 대상함수에 입힐 context 지정
대상함수 이름 : proxy 함수로 만들 대상함수 이름을 문자열로 전달합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<script type="text/javascript">
var value = "전역 value";
var obj = {
value : "obj의 멤버변수",
callValue : function(val1, val2){
console.log(this.value);
}
}
var func = obj.callValue;
var proxyFunc = $.proxy(obj, "callValue");//obj의 context를 갖는 callValue 함수 리턴
func();//전역 value
proxyFunc();//obj의 멤버변수
</script> |
cs |
'JavaScript' 카테고리의 다른 글
| [자바스크립트] Number 객체 (0) | 2017.11.13 |
|---|---|
| [자바스크립트] Infinity 와 NaN (0) | 2017.11.13 |
| [자바스크립트] String 객체 (0) | 2017.11.12 |
| [자바스크립트] arguments 객체 (0) | 2017.11.12 |
| [자바스크립트] 타이머 함수 (0) | 2017.11.11 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그