본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 16 new, Constructor, instanceof and Instances

by Write and Remember 2019. 5. 10.

 

자바스크립트 핵심 컨셉 33가지

 

new 연산자(operator)와 Constructor부터 알아보자.

 

new를 사용하면 새 빈 객체가 생성되고

 

this를 새롭게 생긴 객체에 바인딩한다.

 

새로 생성된 __proto__ 라는 객체에 생성자 함수의

 

프로토타입 객체(prototype object)를

 

가리키는 속성(property)을 추가한다.

 

마지막으로 함수의 끝 부분에 this를 반환하여

 

함수에서 생성된 객체를 반환한다.

 

코드로 살펴보면,

 

function Student(name, age) {
  this.name = name;
  this.age = age;
}

 

const first = new Student('any', 21);

 

새로운 객체가 생성된다 - first object

 

this는 first object에 바인딩된다.

 

따라서 this에 대한 모든 참조는 first를 가리킨다.

 

__proto__가 추가되고. first.__proto__는 Student.prototype을 가리킨다.

 

console.log(first.name); // any

console.log(first.age); // 21

 

__proto__ 부분을 한번 알아보자.

 

참고로 Prototype과 관련해서는 Chapter 14에서 공부했던 적이 있다.

 

2019/05/06 - [Computer Science/JavaScript] - 자바스크립트 Chapter 14 Factories and Classes

 

모든 자바스크립트 객체는 프로토타입(prototype)을 가진다.

 

Student.prototype; // Object {...}

 

const second = new Student('jay', 30);


second.__proto__ === Student.prototype // true 

 

second를 생성했고 second의 __proto__와

 

Student.prototype을 비교해보니 true라는 결과가 나온다.

 

Student.prototype.constructor는 Student 생성자 함수를 가리켜야 한다.

 

Student.prototype.constructor; // Function Student

//  function Student(name, age) {
//    this.name = name;
//    this.age = age;
//  }

 

정리해보면 생성자 함수에는 .prototype 속성(property)이 있고

 

이 프로토타입(prototype)에는 생성자(constructor) 함수를

 

다시 가리키는 .constructor 라는 객체가 있다.

 

그런 다음 new 연산자(operator)를 사용하여

 

새 객체를 만들면,

 

각 객체에는 새 객체를 Student.prototype에 다시 연결하는

 

.__proto__ 속성(property)이 있다.

 

자바스크립트의 프로토타입(prototype)에 대한 이해는 상속 때문에 중요하다. 

 

프로토 타입 객체는 해당 생성자 함수로 생성된 모든 객체 간에 공유된다. 

 

즉, 모든 객체가 사용할 수 있는 프로토 타입에 함수와 속성을 추가할 수 있다.

 

예를 들면,

 

Student.prototype.sayInfo = function(){
  console.log(this.name + ' is ' + this.age + ' years old');
}

 

프로토타입에 sayInfo라는 함수를 추가했으므로

 

모든 Student는 sayInfo에 접근할 수 있다.

 

second.sayInfo(); // Jay is 30 years old

 

const third = new Student('amy', 20);

third; // Student {name: 'amy', age: 20}

third.sayInfo()
//amy is 20 years old

 

instaceof vs typeof

 

자바스크립트는 항상 type을 체크해야 한다.

 

그때 typeof로 체크하는데

 

typeof로 체크 가능한 건

 

number, string, boolean, function, undefined

 

instanceof로 체크 가능한 건 

 

array, object이다.

댓글0