본문 바로가기

코딩도 합니다/JS

[자바스크립트 js] this



  • 객체의 메소드를 만들 때 중요한 역할을 한다.
  • 함수를 호출한 객체를 가리키는 키워드.
  • 웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 된다.
    하지만, 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 된다.
  • 코드를 작성할 때 값이 미리 설정 되는 게 아니라, 함수가 호출될 때마다 상대적으로 값이 변한다.
  • 메소드를 만들 때 this에 메소드로 호출한 객체를 가리키고 싶다면,
    arrow fucntion 보다는 일반 함수를 사용해야 한다.
  • this를 활용한 메소드를 다른 여러 객체에 활용하고 싶을 때 무조건 전역 스코프를 가지는 함수를 만들 필요 없다.
    일반함수로 this를 활용한 메소드를 객체 내부에서 선언하고,
    다른 객체에서 그 메소드를 참조하더라도 this는 항상 그 메소드를 호출한 객체를 가리키게 된다.

 

  this 사용법

this 사용전

function sayTooktak() {
	return `${do.first} ${do.second}`;
}

const do = {
	first: '나는',
    second: '할 수 있다',
    sayTooktak: sayTooktak,
};

const can = {
	first : '나도',
    second: '자바스크립트 할 수 있다',
    sayTooktak: sayTooktak,
};

console.log(do.sayTooktak());
console.log(can.sayTooktak());




// 나는 할 수 있다
// 나는 할 수 있다

 

this 사용후

function sayTooktak() {
	return `${this.first} ${this.second}`;
}

const do = {
	first: '나는',
    second: '할 수 있다',
    sayTooktak: sayTooktak,
};

const can = {
	first : '나도',
    second: '자바스크립트 할 수 있다',
    sayTooktak: sayTooktak,
};

console.log(do.sayTooktak());
console.log(can.sayTooktak());




// 나는 할 수 있다
// 나도 자바스크립트 할 수 있다

 

728x90