JavaScript this

JavaScript에서 this는 다른 언어와 다르게 동작함

다른 언어에서는 일반적으로 this는 자신을 가리키는 참조 변수로 사용됨 

JavaScript에서는 this에 바인딩되는 객체는 한가지가 아니라 함수 호출 방식에 따라 달라짐

대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정됨

-> this가 사용된 함수가 어디서 어떻게 실행되었는지가 중요!!

누가 this를 불렀는지를 알면 조금 쉬울지도..?

 

브라우저의 콘솔 창에 this를 호출하면

이런 실행 결과가 나온다

window 객체가 브라우저의 전역 객체이기 때문!

 

- this 바인딩 규칙

• 함수 실행 시 전역객체(window) 할당
• 메소드 호출 시 메소드를 소유하고 있는 해당 객체 할당
• 객체 생성 시 생성된 객체 할당

 

---

• 전역에서 사용

 

var a = this;
console.log(a);	//Window

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

위의 실행결과는 window, window로 동일하다.

전역 객체란 전역 범위에 존재하는 객체를 뜻하는데, a 변수와 myFn 함수 둘 다 전역 범위에 선언되어있기 때문임

전역에 선언된 모든 변수/함수는 window 객체의 프로퍼티와 메소드임!!

 

---

• 메서드에서 사용

 

var name = 'abc';
var person = {
  name: 'heedonguri',
  foo: function() {
    console.log(this.name);
  }
};

person.foo();	// heedonguri

var a = person.foo;
a();	//abc

- 첫 번째 실행결과

객체 메서드 foo 안에 this.name은 heedonguri를 가르킴

메서드 호출 시, 메서드 내부에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩 됨

 

- 두번째 실행결과

a는 person.foo를 꺼내온 것

person의 메서드가 아니고 변수에 담긴 일반함수이므로, 전역에 선언된 abc가 출력

내부함수는 어디에서 선언되었든 관계없이 this에 전역객체를 바인딩 함

 

(호출하는 함수가 객체의 메서드인지, 일반 함수인지 주의하자..)

 

---

• 이벤트 핸들러에서 사용

 

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  console.log(this);	// btn
});

이벤트 핸들러에서 this는 이벤트를 받는 HTML 요소를 가르킴

 

---

• 생성자에서 사용

 

function Person(name) {
  this.name = name;
}

var kim = new Person(kim);
console.log(kim.name);	// kim

생성자 함수를 호출하면 this 바인딩이 메소드나 함수 호출과 다르게 동작

생성자 함수 호출을 통해 만들어진 객체의 this는 새로 생성된 객체를 가르킴

this를 통해 생성한 프로퍼티와 메소드는 새로 생성된 객체에 추가됨

 

new Person 이라는 생성자 함수는 빈 객체를 생성해서 name 이라는 속성을 만들고,  'kim'이란 값을 할당해줌

 

---

• 명시적 바인딩(apply/call)

 

명시적 바인딩이란 쉽게 말해 짝을 지어주는 것

apply()와 call() 메서드는 인자를 this로 만들어주는 기능을 함

const Person = { name : 'heedonguri' };

const say = function(age) {
  console.log(this.name +' '+age);
}

say(20);				// 20
say.call(Person, 20);	// heedonguri 20	
say.apply(Person, [20]);	//hedonguri 20

위와 같이 사용하면 됨

apply()와 call()의 차이점은 apply()는 인자를 배열로 받는다는 것

 

---

• 화살표 함수로 사용

 

화살표 함수 안에서 this는 항상 상위 스코프의 this를 가르킴

일반 함수에서는 함수 선언할 때, this에 바인딩 할 객체가 동적으로 정해지지만

화살표 함수에서는 this에 바인딩 할 객체가 정적으로 결정됨

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();		// undefined

cat.foo1() 메소드 호출 -> 내부 함수인 foo2 실행됨 -> foo2 내부의 this는 지정되지 않아서 전역 객체 가르킴

-> 전역 객체에 name이란 속성 존재X -> undefined

 

화살표 함수로 바꾸면

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = () => {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// meow

해결되었당!

 

JavaScript에서 this 바인딩 문제를 화살표 함수를 사용하면 해결된다

헷갈릴 때 그냥 화살표함수 써야겠다..