일반 연산자 this

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

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

번호 제목 글쓴이 날짜 조회 수
90 브라우저의 새로고침과 종료에 대한 이벤트 황제낙엽 2017.08.11 2725
89 자바스크립트 타입 비교 테이블 + 테이블 작성 스크립트 [1] file 황제낙엽 2017.06.23 85
88 |= 비트 OR 대입 연산자 (복합대입연산자) 황제낙엽 2017.03.15 73
87 Jasmine 테스트 및 CI 구축 가이드 황제낙엽 2016.11.16 254
86 QUnit을 이용한 JavaScript 단위 테스트 file 황제낙엽 2016.11.16 36
85 멤버 연산자 황제낙엽 2014.12.30 47
» 연산자 this 황제낙엽 2014.12.30 23
83 typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기 황제낙엽 2013.10.24 38
82 HTTP Content-Type 정리 황제낙엽 2013.09.30 68
81 getBoundingClientRect in FF3 file 황제낙엽 2013.01.11 36
80 Stack (스택) 예제 프로그램 황제낙엽 2012.12.27 27
79 Javascript delete 황제낙엽 2012.06.11 20
78 delete 연산자에 대한 고찰 황제낙엽 2012.06.11 42
77 자바스크립트의 쉬프트 연산자 (Shift Operator) 와 음수 (Negative) 이야기 황제낙엽 2012.05.31 726
76 연산자 (===, ==, >=, <=) 황제낙엽 2012.05.30 47
75 JavaScript 재입문 황제낙엽 2012.05.29 50
74 JavaScript Touch and Gesture Events iPhone and Android 황제낙엽 2012.04.12 337
73 Javascript ArrayBuffer ? Binary handling in javascript 황제낙엽 2012.03.19 218
72 Alert 에서의 개행처리 황제낙엽 2012.03.09 80
71 자바스크립트 숫자형 체크 함수 (isFinite() 함수 와 isNaN() 함수) 황제낙엽 2011.12.13 67