[자바스크립트] this에 관하여

자바스크립트에서 this는 누가 나를 불렀나 입니다. 

변수를 선언해서 사용하는 것이 아니라 호출해서 사용한다는 것입니다.

 

1. 하나만 있는 this

 전역객체는 모든 객체의 유일한 최상위 객체이고, 일반적으로 브라우저의 전역객체는 window입니다. 

let x = this;
console.log(x) // window

 

2. 함수 안에서 사용한 this

function myFunction() {
  return this;
}
console.log(myFunction()); //Window

var num = 0;
function addNum() {
  this.num = 100;
  num++;
  
  console.log(num); // 101
  console.log(window.num); // 101
  console.log(num === window.num); // true
}
 
addNum();

 

3. 매소드 호출로 사용되는 this

 

메소드를 호출하면 기본적으로 this는 해당 메소드를 가지고 있는 객체에 의해 호출됩니다.

단, arrow function으로 작성한 함수의 경우 this는 상위의 this를 계승 받기에 전역객체가 됩니다.

const obj = {
	foo: function() {
		console.log('foo this:', this);
	},
	bar() {
		console.log('bar this:', this);
	},
	baz: () => {
		console.log('baz this:', this);
	},
}

obj.foo(); // obj
obj.bar(); // obj
obj.baz(); // window

 

4. 내부함수 호출에서 사용되는 this

 

내부함수는 내부함수가 일반함수, 메소드, 콜백함수 내부 어디에서 선언되었든 상관없이 this가 전역객체에 바인딩 됩니다.

const obj = {
	foo: function() {
		function fooInner() {
			console.log('fooInner this:', this);
		}

		fooInner();
	},

	// that 변수에 bar 메서드의 this를 할당하여 사용함으로써
	// 내부함수의 this가 전역객체를 바인딩하지 않도록 한다.
	bar: function() {
		const that = this;
		function barInner() {
			console.log('barInner this:', that);
		}
	
		barInner();
	},

	// 화살표함수의 this는 상위 컨텍스트의 this를 계승받기 때문에,
  // baz 메서드의 this를 바인딩 한다.
	baz: function() {
		const bazInner = () => {
			console.log('bazInner this:', this);
		}
		
		bazInner();
	}
}

obj.foo(); // window
obj.bar(); // obj
obj.baz(); // obj

 

5. 콜백 함수에서 호출되는 this

const obj = {
	foo: function() {
		setTimeout(() => {
			console.log('foo setTimeout this:', this);
		}, 1000);
	}
}

obj.foo(); // foo setTimeout this: window