[자바스크립트]this 키워드에 대해 알아보자!!!

 ✔this키워드

객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.

동작을 나타내는 메서드는 자신이 속한 객체의 상태 , 즉 프로퍼티를 참조하고 변경할 수 있어야 한다.

이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다

 

즉 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수다.

this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

✔ this가 가르키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다

1.일반 함수 안에서 쓰면 this는 window를 뜻합니다. (전역 객체가 바인딩됨)

function 함수(){
  console.log(this)
}
함수();

일반 함수로 호출된 모든 함수( 중첩함수 , 콜백함수) 내부의 this에 는 전역 객체가 바인딩 됩니다

var value = 1;
const obj = {
  value: 100,
  foo() {
    console.log("foo's this: ", this); // {value: 100, foo: ƒ}
    // 콜백 함수 내부의 this에는 전역 객체가 바인딩된다.
    setTimeout(function () {
      console.log("callback's this: ", this); // window
      console.log("callback's this.value: ", this.value); // 1
    }, 100);
  }
};
obj.foo();

2. 일반 함수는 호출위치에 따라 this가 정의되고 화살표 함수는 자신이 선언된 함수범위(만들어진 함수영역)에서  this가 정의된다

3.strict mode일 때 함수 안에서 쓰면 this는 undefined 입니다.

<script>
  'use strict';
  function 함수(){
    console.log(this)
  }
 함수();
 
</script>

IE 10버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면 

strict mode로 자바스크립트를 작성가능합니다. 

strict mode에선 var 키워드 없이 변수를 선언하거나, 

변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해줍니다. 

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해줍니다. 

4. object 자료형 메서드 내부에서의 this는 메서드를 호출한 객체를 가르킨다.

const person = {
  name: 'Lee',
  getName() {
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.
    return this.name;
  }
};

// 메서드 getName을 호출한 객체는 person이다.
console.log(person.getName()); // Lee

5.생성자 함수 내부의 this는 생성자 함수(constructor)가 생성할 인스턴스를 가리킨다.

function 기계(){
  this.이름 = 'Kim'
}
var 오브젝트 = new 기계() //{이름 : 'Kim'}

생성자 함수는 객체를 생성하는 함수이다 .