[JS] 객체리터럴, this, bind()

객체 정의

var healthObj = {
  name : "달리기",
  lastTime : "PM10:12",
  showHealth : function() {
    console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
  }
}

healthObj.showHealth();

 

 

 

this

객체 안에서의 this는 그 객체 자신을 가리킴

ES6부터 객체에서 메소드를 사용할 때 function 생략 가능

const obj = {
   getName() {
     return this.name;
     },
  setName(name) {
      this.name = name;
    }
}
obj.setName("crong");
const result = obj.getName();

 

 

함수가 실행될 때, 함수에서 가리키는 this 키워드를 출력하면

프로그램이 현재 가리키고 있는 객체를 알 수 있음

function get() {
    return this;
}

get(); //window. 함수가 실행될때의 컨텍스트는 window를 참조한다.
new get(); //object. new키워드를 쓰면 새로운 object context가 생성된다.

 

비동기적으로 실행되는 함수에서는,

프로그램이 대상인 객체를 가리키지 않고 있을 수 있음

아래의 setTimeout() 속 this는 그 당시에 healthObj를 가리키지 않고

window를 가리키고 있기 때문에 존재하지 않는 변수라며 에러 발생

var healthObj = {
  name : "달리기",
  lastTime : "PM10:12",
  showHealth : function() {
    setTimeout(function() {  // setTimeout( () => {
    	//debugger
        console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");      
    }, 1000)
  }
}
healthObj.showHealth();

 

 

 

bind

새로운 함수를 반환하는 함수

첫번째 인자로 this를 주어, 그 시점의 this를 기억하는 새로운 함수가 반환됨

this가 가리키는 대상을 바꿔줌

 

해당 내용이 실행될 때의 this를 가리키지 않고,

처음 시작할 때 가리키던 this를 그대로 가지고 갈 수 있도록 바인드 해줌

var healthObj = {
  name : "달리기",
  lastTime : "PM10:12",
  showHealth : function() {
    setTimeout(function() {
        console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");      
    }.bind(this), 1000)
  }
}
healthObj.showHealth();