JS에서 this 사용하기

냥린이·2022년 1월 18일
0

Javascript/TypeScript

목록 보기
4/4

this 연산자를 사용하는 언어는 많지만, 늘 그렇듯, JS에서는 글로벌 객체를 조심해서 사용해야 한다. 어떤 시나리오가 있는지 알아보자.

(1) Regular Function Call - 일반 함수 호출

function test () {
	console.log(this);
}

test();

test(); 처럼 함수를 호출하는 방식을 일반 함수 실행 방식이라고 한다. 이때 foo 함수 안에 있는 this 는 Global Object, 브라우저 상에는 Window Object 를 가리킨다.

함수 바깥에 전역변수를 선언해뒀다면 함수에 매개변수를 어떤 것을 넘겨줬던지 무시하고 this는 전역변수를 가리킨다.

이러한 버그를 방지하기 위해 strict mode 를 사용한다면 this는 undefined가 된다.

(2) Dot Notation - 도트 표기법

함수이름.속성명();

도트를 사용하여 객체의 속성 값에 접근할 수 있다. 이때 this는 도트 앞에 써있는 객체 자체를 가리킨다. 이때 () 없이 객체.속성을 인스턴스로 만들고 일반 함수 호출 방식으로 부르면 다시 Global Object를 가리키게 된다. 아래 예제의 마지막 두번째 줄이 그 예시이다.

function foo() {
console.log(this.age);
}
var age = 100;
var ken = {
age: 36,
foo: foo
}
var wan = {
age: 32,
foo: foo
}
ken.foo(); // 36
wan.foo(); // 32

var fn = ken.foo;
fn(); // 100

(3) Explicit Binding - 명백한 바인딩

  • function.prototype.call
  • function.prototype.bind
  • function.prototype.apply

위와 같은 메소드를 이용해 this 의 역할을 지정해 줄 수 있다.

(4) new 키워드를 사용한 함수 실행

new 키워드로 함수를 새 인스턴스로 생성할 때 this 는 빈 객체를 가리킨다. 객체가 비어있다면 undefined가 출력된다.

function Foo () {
console.log(this.age); // undefined
this.age = 100; // 빈 객체에 속성 추가
console.log(this.age); // 100
}
new Foo(); // 객체를 반환한다. {age:100}

function Person () {
this.name = 'ken';
console.log(this);
}
var ken = new Person();
console.log(ken); // 객체를 반환한다. {name:"ken"}

// 만약 Person();으로 호출되었다면 
// this는 윈도우를 가리켜서 name:"ken"은 윈도우에 추가되고, 
// 막상 var ken에는 아무것도 할당되지 않아 빈 객체가 반환된다.

return 문이 없더라도 this는 빈 객체를 반환한다. 이것은, 생성자의 특징이며 심지어 return이 있더라도 무시하고 this 객체를 반환한다. 그러나 return 이 객체를 반환한다면 this 대신에 객체가 반환된다.


function foo () {
this.age = 100;
return 3;
}
var a = new foo();
console.log(a); // 생성자 반환 {age:100}

function foo () {
this.age = 100;
return { haha: 23232 };
}
var a = new foo();
console.log(a); // 객체 반환 {haha: 23232}

이해했나요?ㅎㅎ 테스트 해보세요! 아래 예시에서 'I can do my work! I am smart!'는 출력이 될까요?

function programmer() {
this.isSmart = false;
this.upgrade = function (version) {
this.isSmart = !!version;
work();
}
}
function work() {
it (this.isSmart) {
window.alert('I can do my work! I am smart!');
}
}
var programmer = new programmer();
programmer.upgrade(1.1);
참고

[JS/this] 자바스크립트, this의 4가지 역할

profile
홀로서기 기록장

0개의 댓글