ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 16 new, Constructor, instanceof and Instances
    Computer Science/JavaScript 2019.05.10 17:21

     

    자바스크립트 핵심 컨셉 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