constructor 초기화 / 컨스트럭터 초기화, 자바스크립트 class / classes - 객체지향 자바스크립트 06

ES6 classes 검색하면 웹브라우저에서 제공하는 부분 확인가능
https://caniuse.com
현재 익스11에서 classes 지원 안하지만 충분함

classes : 이미 가지고 있는 기능을 활용하여 사용되기 때문에 큰 문제가 없다


바벨은 자바스크립트 컴파일러이다
ES6의 코드를 이전 코드로 변환해줌 (이전으로 이후로)
https://babeljs.io

Babel · The compiler for next generation JavaScript

class Person{
    // 1. class의 함수 정의
    // class로 객체를 만들때 객체에 속하는 메소드(함수)를 만들 때는 function을 사용하지 않는다
    // sum(){

    // }
    // 2. 자바스크립트는 객체를 만들때 constructor가 먼저 실행된다
    // constructor는 초기값을 설명해주는 내장된 함수
    // constructor는 객체가 만들어지기 직전에 실행되도록 정의한 약속된 함수의 이름
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
        console.log('constructor');
    }


    sum(){
    //return this.first+this.second;
    return 'class prototype : '+ (this.first+this.second);
    }
    
}

// Person.prototype.sum = function(){
//     //return this.first+this.second;
//     return 'prototype : '+ (this.first+this.second);
// }
var kim = new Person('kim', 10, 20);
// console.log("kim", kim);        // kim Person {}
kim.sum = function(){
    return 'this : '+ (this.first+this.second);
}
var lee = new Person('lee', 10, 10);
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());