자바스크립트

[JS]this

민ズl 2024. 10. 12. 13:19
  • 일반 함수에서의 this : 함수를 호출한 객체
  • arrow함수에서의 this : 함수를 감싸는 상위 스코프
//전역 this
console.log(this) // window{...}

//엄격모드에서의 this
function f1() {
  "use strict";
  return console.log(this);
}
f1(); // undefined

//일반 함수에서의 this
function f2() {
  return console.log(this);
}
f2(); // window{...}

//객체 메서드에서의 this
const f3 = {
	name : "test",
	main : function(){
    	console.log(this)
    }
}
f3.main(); // {name: 'test', main: ƒ} , 함수를 호출한 객체

//화살표함수의 this
const f4 = {
	name : "test",
	main : () => {
    	console.log(this);
    }
}
f4.main(); // window{...}

 

Function.prototype.bind

  • this값을 정적으로 지정하고 싶을 때
  • 화살표함수는 ❌
function greet() {
    console.log(this.name);
}

const person = { name: 'Alice' };
const greetPerson = greet.bind(person);

greetPerson();  // Alice

 

 

 

[mdn 공식문서]

 

this - JavaScript | MDN

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

developer.mozilla.org