this는 실행컨텍스트 문맥에 직결되는 부분이기도 하다.
실제 함수를 작성할때 꽤나 자주 사용하지만, this가 환경에 따라 참조값이 달라지는 부분이 있어 짚고 넘어가려 작성해본다.
this에 대하여,
this는 JavaScript 예약어다.
식별자와 값을 연결하는 과정으로 변수 선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하며 this 바인딩은 this와 this가 가리킬 객체를 바인당한다.
전역에서 선언된 함수 this
// 전역 환경
function Sunki(){
this.name = 'Sunki'
return this;
}
const sunki = new Sunki();
console.log(sunki); // Sunki { name: 'Sunki' }
function MyFn() {
this.title = 'Sunki!';
return this;
}
// new 연산자를 이용해서 새로운 객체를 얻는다.
const myfn = new MyFn();
myfn // MyFn {title: 'Sunki!'}
function -> global 인 경우와 new 연산자를 사용해서 생성자 함수 방식으로 인스턴스를 생성한 경우이다.
myFn가 빈객체를 만들어 이 생성자 함수에서 this가 빈 객체를 가르킨다.
// obj
const climb = {
title : 'bolder',
showTitle() {
console.log(this.title)
}
}
climb.showTitle(); // bolder -> 객체 메소드
// 고차 함수의 콜백함수 안에서 this
const fn = {
title: 'climbing',
tags: ['red','orange','yellow', 'green'],
showTags() {
this.tags.forEach(function (tag) {
console.log(tag); // red, orange, yellow, green
console.log(this) // 윈도우 객체 출력
})
}
}
fn.showTags();
// 객체 메소드 함수 this 해결방안
const fn2 = {
title: 'climbing',
tags: ['red', 'orange', 'yellow', 'green'],
showTags() {
this.tags.forEach(function(tag) {
console.log(tag);
console.log(this); // fn
}, this); // 여기는 일반 함수 바깥, fn 객체를 참조할 수 있다.
}
}
fn2.showTags();
method-> obj인 경우이며, showTitle이 fn객체의 메소드이기 때문에 this는 fn 객체를 참조한다.
고차함수 경우에는 콜백함수 안에서 this가 콜백함수가 일반 함수이기 때문에 전역 객체를 참조한다.
이 경우에는 콜백함수 다음 인자로 참조할 객체를 전달한다.
this는 이처럼 어떤 위치에 있고, 어디에서 호출하며, 어떤 함수에 있는지에 따라 참조 값이 달라지는 특성을 가지고 있어서 사용할 때 유의를 해야한다.