일반 연산자 this

황제낙엽 2014.12.30 14:58 조회 수 : 387

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 의 어느 쪽도 "공유"할 수 있습니다.

번호 제목 글쓴이 날짜 조회 수
186 브라우저에서 뒤로 가기 막기와 펑션키(function key) 막기 황제낙엽 2005.10.21 620
185 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 614
184 XMLHttpRequest.timeout 황제낙엽 2018.11.03 610
183 javascript array contains method 황제낙엽 2011.08.19 608
182 문자열에서 역슬래시(backslash) 문자와 유니코드(Unicode)에 대한 고찰 file 황제낙엽 2021.06.03 606
181 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 604
180 IE브라우저에서 서버의 XML파일을 ajax로 가져와 DOM파싱하는 예제 (XMLHttpRequest, XML, ActiveXObject) 황제낙엽 2018.11.23 603
179 브라우저의 스크롤을 따라다니는 레이어 두번째 file 황제낙엽 2002.12.20 592
178 Understanding User-Agent Strings 황제낙엽 2011.02.22 591
177 CryptoJS 를 이용한 암호화 황제낙엽 2023.02.15 589
176 CKEditor 3 JavaScript API Documentation 황제낙엽 2011.11.14 588
175 [JavaScript Tutorials] JavaScript and memory leaks (해석중) 황제낙엽 2009.04.08 588
174 자바스크립트 학습용 유튜브 강의 (드림코딩 by 엘리) 황제낙엽 2021.03.07 586
173 UTF-8 한글 초성 추출 (자바스크립트) 황제낙엽 2019.05.07 585
172 소스 보기 막기 황제낙엽 2005.11.18 585
171 Page Refresh/Reload 황제낙엽 2007.08.24 584
170 How to use Rhino to script Java classes. 황제낙엽 2008.07.14 581
169 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 580
168 Jasmine 테스트 및 CI 구축 가이드 황제낙엽 2016.11.16 579
167 자바스크립트 내장 함수 활용하기 황제낙엽 2005.04.25 571