sitelink1 | https://developer.mozilla.org/ja/docs/We...od_binding |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars4 | |
extra_vars5 | |
extra_vars6 |
개요
this
키워드는 컨텍스트 개체 (현재 개체)를 참조하십시오. 일반적으로, 메소드 내에서 this
는 호출 객체 ( calling object )를 참조하십시오.
연산자 | |
구현 된 버전 : | JavaScript 1.0 |
ECMA 버전 : | ECMA-262 |
구문
this
설명
this
는 읽기 전용입니다.
this
를 사용하면 현재 컨텍스트 개체에 대한 참조를 얻을 수 있으며, 그 실행 컨텍스트의 속성과 메소드를 this
통해 ( this . member
같이하고) 볼 수 있습니다. 컨텍스트 객체는 함수에 전달되는 '숨겨진 매개 변수 "라고 간주 할 수 있습니다. this
가 전달되는 데는 세 가지 방법이 있습니다.
유형 | 트리거 | this |
메소드의 호출로 암묵적으로 | object . method (...) | object |
Function.prototype.call 을 통해 명시 적으로 | function .call (object, ...) | object |
Function.prototype.apply 을 통해 명시 적으로 | function .apply (object [...]) | object |
위의 방법도 강구되어야 전역 개체가 컨텍스트 개체로 전달됩니다. 이것은 예를 들어 함수 외부의 최상위 코드에서 this
를 사용했을 때와 func (arg1, arg2);
과 같이 객체에 포함하지 않고 함수가 호출되었을 때 등입니다.
ECMAScript 바인딩을 통해 DOM 을 조작하는 경우, JavaScript를 사용하여 이벤트 처리를 할 경우가 많습니다 만, 이벤트 핸들링에서 실행 컨텍스트가 특별한 방법으로 처리됩니다.
메소드의 속박
this
는 함수에 "전달"것이지 함수에 고정되어있는 것은 아닙니다. 즉, 메소드는 그것을 메소드로서 가지는 객체에 속박되는 것이 아니라 객체에 의해 참조되고있을뿐입니다.
속박의 개념을 설명하기 위해 다음의 예를 생각합니다.
function Car (brand) {
this.brand = brand;
}
Car.prototype.getBrand = function () {
return this.brand;
}
var foo = new Car ( "toyota");
println (foo.getBrand ()); // println 함수는 정의 된로
이는 예상 "toyota"를 출력합니다.
var brand = "not a car";
var bar = foo.getBrand;
bar ();
이것은 "toyota"대신 "not a car"를 반환합니다. 여기서 this
는 전역 객체이며, 브라우저 환경에서 window
입니다. 왜냐하면 bar ()가 호출 된 컨텍스트는 전역 객체이기 때문입니다. 전역 개체에도 brand
라는 속성이 있고, 그것은 "not a car"
라는 값을 가지고 있습니다. 만약 전역 개체가brand
라는 속성을 가지고 있지 않으면 대신 undefined
가 반환 된 것입니다.
여기에서 알 수 있듯이 bar
는 foo
와는 아무 관계도 없습니다. 객체는 함수를 참조하는 속성을 가질 수 있지만, 그 함수는 그 객체에 소속 하고있는 것은 아닙니다. 구체적으로 말하면,이 함수의 this
는 getBrand
을 정의 할 때 자동으로 foo
로 대체하지는 않습니다. 그렇지 않고, this
는 함수 호출자가 주어집니다. 즉, foo.getBrand ()
라는 식으로, foo
가 this
로 foo.getBrand
에 참조 된 함수에 전달 될 것입니다. 다음 표현식은 모두 동일합니다.
foo.getBrand ();
bar.call (foo);
foo.getBrand.call (foo);
이처럼 메소드가 속박되지 않는 것은 의도 된 동작입니다. 이렇게하면 메소드를 "공유"하고 개체에서 개체에 "이동"할 수 있습니다. 앞의 예제에 이어 다음과 같은 문장을 생각합니다.
function Airplane (brand) {
this.brand = brand;
}
var plane = new Airplane ( "boeing");
plane
은 getBrand
메소드를 가지고 있지 않지만 brand
속성을 가지고 있으며, Car
의 getBrand
메소드와 호환성이 있습니다. 따라서Car.prototype.getBrand
의해 참조되는 함수는 Airplane
의해 생성 된 개체와 Airplane.prototype
의 어느 쪽도 "공유"할 수 있습니다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
177 | CORS(Cross-Origin Resource Sharing) - 3 | 황제낙엽 | 2017.03.07 | 45 |
176 | CORS(Cross-Origin Resource Sharing) - 2 | 황제낙엽 | 2017.03.07 | 24 |
175 | CORS(Cross-Origin Resource Sharing) - 1 | 황제낙엽 | 2017.03.07 | 135 |
174 | Jasmine 테스트 및 CI 구축 가이드 | 황제낙엽 | 2016.11.16 | 254 |
173 | QUnit을 이용한 JavaScript 단위 테스트 | 황제낙엽 | 2016.11.16 | 36 |
172 | code compressor & decompressor | 황제낙엽 | 2015.01.02 | 181 |
171 | 멤버 연산자 | 황제낙엽 | 2014.12.30 | 47 |
» | 연산자 this | 황제낙엽 | 2014.12.30 | 23 |
169 | typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기 | 황제낙엽 | 2013.10.24 | 38 |
168 | 링크모음 | 황제낙엽 | 2011.03.25 | 25 |
167 | 개요 | 황제낙엽 | 2009.03.11 | 28 |
166 | XMLHttpRequest.setRequestHeader | 황제낙엽 | 2013.09.30 | 62 |
165 | HTTP Content-Type 정리 | 황제낙엽 | 2013.09.30 | 68 |
164 | getBoundingClientRect in FF3 | 황제낙엽 | 2013.01.11 | 36 |
163 | 연속해서 스트림 받기 (flush data from servlet to jsp with ajax) | 황제낙엽 | 2013.01.04 | 2428 |
162 | Stack (스택) 예제 프로그램 | 황제낙엽 | 2012.12.27 | 27 |
161 | 상속과 Super 로의 접근 | 황제낙엽 | 2012.09.18 | 64 |
160 | inherits() 를 이용한 상속 | 황제낙엽 | 2012.07.18 | 129 |
159 | Javascript delete | 황제낙엽 | 2012.06.11 | 20 |
158 | delete 연산자에 대한 고찰 | 황제낙엽 | 2012.06.11 | 42 |