[JS] this

 

 

 

자기참조변수인 this 에 대해 알아보자

 

 

 

this ? 

 

- 자신이 속한 객체  OR  자신이 생성할 인스턴스를 가리키는 자기 참조 변수

 

- this 바인딩은 함수 호출 방식에 의해 동적으로 결정

 

- this는 코드 어디에서도 참조 가능

 

 

 

Q. this를 왜 사용할까요 ?

 생성자 함수를 예로 들자 . 
생성자 함수 내부에 프로퍼티 , 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야한다.
하지만 아직 생성이 되지 않았기 때문에 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
이때 this를 이용하는것이다!

 

Q. this 바인딩은 뭐죠 ?

바인딩이란 식별자와 값을 연결하는 과정을 의미한다.
따라서 this 바인딩이란 this(키워드지만 식별자 역할)가 가리킬 객체를 바인딩 하는것이다. 

 

 

 

 

---

 

 

생성자 함수 호출에서 this 

 

- 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다. 

 

var name = "mandelina";

function Func() {
  this.name = "Hi";
  this.print = function f() { console.log(this.name); };
}

var a = new Func();
a.print(); //Hi

 

 

 

 

 

apply  call  bind 메서드에 의한 this

 

- apply와 call메서드는 함수를 호출하여 그 함수의 this에 바인딩 시킨다.

 

- bind() 는 this가 고정된 새로운 함수를 반환한다.

 

function sayName(){
  console.log(this.name);
}

var one = {
  name: 'one',
  sayName : sayName
}

var two = {
  name : 'two',
  sayName : sayName.bind(one)
}

one.sayName();
two.sayName();

- 여기서 주목해야할 점은 two.sayName() 이다 . one으로 바인딩하였으므로 two.name 이 two여도 one이 출력된다.

 

 

 

 

 

객체의 메서드 호출에서 this

 

- 객체의 메소드로 호출할 경우 해당 객체에 바인딩 된다.

 

const person = {
    name : 'mandelina',
    getName(){
        return this.name;
    }
};

console.log(person.getName());

 

여기서 getName메서드는 person객체의 메서드다. (즉 , 프로퍼티에 바인딩 된 함수)

 

이 getName 함수는 person에 포함되어 있는 것이 아닌 독립적으로 존대하는 별도의 객체이고 , 

 

getName 프로퍼티가 함수 객체를 가리키고 있을 뿐이다.

 

 

 

 

 

 

그외  this

 

- strict mode에서 this : undefined 로 바인딩

 

- 일반 함수에서 this : 브라우저 환경에서  window객체에 바인딩 

 

 

 

Q. 왜 strict mode에선 this가 undefined이죠 ?
- this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기참조변수이다.
따라서 객체의 메서드 내부 또는 함수내부에서만 의미가 있지 일반함수에선 사용할 이유가 없다.
그렇기에 undefined가 바인딩 되는것이다.

 

 

 

 

---

 

 

 

정리

 

0. this란?  자신을 호출한 객체 , 자신이 생성할 객체

 

1. new를 사용할 경우 해당 객체로 바인딩

 

2. call, apply ,bind 같은 메서드를 사용시 인자로 전달된 객체에 바인딩

 

3. 객체의 메소드로 호출한 경우 해당 객체에 바인딩

 

4. 일반 함수로 호출된 모든 함수내부의 this에는 전역 객체가 바인딩

 

5. strict mode에서 this는 undefined