4주차 강의 this

자바스크립트의 'this'는 선언이 아닌 어떻게 호출되었느냐가 중점이다!!
누가 나를 불렀는가?의 초점을 맞추면 this의 값이 어떻게 나오는지 알 수 있다.

 

-function 키워드를 이용해 생성한 일반 함수와는 다르게, 화살표 함수 내부에는 this와 arugments가 존재하지 않는다!!
사용할 경우, 일반 변수와 동일하게 스코프체인을 따라 탐색하게 된다. 즉 화살표함수에서 this를 사용하면 스코프체인을 따라 this를 찾으러 간다.

 

this를 선언하는 선언부의 초점이 아닌 어떻게 함수가 실행되고 있는지를 봐야 된다. 그리고 그 실행문에는 4가지 경우가 있다.

 

1. 일반함수선언

 - 일반 함수처럼 선언 할 경우 this는 Global Object처럼 실행한다. 그래서 만약 값이 없다면 뜨지 않는다. 
엄격한 모드를 사용하는 경우 this는 undefined가 나온다. 

엄격한 모드를 사용하지 않을 경우 Global Object처럼 인식한다.

2. . Dot Notation

var age = 29;

const abc = {
 age: 20,
 foo: function () {
 console.log(this.age);
 }
 
 const func = abc();
 
//일반 함수처럼 인식해서 this 값은 global Object로 29가 나온다
 func();
 
//Dot Notation으로 abc를 인식 20이 나온다.
 abc.foo();

 

3. call, apply, bind

  함수에도 메소드가 있다. 그리고 이 3가지는 함수의 메소드인데 비슷하면서도 약간의 차이점이 있기 때문에 헷갈릴 수 있다.

function abc() {
console.log(this);
}

//일반적인 실행
abc();

//call, apply 실행 결과는 같다 
abc.call();
abc.apply();

function foo(a) {
console.log(this.age);
console.log(a);

const moo = {
age: 29;
}

foo.call(ken, 1); //ken, 1출력
foo.apply(ken, [1]); //ken 1출력

call과 apply의 공통점은 바로 뒤에 오는 인자는 this값으로 받는다. 

 

차이점은
call은 그 뒤에 인자를 받는대로 그대로 매개변수가 가능하고,

apply는 인자를 2개만 받고, 2번째 인자는 배열로 받아야 한다. 

만약 매개변수가 확실하다면 call로, 그게 아니라 배열 메소드를 이용해 바꿔줘야 된다면 apply를 사용하면 좋을 것 같다.

 

bind는 call과 비슷하다. 첫 번째 인자는 this값 그리고 매개변수가 얼마든지 가능하다 그러나 쓰임새가 다르다.

function foo() {
console.log(this);
}

const abc = foo.bind();

abc();

바로 메소드를 이용해 작동시키지 않고, 새로운 함수를 반환한다. 즉 abc라는 함수의 값을 전해주고, 그 abc를 실행시켜야지 작동한다. 

bind메소드는 새로운 함수를 반환하고 실행했을 때 원본 함수가 실행한다!! 잊지말자. bind를 쓰는 것 만으로 끝나지 않는다.

 

4. new 키워드

new를 사용했을 경우 빈 객체가 된다.

function Foo(name) {
this.name = name;
console.log(this);
}

new Foo("yohan")
//new를 쓸 때 통상적으로 맨 앞은 대문자로 쓴다

그러면 foo {name:yohan}이 된다. 

 

this는 객체지향을 비롯해 많은 부분에서 사용하기 때문에 자세히 짚고, 문제도 많이 풀어보면 좋다. 

https://dmitripavlutin.com/javascript-this-interview-questions/

7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them?

https://dev.to/liaowow/take-this-quiz-understand-how-this-works-in-javascript-44dj

Take 'this' Quiz, Understand How 'this' Works in JavaScript

정리판