자바스크립트 this

What is This ?

자바스크립트에서 this 는 execution context 의 구성요소 중 하나로

모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자이며 현재 실행 문맥을 나타냅니다.

( 실행문맥 이란 호출자가 누구인지를 의미합니다. )

• execution context 이란 ?

  Execution Context

  실행 컨텍스트는 추상적인 개념 . 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경입니다.

  (실행 컨텍스트)는 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있습니다.

  어떤 함수가 호출되면 execution context가 만들어집니다.

  • 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
  • 함수 선언
  • 변수의 유효범위(Scope)
  • this

자바스크립트의 this 는 다른 프로그래밍 언어들과 조금 다른 점이 있습니다.

Java에서의 this 는 인스턴스 자신을 가리키는 참조변수로 객체 자신에 대한 참조 값을 가지고 있습니다.

하지만 자바스크립트의 경우 this 가 참조하게 되는 객체가 한가지가 아니라 해당 함수 호출 방식에 따라

this에 바인딩되는 객체가 달라집니다.

대부분의 경우 this 의 값은 함수를 호출한 방법이 결정합니다.

실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다.

ECMAScript 5는 함수를 어떻게 호출 했는지 상관하지 않고 this 를 설정할 수 있는 bind 를 도입했습니다.

( ECMAScript 2015는 스스로의 this binding 을 제공하지 않는 화살표 함수를 추가했습니다. )

 

---

This

example

함수 호출 방식에 따른 this 의 바인딩

자바스크립트에 this 는 함수를 선언할 때 this 에 Binding 할 객체가 정적으로 결정되는 것이

아니고 함수 호출 방식에 의해 this 가 Binding 되는 객체가 동적으로 결정됩니다.

 

this 가 결정되는 함수의 호출하는 방식으로는 다음과 같은 것들이 있습니다**.**

아래 예시들을 통해서 각 상황에서 this 가 Binding 되는 대상을 알아보겠습니다.

---

1. Global 에서의 this

var global = 'this에게 호출될 예정'
console.log(this.global) 
// this에게 호출될 예정
console.log(this)
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

 

1번 예제에서 this 는 전역을 나타내는 window 입니다.

---

 2. Function 에서의 this

var global = 'this에게 호출될 예정'

function foo() { console.log(this.global); }

foo(); //this에게 호출된 예정

2번 예제에서 this 는 전역을 나타내는 window 입니다.

• foo 함수에서 global 이 존재해도 this 는 전역을 바라봅니다.

---

3. Method 에서의 this

var count = function(){
 val : 0,
 increase : function() {
  this.val += 1; //여기서 this는 부모객체인 count함수와 연결.
  }
}

count.increase();
console.log(count.val) // 1

 

3번 예제에서 Method 인 increase 의 this 는 부모 객체인 count 입니다.

 

---

4. Construction mode 에서의 this

function Foo(n) {
  this.val = n;
}

var foo = new Foo('생성자함수'); 
//기존 함수에 new연산자를 붙이면 생성자 함수가 만들어짐 기존함수와 혼란 방지를 위해 대문자로 쓰입니다.
console.log(foo.val) // 생성자함수

var fee = Foo('실패'); //new 연산자가 없으면 생성자 함수로 동작하지 않음
console.log(fee.val)//undefined

 

4번 예제에서 this 는 new생성자( foo ) 함수입니다.

• foo 는 Foo 함수의 생성자 함수로 foo 의 '생성자함수' 를 나타내고 fee 에서는 찾을 수 없습니다.

---

 5. Call & Apply 에서의 this

fun.call(thisArg[, arg1[, arg2[, ...]]])
//thisArg :fun 호출에 제공되는 this의 값입니다.
//arg :  객체를 위한 인수입니다.
 function foo() {
return this.length
}
foo.call([1,2,3]) // 3


fun.apply(thisArg, [argsArray])
//thisArg : 옵션. func 를 호출하는데 제공될 this 의 값입니다.
// [argsArray] : 옵션. func 이 호출되어야 하는 인수를 지정하는 유사 배열 객체입니다.
 function foo() {
return this.length
}
foo.apply([1,2,3]) // 3



fun.apply(thisArg, [1,2,3])
fun.call(thisArg, 1,2,3)

5번 예제에서 this 는 첫번째 인자로 명시된 객체 ( thisArg ) 입니다.

 

---

 

Tip* ( arrow function 과 this 에 대한 reference 자료를 첨부합니다. )

https://beomi.github.io/2017/07/12/understanding_js_scope_function_vs_arrow/

자바스크립트: function declaration와 Arrow Function의 this 스코프 차이 | Beomi's Tech Blog

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

https://poiemaweb.com/js-this

this | PoiemaWeb

https://blueshw.github.io/2018/03/12/this/

https://blueshw.github.io/2018/03/12/this/

http://webframeworks.kr/tutorials/translate/explanation-of-this-in-javascript-1/

WebFrameworks.kr - 자바스크립트에서 사용되는 this에 대한 설명 1