메뉴 보이기
Profile
이온디

2015.08.26

고급팁

자바스크립트 this

조회 수 209 추천 수 0
출처 : http://html5experts.kr/archives/1668
 

자바스크립트 this는 같은 소스코드로 호출하는 형태에 따라 의미가 달라서 이를 어렵게 생각하는 경우가 있어서 이를 정리해보았습니다. JavaScript의 this는 크게 4종류가 있다는 것부터 기억하고 시작해 봅시다.

최상위 this

전역 객체를 가리킵니다.

1
2
3
4
5
6
7
8
var abc = "Kim";
window.def = " MJ";
 
console.log(this.abc + "+" + this.def);
 
(function(){
console.log(this.abc + "+" + this.def);
})();

생성자 this

만들어진 인스턴스 자신을 가르킵니다.

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
var Abc = function Abc(msg) {
this.abc = msg;
this.method = function () {
console.log("method+" + this.abc);
}
}
 
var obj1 = new Abc("Hello");
var obj2 = new Abc("World");
 
// Hello 표시
console.log(obj1.abc);
// method+Hello 표시
obj1.method();
 
// World 표시
console.log(obj2.abc);
// method+World 표시
obj2.method();
 
// new를 안붙였기 때문에 Abc내 this는 전역 객체임
Abc("new가없음");
console.log(window.abc == "new가없음");
// method+new가없음!
window.method();

어떤 것에 소속된 this

소속된 개체를 가리킵니다.

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
var abc = {def:"MJ"};
abc.print1 = function() {
console.log(this.def);
};
 
// MJ 표시
abc.print1();
 
var func = function() {
console.log(this.def);
};
// window.def가 참조되어 undefined
func();
 
abc.print2 = func;
// this가 abc로 변경되어 MJ표시
abc.print2();
 
// prototype시도
var Abc = function Abc(msg) {
this.message = msg;
};
Abc.prototype.print = function() {
console.log("prototype+" + this.message);
}
var obj = new Abc("Hello");
// prototype+Hello 표시
obj.print();

function#apply나 function #call등으로 강제로 변경될 때 this

jQuery를 사용하여 click이벤트등에서 this를 다시 사용할 때..

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var abc = {
 def: "MJ",
 print:function(){
 console.log(this.def);
 }
};
// 어떤 것에 소속된 this라서 MJ표시
abc.print();
 
var paramour = {def:"NTR"};
// this를 변경하여 NTR표시
abc.print.call(paramour);
 
var Abc = function Abc(msg) {
 this.message = msg;
}
Abc.prototype.print = function() {
 console.log("Love " + this.message);
}
 
var obj1 = new Abc("Dokdo");
// Love Dockdo 표시
obj1.print();
obj1.print.call({message:"korea"});
 
// this를 보호하는 방법
var ProtectedAbc = function ProtectedAbc(msg) {
 this.message = msg;
 // this 저장
 var _this = this;
 this.print = (function(fn) {
 // fn에 원래 this.print가 있음
 return function() {
 // 원래 this.print를 _this에 저장해놓은 원본 this를 사용하여 재실행
 fn.apply(_this, arguments);
 };
 })(this.print);
}
ProtectedAbc.prototype.print = function() {
 console.log("Love " + this.message);
}
 
var obj2 = new ProtectedAbc("KoreaIsland");
obj2.print.call({message:"korea"});
 
Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
54 [고급팁] Asynch JS: The Power Of $.Deferred profile 이온디 2016.06.10 33
53 [고급팁] 비동기 프로그래밍을 위한 Promise와 Deferred 알아보기 (고재도) profile 이온디 2016.06.10 74
52 [차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리 profile 이온디 2016.06.02 3563
51 [차트] 접근성을 고려한 차트 라이브러리, Nwagon profile 이온디 2016.06.02 250
50 [라이브러리] 모바일 터치 제스츄어 profile 이온디 2016.02.22 40
49 [기초] 자바스크립트 페이지이동 profile 이온디 2015.08.31 378
48 [iframe] 금융투자협회 아이프레임 적용 소스 profile 이온디 2016.01.16 0
47 [iframe] iframe 높이 재설정(크롬 지원, IE 미지원) profile 이온디 2016.01.06 384
46 [차트] echarts profile 이온디 2015.12.21 355
45 [차트] amcharts profile 이온디 2015.12.18 222
44 [팁] 웹사이트 콘텐츠 복사 제한하기 profile 이온디 2015.09.15 81
43 [팁] 끊김없이 흐르는 배너(2009. 10. 12) profile 이온디 2015.09.13 204
42 [팁] 자바스크립트 성능 향상 팁 profile 이온디 2015.09.04 54
41 [form] [javascript] input reset / 자바스크립트 인풋 초기화(리셋)하는 방법 및 포커스 지정하기(ID 기준) profile 이온디 2015.08.31 7162
40 [form] [Javascript] 인풋값 체크 후 포커스 지정(name 기준) profile 이온디 2015.08.31 60
39 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) profile 이온디 2015.08.28 74
38 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) profile 이온디 2015.08.28 85
37 [문제] onMouseout과 setTimeout 사용법 profile 이온디 2015.08.28 90
[고급팁] 자바스크립트 this profile 이온디 2015.08.26 209