[Javascript] this 키워드 알아보기

작년 처음 블로그를 시작하면서 React와 Javascript 정리를 블로그에 올렸었는데,

1년이 지나면서 현업에서 경험한 것들과, 추가적인 공부한 것들을 포함하여 React와 Javascript의 어려운 부분들을 다시 정리 해보려합니다.

 

1. 객체에서의 this

객체 안에서 this를 사용할때, this가 나타내는 것은 해당 객체를 뜻합니다.

const obj = {
  name: "asdf",
  greet: function() {
    console.log(`This is `)
  }
}

obj.greet() // This is:  {name: 'asdf', greet: ƒ}

 

하지만 이걸 함수에서 바로 나타내보면

function greet() {
  console.log("This is: ", this)
}

greet() // This is:  Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

 

this는 window 객체를 가리키게됩니다. (브라우저 기준,,,, node에서는 global 객체를 가리킴)

 

따라서 아래와 같은 결과가 나올수있습니다.

const obj = {
  name: "asdf",
  greet: function() {
    console.log("This is: ", this)
  }
}

const func = obj.greet
func() // This is:  Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

 

이를 정리해보면 아래와 같습니다.

1. js에서 this 키워드의 값은 함수가 호출되는 방식에 따라 달라집니다.
   • 객체의 메소드로서 함수가 호출될 때, this는 해당 객체를 가리키지만, 일반 함수로 호출될 때는 전역 객체 (window 브라우저에서, global Node.js에서)를 가리킵니다.
   • 이는 함수가 어떻게 실행되느냐에 따라 this 값에 직접적인 영향을 미친다는 것을 의미합니다.
2. 메소드와 함수의 차이
   • 객체에 할당된 함수를 보통 메소드라 부르고, 그냥 독립적으로 정의된 함수를 함수라합니다.
   • 메소드에서의 this는 해당 객체를 가리키고, 함수에서의 this는 전역 객체( window 브라우저에서, global Node.js에서 )를 가리킵니다.
3. 객체의 메소드를 다른 변수에 할당하고 그 변수를 통해 함수를 호출하면, 해당 함수는 더 이상 메소드로서가 아닌 함수로서 호출되므로 this는 전역 객체( window 브라우저에서, global Node.js에서 ) 를 가리키게 됩니다.

2. 클래스에서의 this

클래스에서의 this도 객체에서의 this와 마찬가지로 해당 this를 포함하고있는 클래스를 가리킵니다.

// 객체
const obj = {
	name: "1"
	objFunc: function() {
		return `This is ${this.name}`
	}
}

const func = obj.objFunc
func() // "This is "

// 클래스
class Cls {
	constructor(name) {
		this.name = name
	}
	
	clsFunc() {
		return `This is ${this.name}`
	}
}

const cls = new Cls()
const func = cls.clsFunc
func() // "This is {undefined}" => 에러 발생

 

위에서 보면

객체의 메소드를 변수에 할당한 함수 => this는 전역 객체( window 브라우저에서, global Node.js에서 )를 가리키게 되고, window에는 일반적으로 name이라는 속성이 없으므로 "This is "이라는 결과가 나옵니다.

 

반면

클래스 인스턴스에서 분리하여 일반 함수로 호출  => 이 또한 this는 undefined가 나옵니다.

 

이러한 차이가 발생하는 이유는, 클래스는 strict mode 이기 때문입니다.

 

1. strict mode에서의 this
   • strict mode에서의 this 값은 undefined로 설정됩니다. 이는 개발자가 this를 실수로 전역 객체에 바인딩하는 것을 방지하기 위함입니다.

 

3. Array function 에서의 this

• 화살표 함수는 this를 둘러싼 외부 스코프에 자동으로 바인딩됩니다. 
• 화살표 함수의 this는 선언될 때의 컨텍스트를 유지하기 때문에, bind나 다른 메소드를 사용하여 this를 변경할 수 없습니다.