this

이종원·2020년 10월 2일

'this' keyword

모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자
execution context의 구성요소 중 하나로 함수가 실행되는 동안 이용 가능함

5 Patterns of binding 'this'
1. global: window
2. Function 호출 : window

global 이나 Function 호출 방법을 통해 함수를 실행하는 경우 애초에 this를 사용 안하는것을 권장함 아니다 그냥 사용하지 말자

<global: window , Function 호출 : window>
var hello = 'world'
function foo(){
  console.log(this.helle)
}

this.hello // 'world'
foo() // 'world'
결론 this는 window

Method 호출 : 부모 객체
하나의 객체에 값과 연관된 메소드를 묶어서 주로 사용함

<Method 호출 : 부모 object>
let obj = {
    foo : function(){ console.log(this) }
}

obj.foo() // {foo: f} 부모 object

Construction mode (new 연산자로 생성된 function 영역의 this): 새로 생성된 객체
객체지향 프로그래밍에서 주로 사용

<Construction mode>
function F(v){
	this.val = v
}

let f = new F('WooHoo')

console.log(f.val) // WooHoo
console.log(val) // ReferenceError

.call, or apply 호출 : call, apply의 첫번째 인자로 명시 된 객체
this 값을 특정할 때 사용하며 특히 apply의 경우 배열의 엘리먼트를 풀어서 인자로 넘기가 유용

<.call, or apply 호출>
function bar(){
  console.log(this)
}

bar.call(obj) // obj
bar.call({a : 1}) // {a : 1} 즉 this 값이 변함
--------------------------------------------
let add = function(x, y){
  this.val = x + y
}

let obj = {
  val: 0
}

add.apply(obj, [2,8])
console.log(obj.val) // 10

add.call(obj, 2,8)
console.log(obj.val) // 10

this는 함수 실행시 호출 방법에 의해 결정되는 특별한 객체이다
함수 실행시 결정되므로 실행되는 맥락에 따라 this는 다르게 결정됩니다

함수 실행의 다섯가지 방법
1.global : 정확히 말하면 함수 실행은 아니고 전역에서 this를 참조 할 때를 의미함