this 키워드 뿌시기!

'this' Keyword in Javascript

this는 함수 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체이다.

할머니: 나는 허리가 아프다 (나 === 할머니)
아버지: 나는 다리가 아프다 (나 === 아버지)
어머니: 나는 머리가 아프다 (나 === 어머니)

자바스크립트에서 this란 위의 문장들에서 나타난 '나'라는 단어와 비슷하다.
어떤 문맥이냐에 따라 그 의미(value)가 바뀐다.
즉, this의 값은 this를 사용하는 해당 함수를 '어떻게' 실행하느냐에 따라 바뀐다.

함수를 실행하는 방법엔 크게 4가지가 있는데, (this를 이용하는) 해당 함수를 이 4가지 중 어떤 방식으로 실행하느냐에 따라 this의 값이 바뀐다는 것이다.

1. Function 호출 (일반 함수 실행 방식)

function foo () {
  console.log(this);  
// 'this' === global object (브라우저상에선 window object)
}
foo();

일반적으로 함수를 실행하는 가장 기본적인 방식이다.
이렇게 함수를 실행시키면 브라우저 환경에서 this는 기본적으로 window 객체를 가리킨다.
node.js 환경에서는 브라우저 환경의 window와 비슷하게 작동하는 global이라는 객체를 가리키게 된다.

'use strict' 

strict모드란게 있는데 여러가지 오류나 개발자들의 실수를 보안하기 위해 엄격한 코드실행 환경을 적용해주는 모드이다.
이 모드가 적용되면 일반 함수 실행 방식에서 this는 undefined!
(주의)일반 함수 실행를 실행할 경우에는 애초에 this를 사용하지 않는 것을 권장한다.
흔히 사용하지 않는 방법!

2. Method 호출 (Dot Notation)

const age = 100

const Jennie = {
  age: 25,
  foo: function foo () {
    console.log(this.age);
  }
}

Jennie.foo();   // 25

object의 method를 호출시 this는 부모 객체(실행 시점 온점 왼쪽에 있는 객체)가 this의 값으로 설정된다.

3. .call or .apply or .bind호출

.call이랑 .apply를 썼을 때는 우리가 직접적으로 this의 값이 어떤 객체가 되야 하는지 지정한다고 생각하면 된다.

• foo.call(ken, 1, 2, 3, 4, 5)
  foo함수내부에서 첫번째 인자(ken)이라는 객체가 this값으로 설정이된다.
  두번째인자부터 나머지는 foo라는 함수에 인자로 넘어가게 된다.
  call은 인자의 수가 정해져 있지 않다.
  우리가 넘겨주고 싶은대로 넘겨주면 된다.

• foo.apply(ken, [1,2,3,4,5])
  apply는 무조건 인자를 2개만 받는다.
  첫번째 인자(ken)가 this의 값으로 설정된다.
  두번째인자로 무조건 배열이 들어온다.
  배열안의 요소들이 foo라는 함수안에 인자로 각각 들어가게 된다.

• bind도 첫번째 인자로 받는 애를 this값으로 설정이 되는데(bind의 인자 순서는 call과 동일!),
  bind는 call과 apply와 좀 다르게 바로 해당함수를 실행시키지 않고(foo를 바로 실행시키지 않고) 함수안에 첫번째인자를 this값을 설정해놓은(바인딩) 함수를 반환을 해준다.

const age = 100;
function foo () {
  console.log(this.age);
}

const ken = {
  age: 34
};

let bar = foo.bind(ken);
bar() // 34

함수가 bar라는 변수에 담기고 bar라는 변수에 담긴 함수를 실행해주면 foo라는 함수가 실행된다.

4. new 키워드를 이용한 생성자 호출

생성자 호출은 객체.메소드()과 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만, 객체가 new 키워드를 이용해 만들어졌다는 것이 다르다.

function BlackPink (name, age) {  //일반적으로 생성자함수는 함수이름 첫글자를 대문자로 쓴다.
  this.name = name; 
  this.age = 'age';
}  // this -> 새로운 객체가 만들어서 할당이 되서 실행이 된다. this: {}
  // new 라는 키워드를 쓰면 return this를 쓰지를 않아도 이코드가 자동으로 실행된다.

// 별개의 객체가 담긴다. 새로 만들어진 객체를 인스턴스(instances)라고 부른다
let jennie = new BlackPink('jennie', 24)
let lisa = new BlackPink('lisa', 23)

console.log(jennie) // {name: jennie, age: 24}
console.log(lisa)   // {name: lisa, age: 23}





[참고]
유튜브 - 바닐라코딩