This

인스턴스란?

 

비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Constructor)를 만들어 찍어내듯 사용하는데 이렇게 생성된 객체를 인스턴스라 부를 수 있다.

 

생성자 함수 (Constructor) = 거푸집

인스턴스 = 거푸집으로 찍어낸 칼

function Sword(color, metal) {
  this.color = color;
  this.metal = metal;
  this.is = function() {
    console.log(`This is ${this.color} ${this.metal} sword!`);
  };
}
const redSteel = new Sword('red', 'steel');

console.log(redSteel); //Sword {color: 'red', metal: 'steel', is: ƒ}

redSteel.is(); //This is red steel sword!

 

this 바인딩이란?

 

자바스크립트에서의 this란 문맥에 따라 이것이 가리키는 것이 달라진다.

우리가 this를 사용할 때 생성자 함수 안이나, 객체, Class 안에서 this를 사용했는데 

this는 앞으로 만들어질 인스턴스나 또는 지금의 객체 자기 자신을 가리키는 용도로 사용했다.

 

이렇게 this를 사용하면서 나 자신의 인스턴스를 가리키는 것

즉 특정한 객체와 this를 묶어두는 연결된 것 이것을 this 바인딩이라고 한다.

 

문맥에서의 this

 

this는 어디서 사용하느냐에 따라 가리키는 것이 달라진다.

 

• 글로벌일때
  • Browser (개발자 도구) : window
  • 노드: 모듈관련 된 것들
• 함수 내부에서의 this
  • useStrict일때는 undefined
  • 느슨한 모드일때는 globalThis
• 생성자 함수 또는 Class에서의 this
  • 앞으로 생성될 인스턴스 자체를 가리킴

'use strict';
/**
 * 글로벌 컨텍스트의 this
 *  - 브라우저: window
 *  - 노드: 모듈
 */
const x = 0;
module.exports.x = x;
console.log(this);
console.log(globalThis);
// globalThis.setTimeout()
// setTimeout()
console.clear();

/**
 * 함수 내부에서의 this
 * 엄격모드에서는 undefined
 * 느슨한 모드에서는 globalThis
 */
function fun() {
  console.log(this);
}
fun();

/**
 * 생성자 함수 또는 클래스에서의 this, 앞으로 생성될 인스턴스 자체를 가리킴
 */
function Cat(name) {
  this.name = name;
  this.printName = function () {
    console.log(this.name);
  };
}
const cat1 = new Cat('냐옹');
const cat2 = new Cat('미야옹');
cat1.printName();
cat2.printName();

 

동적 바인딩

 

자바, C#, C++ 같은 대부분의 객체지향 프로그래밍 언어에서의 this는 항상 자신의 인스턴스 자체를 가리킨다.

정적으로 인스턴스가 만들어지는 시점에 this가 결정되는 것이다.

하지만, 자바스크립트에서는 누가 호출하느냐에 따라서 가리키는 곳이 달라진다.

즉, 자바스크립트에서의 this는 호출하는 caller에 의해 동적으로 결정되는 것이다.

 

function Cat(name) {
  this.name = name;
  this.printName = function () {
    console.log(`고양이의 이름을 출력한다옹: ${this.name}`);
  };
}

function Dog(name) {
  this.name = name;
  this.printName = function () {
    console.log(`강아지의 이름을 출력한다옹: ${this.name}`);
  };
}

const cat = new Cat('냐옹');
const dog = new Dog('멍멍');
cat.printName();
dog.printName();
// 여기까지는 당연하다고 받아들일 것이다. //

dog.printName = cat.printName;
dog.printName(); // 고양이의 이름을 출력한다옹 : 멍멍
cat.printName(); // 고양이의 이름을 출력한다옹: 냐옹
// 누가 호출하느냐에 따라 결과값이 달라지는 모습
// 정적 바인딩이라면 일관성있게 냐옹이 출력되었을 것이다.

function printOnMonitor(printName) {
  console.log('모니터를 준비하고!, 전달된 콜백을 실행!');
  printName(); // 호출하는 자가 없기 때문에 결과는 undefined가 나올 것이다.
}

printOnMonitor(cat.printName); //undefined

즉, 동적 바인딩의 문제는 호출자가 없으면 this가 아무것도 가리키게 되지 않는다는 것이다.

 

정적 바인딩

 

자바스크립트의 this를 정적으로 바인딩시키는 방법은 아래와 같다.

1. bind 함수를 이용해서 수동적으로 바인딩 해주기.

this.printName = this.printName.bind(this);

위와 같이 작성해주면 위 예제에서와는 달리 this가 최초 호출자에게 귀속이 된다.

하지만 함수를 만들때마다 이렇게 수동적으로 작성하는 것은 번거로울 것이다.

 

2. 화살표 함수 사용

화살표 함수는 렉시컬 환경에서의 this를 기억한다.

화살표 함수 밖에서 제일 근접한 스코프의 this를 가리킨다.

 

 

화살표 함수의 장점 (사용이유)

 

자바스크립트의 함수는 만능이다.

함수처럼 사용도 하고 생성자 함수로도 사용한다. (클래스)

하지만, 이걸 위해서 불필요한 무거운 프로토타입이 생성된다.

 

이 단점을 상쇄하는 것이 화살표 함수이다.

 

화살표 함수의 특징

1. 문법이 깔끔하다.
2. 무거운 프로토타입을 생성하지 않는다.
3. 함수 자체 arguments
4. 자바스크립트에서 this의 정적바인딩을 가능케한다. (함수에서 제일 근접한 상위 스코프의 this에 정적으로 바인딩됨.)