[생활코딩 따라가기] javascript 객체 지향 프로그래밍_06~08

javascript 객체 지향 프로그래밍

생코 수업 Link : https://opentutorials.org/module/4047/24614

class - JavaScript 객체 지향 프로그래밍

 

06. class

JavaScript ES6부터 포함된 Class

1. 이거 써도 되나?

https://caniuse.com

다양한 언어 및 각각의 버전이 전세계 사용자의 인터넷 환경에 활용될 수 있는 지에 대한 지표를 알려주는 사이트

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#search=es6%20classes 확인결과 페이지 

ES6에 대한 사용자 환경에 대한 활용 가능성 지표 = 91.44% (기준 2019.04.30)

 

2. 그럼, 이전 버전에 대한 코딩은 어떻게 하지?

https://babeljs.io/

ES6 이후 방식의 코드를 이전 버전의 코드로 수정 해주는 컴파일러 

Babel · The compiler for next generation JavaScript

https://babeljs.io/repl 에서 직접 컴파일 가능 

 

3. 학습 목표 이해하기 

아래 이미지 좌측에 있는 전통적인 객체 활용 코드의 경우, Person 자체는 그냥 함수일 뿐이지만, new 를 통해 Person는 함수에서 '생성자 함수'로서의 역할 부여할 수 있다. 그리고 생성자 함수 Person의 주요 역할은 객체 생성(return) 과 객체의 초기 상태 세팅 이다.

앞으로, 이미지 우측의 코드를 완성해가는 과정을 통해 class를 통해 객체 생성(return) 과 객체의 초기 상태 세팅 하는 방법을 알아보도록 한다.

전통적인 객체와 class를 이용한 객체를 비교하기위한 기본 설정 예제

class.js)

class Person{
    
}

var kim = new Person();
console.log('kim',kim);  

실행 결과)

빈 클래스, class Person{}을 통해 생성한 객체를 출력한 결과

 

 

 

07. class constructor

7-1) javascript class 전용 생성자 함수 constructor의 효과 보기 

class.js)

class Person{
    constructor(){  
        // 전용 생성자 함수, 객체가 생성되는 과정에서 자동으로 실행한다.
        console.log("constructor 자동 실행")
    }
    
}

var kim = new Person();
console.log('kim',kim);  

실행 결과)

javascript class 전용 생성자 함수 constructor, 객체가 생성되는 과정에서 자동으로 실행한다

 * 콘솔이 출력되기 전에 먼저, 생성자 함수 안에 있는 코드가 실행된다.

 

7-2) 생성자를 통해 실제 초기 값을 세팅하기 

class.js)

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
}

var kim = new Person('kim',10,20);
console.log('class 객체 kim : ',kim);  

실행 결과)

class 생성자를 통해 객체의 초기 값을 세팅 세팅한 후, 객체를 생성, 출력한 결과

 

 

08. class에서 객체의 method 구현하기

8-1) 메서드 생성 예-1

class.js) - prototype 그대로 사용하기 

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
}

// 메서드 생성 예 1)
Person.prototype.sum = function(){    
    return "prototype 활용 : "+(this.first+this.second); 
}

var kim = new Person('kim',10,20);
console.log('class 객체 kim : ',kim);  

console.log(kim.name, " 's sum : ",kim.sum());  

실행 결과)

prototype 그대로 사용하여 메서드 정의하기 

 

8-2) 메서드 생성 예-2

class.js) - class 내부에 메서드 생성 

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }

    // 메서드 생성 예 2)
    sum(){    
        return "class 내부 메서드 생성 : "+(this.first+this.second); 
    }
}

var kim = new Person('kim',10,20);
console.log('class 객체 kim : ',kim);  

console.log(kim.name, " 's sum : ",kim.sum()); 

실행 결과)

class 내부에 메소드 생성, 위와 동일한 결과 

 

8-3) 메서드 수정 예

class.js)

// class 객체 생성 예 

class Person{
    constructor(name,first,second){
        this.name = name,
        this.first = first,
        this.second = second
    }
    // class 내, 메서드 생성 예
    sum(){    
        return "clss 메서드 적용 : "+(this.first+this.second); 
    }
}

// 동일한 결과를 기대하는 내용  
var kim = new Person('kim',10,20);
kim.sum=function(){
    return "개별 조정 : " +(this.first+this.second); 
}

var lee = new Person("lee",10,10);

console.log(kim.name, " 's sum : ",kim.sum());   
console.log(lee.name, " 's sum : ",lee.sum());   

실행 결과)

class 방식을 통해 객체와 메서드를 생성하고 출력한 결과

 

8-4) 결론, 객체 생성 방식 비교 

전통적인 객체생성 방식과 class를 활용한 객체생성 방식의 코드, 출력결과 비교