자바스크립트 학습 게시판입니다.
글 등록하기 | 내글 관리하기 | 연재글 | 보관함
자바스크립트 this
첨부파일 https://eond.com/javascript/361304
출처 : 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"});
 
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 79 articles in 3 / 4 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) 파일 이온디 2015/08/27 473
공지 자바스크립트 추천 사이트 [1] 이온디 2015/08/06 355
38 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) 이온디 2015/08/28 97
37 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) 이온디 2015/08/28 90
36 [문제] onMouseout과 setTimeout 사용법 이온디 2015/08/28 101
현재글 [고급팁] 자바스크립트 this 이온디 2015/08/26 222
34 [고급팁] 자바스크립트 클로져(Closures) 심화 파일 이온디 2015/08/26 105
33 [기초] [javascript] for문을 사용한 sum 출력하기 / 싱싱해 서기의 javascript 기초 강좌 #1~7 이온디 2015/08/28 191
32 [포럼] 자바스크립트의 기본적인 특성(러닝은빛) 이온디 2015/08/27 93
31 [팁] 홈페이지에 접속해서 지난 시간 나타내기 이온디 2015/08/27 31
30 [포럼] 자바스크립트 개발을 하기 전에 꼭 한번 읽어 보세요. 이온디 2015/08/27 145
29 [팁] 자바스크립트 디버깅 console.log 이온디 2015/08/26 121
28 [팁] 자바스크립트 지역변수, 전역변수의 유효범위 (중요) 이온디 2015/08/26 273
27 [팁] 자바스크립트(JavaScript) 배열(array) sort, splice, push 정렬,추가,수정,삭제 이온디 2015/08/26 827
26 [팁] 자바스크립트 함수 function() 이온디 2015/08/26 63
25 [팁] Function Declarations(함수선언) vs Function Expressions(함수표현) (함수호이스팅 hoisting) 이온디 2015/08/26 86
24 [팁] JavaScript에서 class 정의하기 이온디 2015/08/25 74
23 [팁] 자바스크립트의 모든것 이온디 2015/08/25 561
22 [포럼] 자바스크립트 개념 이온디 2015/08/25 607
21 [포럼] 객체 지향 자바스크립트 이온디 2015/08/25 56
20 [포럼] 자바스크립트 #1 객체지향 흉내내기 이온디 2015/08/25 46

해시태그 디렉터리