들어가기전에

• 도대체 this를 왜 쓰는 걸까? 먼저 자바를 예를 들어 보자 자바는 함수가 메서드다 그 함수는 클래스에 묶여 있다. 그리고 인스턴스는 클래스에서 생성된다. 그래서 모든 함수는 this 키워드가 가리키는 객체는 자신이 속한 클래스의 인스턴스다.

  근데 익히 알고 있지만 자바스크립트에는 클래스가 없다. 함수는 혼자서도 잘되고 new라는 키워드로 인스턴스를 그냥 막 만들고 찍어 낼 수 있다.

• 그래서 this라는 키워드는 자바스크립트가 객체 지향적인 언어로서 구현되는 데 큰 의미가 있다고 할 수 있다.

개념

this : 이 키워드는 호출 시점에서 어떤 함수를 property로 가지는 객체다. 거의 모든 상황에서 객체이며 해당 함수가 어떻게 실행되느냐에 따라 바뀐다.

this 키워드가 실행되는 4가지 상황

일반 함수 실행 방식 ( Regular function call )

function foo(){
 console.log(this);
}
foo(); --> Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

이 경우에는 this 가 참조할만 한 객체가 없기 때문에 최상위 객체인 브라우저인 경우 window 객체가 출력된다.

만약에 node.js 환경에 있는 경우 global 객체가 출력된다.

예외의 경우가 있다.

'use strict'
function foo(){
 console.log(this);
}
foo(); --> undefined

var age = 100;
function foo(){
var age = 99;
bar()
}
function bar(){
console.log(this.age)
}
foo() --> 100;

모든변수는 전역객체의 프로퍼티다. 즉 전역객체 window의 age 프로퍼티의 키인 100을 불러온다.

자바스크립트는 strict 모드가 있다. 실제 현업에서는 this의 실수를 보완하기 위해 쓰인다. 즉 코드 실행 환경을 설정해 오류를 줄이는 것.

Method 호출 ( Method call )

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ 
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

메소드 호출을 할 경우, this는 counter1을 가리킨다. 부모 객체 (실행 시점에 온점 왼쪽에 있는 객체)

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

메소드 호출인 경우 자기 자신(property) 속한 객체를 가리킨다. 간단하다.

Function.prototype.call , Function.prototype.bind, Function.prototype.apply 방식

function foo(){
 console.log(this.age)
}

let ken = { age : 35 }
let wan = { age : 31 }

foo.call(wan) --> 31
foo.wan() --> 31
foo.apply(ken) --> 35
foo.ken() --> 35

이 방식은 그냥 불러 내는 방식을 바꾼 것이다. this 값을 특정할 때 사용하며, 특히 apply의 경우 배열의 엘리먼트를 풀어서 인자로 넘기고자 할 때 유용함

'new' keyword 방식

function menber(name, age, location) {
  this.name = name;
  this.age = age;
  this.location = location;
}

이 경우 굳이 리턴 this를 안써놓더라도 new라는 키워드를 통해 키 벨류값이 그 안에 할당이 되는 것이다. 가리키는 객체는 새롭게 생성된 인스턴스 객체이다.

let menber1 = new menber('존',32,"집") --> menber {name: "존", age: 32, location: "집"}
let menber2 = new menber('밀리',29,'서재') --> menber {name: "밀리", age: 29, location: "서재"}

마무리

이 4가지를 기억하고 암기 한다면 실제 코딩을 하면서 this 가지고 고생할일을 없을 것이다. Global 형태의 사용이나, Function 호출 방법을 통해 함수를 실행할 경우에는, 애초에 this를 사용하지 않는 것을 권장한다. Function 호출시 this를 사용할 이유는 없다. 흔히 사용하지 않는 방법이다.