this 💁

자바스트립트에서 제일 헷갈리는 개념인 this 를 알아보자!

자바스크립트의 this는 어느상황에서도 사용이 가능 하고 또 상황에 따라 바라보는 this 가 다르기 때문에 헷갈리는 개념이다. 그렇다면 어떻게 다른 것 일까?

1. this가 결정되는 시점

=> 실행 컨택스트가 생성 될 때, 즉 함수 를 호출할 때 결정된다.

• 전역공간

  this 는 전역객체 브라우저 환경에서는 window이고 , node.js 환경에서는 global을 의미한다.

console.log(this)
console.log(window) 
// 콘솔을 찍어보면 this 는 window를 출력한다.
console.log(this === window)
//true 

2. 메서드 안에서의 this

• 메서드는 객체의 프로퍼티에 할당된 함수 가 아니라 객체의 메서드로서 호출한 경우에만 메서드로 작동하고 그렇지 않을때는 함수로 작동한다.

let func = function (x) {
  console.log(this, x)
}

func(1); // 

let obj = {
method : func
}

obj.method(2);

• 같은 func을 바라보고 호출하였는데, func(1)을 호출할땐 this는 window를 바라보고, obj.method(2)를 호출할때는 this 가 obj를 바라보고 있다.
• 그렇다면 어떻게 구분 할 수 있는 것일까?💁
  : 그것은 함수앞의 점 혹은 대괄호 표시법 으로 메서드로 호출한 경우만 해당한다👌
  : 즉 obj.method(2), obj['method'](2) 로 호출한 것은 함수를 호출할때 객체를 명시해 주었기 때문에 메서드 호출이고 그 경우는 this 가 해당 객체를 뜻하고 그렇지 않고 그냥 함수만 호출하는 경우에 this는 항상 window이다. 즉 함수를 호출할때, 함수 안에 있는지, 메서드 안에있는지가 중요한 것이 아니라 호출 할 때, 구문앞에 점 혹은 대괄호가 있는지가 관건인 것이다!

3. 함수에서의 this

• 함수 내에서도 this를 상속받게 하려면 변수에 저장 하는 방식 밖에 없다.

var obj = {
	outer : function () {
		console.log(this)
		var self = this //상위 스코프의 this를 변수 self 에 저장해주고 
      	var innerFunc = function () {
        	console.log(self) // 아래 내부함수에서 사용하면 window가 아닌 outer를 가리키게 된다 
        }
			}
		}

• 이러한 문제를 보완하기 위해 ES6에 등장한 화살표함수 (arrow function)은 this 를 바인딩하지 않아서, 함수내에서 사용되면 window객체가 아닌 상위 스코프의 this를 그대로 사용할 수 있게 한다.

var obj = {
outer : function () {
var innerFunc = () => {
console.log(this) // 이렇게 하면 this 는 outer를 의미한다 
}
innerFunc();
}
}

4. 생성자 함수에서의 this

• 자바스크립트에서 생성자 함수는 new명령어와 함께 함수를 호출하면 this는 만들어질 인스턴스 자산이 된다.

let Student = function (name,age) {
	this.greeting = "hello";
  	this.name = name;
  	this.age = age; 
}

let joanne = new Student("joanne", 29);

//Student { greeting: 'hello', name: 'jojo', age: 29 }

5. 명시적으로 this를 바인딩 하는 방법