[JavaScript] this 설명/문제점/해결 방법 예제 확인 1

JavaScript

"This"

 

자바스크립트 "this"는 어려운 개념이에요.

this를 정확하게 알고자 한다면, 정말 많은 개념들을 숙지하고 있어야 합니다.

ex) binding, arrow function, lexical scope, context 등등..

 

하지만 우리는 this가 왜 있으면 좋은 지부터 짚어 볼게요. 차근차근 하나씩 예제를 통해서 보겠습니다.

첫 데이트를 할 때, 비싼 외제차를 사주지 않으니까요 :) 

 

1) 문제점

let contact = {
  firstName: "frank",
  printName : function(){
    // console.log(firstName);  // firstName is not defined
    console.log(contact.firstName);
  }
}

contact.printName();  // frank

let newContact = contact;
contact = null;
newContact.printName(); // Cannot read property 'firstName' of null

// printName() 안에서 contact.firstName을 직접적으로!!! 가르키고 있으므로
// newContact.printName() 코드는 깨지게 됩니다.

// 만약 printName()안에서 contact.firstName 대신 상대적으로!!!
// firstName을 가르키는 슈퍼키워드가 있다면 얼마나 좋을까요?

1) 해결 방법, 슈퍼 키워드 -> 'this'

let contact = {
  firstName: "frank",
  printName : function(){
    console.log(this.firstName);
  }
}
contact.printName() // frank

let one = contact;
let two = contact; 
let anyKeyword = contact; 

contact = null; 

one.printName(); // frank
two.printName(); // frank
anyKeyword.printName(); // frank

 

2)  문제점

 

함수는 어디에서 호출됐는지가 중요합니다.

이 중요한 호출 성질을 잃어버리게 된다면 어떻게 될까요?

 

 

let contact = {
  firstName: "frank",
  printName : function(){
    console.log(this.firstName);
  }
}
function add(x, y, callback){
    console.log(x+y);
    callback();
}
add(1,2,contact.printName); // 3, undefined

/*
contact.printName
 -> 이렇게 되면 contact.firstName() 호출 성질을 잃게 됩니다.
 -> 단지 함수만 표현되요.

function(){
    console.log(this.firstName);
  }
*/

부족한 부분이 있다면 모두를 위해 지적해주시면 감사드리겠습니다.