본문 바로가기

개발_JavaScript

JavaScript에서의 this 란?

반응형

this는 '함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조' 라고 볼 수 있다.

var list = {
	name: 'Lee',
    sayHello: ()=>{
    	console.log("Hello! " + this.name);
    }
}

이때 

list.sayHello() 를 실행하면 Hello! Lee 가 콘솔에 출력됨

이유를 뜯어보면, this.name에서 함수 sayHello()가 호출되었을 때 sayHello가 속해있던 객체는 list객체다.

따라서 정의에 따라 this는 이 list객체를 참조하기 때문에, this.name 은 list.name의 값인 Lee를 참조한다.

this 가 함수가 호출 되었을 때 그 함수가 속해있는 객체를 가리킴을 더 명확히 확인하기 위해, 아래 예를 추가로 들 수 있다.

var list2 = {name: Kim};
list2.sayHello = list.sayHello;

이때 list2.sayHello()의 출력값은 Hello! Kim이다.

name을 키값, Kim을 value로 갖고있는 하나의 Property를 갖고 있는 객체, list2를 생성하였고, 

그 list2 객체에 추가로 list 객체에 있는 sayHello()메쏘드를 정의하고 추가하였다. 

이때 list2.sayHello() 를 실행하면, Hello! Kim이 출력된다.

list2내 sayHello 메쏘드를 실행하면, 이때 sayHello안의 this.name에서의 'this'는 정의에 따라 이때 실행된 함수가 속한 객체 list2를 참조하기 때문에, list2.name을 참조한다. lsit2.name의 참조값은 이때 Kim이므로 this.name은 Kim 을 참조하는 것이다. 

이와 같이, this 는 함수가 실행될 때 결정된다. 

 

반응형

'개발_JavaScript' 카테고리의 다른 글

JavsScript에서의 객체 참조  (0) 2019.05.01
JavaScript 에서의 호출 Stack(Call Stack)  (0) 2019.04.30
Why Node.js?  (0) 2019.04.30