[2021.03.18] New, 생성자, InstanceOf, Instance

✨ 생성자 함수

특징

모든 함수는 생성자 함수가 될 수 있음
함수 이름의 첫 글자는 대문자로 시작
생성자 함수는 반드시 new 연산자를 붙여서 실행
장점 - 손쉽게 사용자 객체를 만들 수 있음

예시)

function User(name) {
this.name = name;
this.isAdmin = false;
}

let user = new User("foo")

alert(user.name); // foo
alert(user.isAdmin); // false

실행 순서

예시)
```
function User(name) {
// this = {};

// 새로운 property를 this에 추가
this.name = name;
this.isAdmin = false;

// return this; (this의 암시적 반환)
}

let user = new User('foo')
// let user = { name: "foo", isAdmin: false } 와 같음

alert(user.name); // foo
alert(user.isAdmin); // false

new User('foo')
new User('John')
```
1. 빈 객체를 만듦({})
2. 빈 객체를 this에 할당
3. 함수 본문을 실행하면서 this에 새로운 property를 추가함
4. this를 반환
  - 이렇게 생성자 함수를 통해 객체를 만들면, 일일히 객체를 만드는 방법보다 훨씬 간단하고, 읽기 쉽게 객체를 만들 수 있음.
    재사용할 필요 없는 복잡한 객체를 만들 때
아래의 예시와 같이 익명 생성자 함수로 감싸 변수에 할당해주면, 단 한번만 호출되고 사라지기 때문에 재사용을 막으면서 코드를 캡슐화 할 수 있음
```
let user = new function() {
this.name = "John";
this.isAdmin = false;
}
```

생성자와 return문

생성자 함수에는 보통 return문이 없다. 반환해야 할 것들은 모두 this에 저장이 되고, this는 자동으로 반환되기 때문에 굳이 명시적으로 써 줄 필요가 없다. 그렇지만, 만약 return이 있는 생성자 함수라면 어떨까?

객체를 return한다면, this 대신 그 객체가 반환된다.

function BigUser() {
 this.name = "John";
 return { name: "Godzilla" };  // <-- this가 아닌 새로운 객체를 반환함
}
alert( new BigUser().name );  // Godzilla 반환

원시형을 return한다면, return문을 무시한다.

function SmallUser() {
this.name = "John";
return; // <-- this를 반환함
}
alert( new SmallUser().name );  // John

✨ Instance

쉽게 말해서, 현재 사용된 그 객체를 말한다. Object를 사용해 새로운 Object를 생성하면, Object가 반환되는데, 이 반환된 Object를 Instance라고 부른다. new 연산자를 이용해 Object를 생성하고, 변수에 할당할 수 있다. (변수에 할당된 Object가 Instance)

인스턴스마다 각각의 프로퍼티를 가질 수 있다.
새 Object를 어떻게 바꾸든, 원본 Object의 값이 바뀌지 않는다.

그렇기 때문에 인스턴스마다 다른 값을 유지하고 제어하기 위해 인스턴스를 생성한다.

function OriginObject() {
this.name = 'javascript'
}

var obj = new OriginObject();
obj.name = 'woowa';
console.log(obj.name); // woowa

var obj2 = new OriginObject();
console.log(obj2.name) // javascript

✨ Instance of

객체를 생성한 생성자 함수와 프로토타입 체인을 알 수 있다.
객체가 특정 Class에 속하는지, 아닌지를 확인할 수 있다.
상속 관계도 확인할 수 있다.

obj가 Class에 속하거나 Class를 상속받는 클래스에 속하면 true

class Rabbit {}
let rabbit = new Rabbit();

// rabbit이 Class Rabbit의 객체인가요?
alert( rabbit instanceof Rabbit ); // true

생성자 함수에서도 사용할 수 있음

// 클래스가 아닌 생성자 함수
function Rabbit() {}
let rabbit = new Rabbit();

alert( new Rabbit() instanceof Rabbit ); // true

Array 같은 내장 클래스에서도 사용할 수 있음

let arr = [1, 2, 3];

alert( arr instanceof Array ); // true
alert( arr instanceof Object); // true

// 여기에서 arr은 Array에도 속하지만, Object에도 속함
// Array는 프로토타입 기반으로 Object를 상속받기 때문

Instanceof의 동작

프로토타입 체인을 거슬러 올라가며 일치여부를 확인

class Animal {}
class Rabbit extends Animal {}

let rabbit = new Rabbit();
alert(rabbit instanceof Animal); // true

// rabbit.__proto__ === Rabbit.prototype
// rabbit.__proto__.__proto__ === Animal.prototype (일치!)

유사 메서드 - isPrototypeOf

참조하고 있는 prototype을 확인
특정 프로토타입으로부터 상속된 객체만 작동하게 하려는 코드에서 사용됨(특정 메소드나 속성이 객체에 있다는 것을 보장하려고 할 때에)
Class 생성자를 제외하고 포함 여부를 검사
검사할 때에 프로토타입 체인과 Class.prototype만 고려
```
function Minutes() { ... }
```

function Hour() { ... } Hour.prototype = new Minutes();

function Day() { ... } Day.prototype = new Hour();

function Week() { ... } Week.prototype = new Day();

var week = new Week();

// Week instance의 prototype Chain이 Hour과 연결되어있는지 확인 if (Day.prototype.isPrototypeOf(week)) { ... }

toggle-toggle / javascript-basic