[javascript] this

 

 

자바스크립트에서의 this는 상황에 따라 다르게 동작한다.

 

 

1. 전역에서의 this는 window를 바인딩한다.

💡 바인딩이란? : 식별자와 값을 연결하는 과정
💡 식별자란? : 변수 이름, 함수 이름 등 어떤 대상을 구별할 수 있는 이름
즉, this 바인딩이란 this가 어떤 객체와 연결되는지를 의미한다.

 

console.log( this );
//Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

this === window;
//true

 

 

2. 함수에서는 호출하는 위치에 따라 다르게 바인딩한다.

일반 함수에서의 this는 window를 바인딩한다.

 

function f1(){ return this }; 
f1();
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}

f1() === window; 
//true

 

 

객체의 메소드에서는 this가 객체를 바인딩한다.

 

var obj = {
  a: 'hello',
  fn2(){
    console.log(this);
    console.log(this.a);
  }
};
obj.fn2();
// obj
// hello

 

 

3. 생성자 함수와 인스턴스의 this

생성자 함수는 일반함수와 마찬가지이기 때문에 window가 바인딩된다.

new를 붙여 새로운 인스턴스를 생성하면 생성된 인스턴스가 this에 바인딩 된다.

 

function Cat(name, age) {
  this.name = name;
  this. age = age;
}
Cat('nabi', 2);
console.log(window.name, window.age);
//nabi, 2

var cat = new Cat('leo', 1)
console.log(window.name, window.age);
console.log(cat.name, cat.age);
//nabi, 2
//leo, 1

 

 

4. 엄격모드에서의 this는 undefined가 바인딩된다.

 

'use strict';

function fn1() {
  console.log(this)
}
fn1();
//undefined

fn1() === undefined;
//true

 

 

5. 화살표 함수에서의 this

일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

일반함수에서는 함수가 어떻게 호출되는지에 따라 this의 값이 달라졌으나,

화살표 함수에서의 this는 항상 외부에서 값을 가져온다.

 

//일반함수

let group = {
    title: "1팀",
    students: ["kim", "lee", "park"],

    showList() {
      this.students.forEach(
        function(student){ 
          console.log(this)
          //Window {window: Window, self: Window, document: document, name: '', location: Location, …}
          alert(this.title + ":" + student) 
          //undefined:kim
          //undefined:lee
          //undefined:park
         }
      )
   }
}

group.showList();

 

일반함수에서는 this가 window를 바인딩 하기 때문에 this.title을 찾아올 수 없다.

 

 

//화살표 함수

let group = {
    title: "1팀",
    students: ["kim", "lee", "park"],

    showList() {
      this.students.forEach(
        (student) => { 
          console.log(this)
          //{title: '1팀', students: Array(3), showList: ƒ}
          alert(this.title + ":" + student) 
          //1팀:kim
          //1팀:lee
          //1팀:park
        }
      )
    }
}

group.showList();

 

화살표 함수에서는 상위의 값을 가져와 정상적으로 나온다.

 

 

 

---

참조

https://ko.javascript.info/arrow-functions