[Following Life Coding] JavaScript Object-Oriented Programming _06-08

JavaScript Object-Oriented Programming

Life Coding class link: https://opentutorials.org/module/4047/24614

06. class

Class, included in JavaScript since ES6.

1. Can I use this?

https://caniuse.com

A site that shows whether various languages and their versions can be safely used given worldwide users' internet environments.

https://caniuse.com/#search=es6%20classes the results page 

2. So how do we code for older versions?

https://babeljs.io/

A compiler that converts ES6+ code into older-version code.

You can compile directly at https://babeljs.io/repl. 

3. Understanding the learning goal 

In the traditional object-style code on the left side of the image below, Person itself is just a function, but through "new," Person can take on the role of a "constructor function." And the main roles of the constructor function Person are creating the object (return) and setting the object's initial state.

Going forward, through the process of completing the code on the right of the image, we'll learn how to handle object creation (return) and setting the object's initial state using a class.

class.js)

class Person{
    
}

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

Run result:

07. class constructor

7-1) Seeing the effect of JavaScript class's dedicated constructor function constructor 

class.js)

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

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

Run result:

 * Before the console output is printed, the code inside the constructor function runs first.

7-2) Actually setting initial values through the constructor 

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);  

Run result:

08. Implementing object methods in class

8-1) Method creation example 1

class.js) - using prototype as-is 

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());  

Run result:

8-2) Method creation example 2

class.js) - creating a method inside the 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()); 

Run result:

8-3) Method modification example

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());   

Run result:

8-4) Conclusion: comparing object creation styles