[JavaScript] this 알아보자

Intro

함수를 공부하며 약간 막혔던 scope에 대해서는 이전 글에 정리를 하며 이해를 했으니 이번에는 this에 대해 알아볼려 한다. 일단 화살표 함수형에서는 this가 바인딩이 되지 않는 경우가 있다는걸 알게 되었는데 다른 곳에서는 문제가 없는지 아니면 다른 부분이 있는지 알아볼려한다.

사실 scope와 같이 정리할려 했는데 var +function scope 때문에 혼동이 와서 먼저 올리고 잠시 쉬었다 다시 의자에 앉았다. var는 해악이라 생각한다.

this

상황(실행 컨텍스트)에 따라서 값이 달라지지만 기본적으로 window 객체를 가리킨다.

1. 전역 공간

브라우저 환경에서는 this가 window(전역객체)를 가리키는 반면, Node.js 환경에서는 global 객체가 아닌 module.exports를 가리킨다.

// 브라우저 환경
console.log(this); // window

// Node.js 환경
console.log(this); // {} => module.exports

2. 메서드

메서드 안에서의 this는 해당 메서드를 담고 있는 객체를 가리킨다.

const user = {
  name: "JJuuuunn",
  age: 30,
  info() {
    console.log(`이름 : ${this.name}`); // 출력: JJuuuunn
    console.log(`나이 : ${this.age}`); // 출력: 30
  }
}

3. 함수

생성자 함수 안에서 this는 인스턴스를 가리킨다.

function User(name) {
  this.name = name;
}

const ysj = new User("JJuuuunn");
console.log(ysj.name); // "JJuuuunn"

4. 화살표 함수

이전 글 함수에 대해 공부한데로 화살표 함수는 this 바인딩을 지원하지 않는다 그래서 상위 스코프의 this를 그대로 가져와 사용한다.

const user = {
  name: "JJuuuunn",
  info: function () {
    const sayName = () => {
      console.log(`이름은 ${this.name}입니다.`); // this => user를 가르킴
    };
    sayName();
  },
  info2: () => {
    console.log(`이름은 ${this.name}입니다.`); // this => 전역객체를 가르킴
  }
};

user.info(); // 출력: 이름은 JJuuuunn입니다.
user.info2(); // 출력: undefined

 

만약 user전에 var 변수로 name이 선언과 할당이 되어 있었다면 info2에서 할당된 값으로 나오지만, 

let과 const는 전역 변수로 선언해도 전역 객체의 프로퍼티에 추가 되지 않기때문에 undefined가 나온다.

5. 명시적 바인딩 (call, apply, bind 키워드)

• call : 인수를 개별적으로 전달하여 함수를 실행
• apply : 인수를 배열로 전달하여 함수를 실행

const mike = {
  name: 'Mike'
};

const tom = {
  name: 'Tom'
};

function showThisName() {
  console.log(this.name);
}

showThisName(); // this가 window를 가리키므로 전역객체에 name이 없으므로 빈 값이 출력
showThisName.call(mike); // 출력: Mike
showThisName.call(tom); // 출력: Tom

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

// call 방식
update.call(mike, 1999, "singer"); // this가 mike 객체를 바라봄
console.log(mike); // 출력: {name: 'Mike', birthYear: 1999, occupation: 'singer'}
// apply 방식
update.apply(tom, [2002, "teacher"]); // this가 tom 객체를 바라봄
console.log(tom); // 출력: {name: 'Tom', birthYear: 2002, occupation: 'teacher'}

 

bind 

call, apply 와 같이 해당 코드에서만 this를 바라보는게 아닌 영구적으로 this를 바라보도록 변경한다.

const mike = {
  name: 'Mike'
};

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
}

const updateMike = update.bind(mike); // mike를 this로 바라보는 update함수가 updateMike에 담김

updateMike(1980, "police");
console.log(mike); // 출력: {name: 'Mike', birthYear: 1980, occupation: 'police'}

---

마무리

와..... call, apply 글만 봐서는 이게 도대체 뭔 말이야 라고 해서 유튜브 찾아봤는데 신의 한수네...

화살표 함수 에서만 조금 달라서 헷갈릴줄 알앗는데 call, apply 키워드에서 얼마나 시간을 날린거야...

call, apply 이해한 뒤 bind보니 이해가 잘되네 휴....

두고두고 다시 봐야겠네

 

[참고]

hanamon - this

MDN - this

Youtube - 코딩앙마