javascript 공부 6 - 기본개념2(클래스 , this, ES6의 class , 상속)

클래스

 

const hello = {
	firshName: 'ugo',
    lastName: 'hwang',
    getFullName: function(){
    	//this는 객체 자신을 의미한다
    	return `${this.firstName} ${this.lastName}`
    }
}
console.log(hello);


const rok = {
	firshName: 'rok',
    lastName: 'lee',
    getFullName: function(){
    	return `${this.firstName} ${this.lastName}`
    }
}
console.log(rok);


const oh = {
	firshName: 'oh',
    lastName: 'kim',
    getFullName: function(){
    	return `${this.firstName} ${this.lastName}`
    }
}
console.log(oh);

 

위의 로직은 생성되는 객체는 각각 메모리에 할당되고

getFullName 같이 반복되는 코드들이 계속 사용되어 효율이 떨어진다 . 

 

 

클래스를 활용한 객체생성

 

//클래스는 파스칼 케이스를 활용한다.
function User(first,last){
    this.firstName = first;
    this.lastName = last;
}

//프로토 타입을 통해 반복되는 코드를 줄이고 메모리를 효율적으로 관리할 수 있다.
//클래스에서 사용되는 메서드들을 protorype에 넣어둔다
User.prototype.getFullName = function(){
    return `${this.firstName} ${this.lastName}`
}

//생성자 함수를 통해 객체를 생성한다.
//ugo , kim , lee 는 인스턴스라고 부른다.
const ugo = new User('ugo','hwang')
const kim = new User('oh','kim')
const lee = new User('rok','lee')

console.log(ugo.getFullName());
console.log(kim.getFullName());
console.log(lee.getFullName());

 

클래스는 구분을 위해 파스칼 케이스로 이름을 짓는다.  클래스에서 사용될 메서드들을 프로토타입에 저장시킨다 클래스는 프로그램이 로딩될때 한번만 읽히기 때문에 먼저 살펴본 위의 방식보다 메모리를 효율적으로 관리할 수 있다 . 

 

 

this

 

this는 인스턴스 내에서 자기 자신을 가리킨다  , 일반 함수는 호출 위치에 따라 this 가 정의되고 화살표 함수는 자신이 선언된 함수 범위에서 this가 정의된다.

 

//this는 인스턴스 내에서 자기 자신을 가리킨다  , 
//일반 함수는 호출 위치에 따라 this 가 정의되고
//화살표 함수는 자신이 선언된 함수 범위에서 this가 정의된다.

const ugo ={
    name:'ugo',
    normal: function(){
        console.log(this.name)
    },
    arrow: ()=>{
        console.log(this.name)
    }
}

//호출시점에서 this 는 ugo 이다
ugo.normal();
ugo.arrow();

 

 

 

 

//hwang의 normal과 arrow는 ugo의 normal 과 arrow의 데이터를 참조하고 있다.
const hwang = {
    name: 'hwang',
    normal: ugo.normal,
    arrow: ugo.arrow
}

//일반함수는 호출위치에서 this가 정의되기 떄문에 hwang 이 출력된다
hwang.normal();
//화살표 함수는 자신이 선언된 함수 범위에서 this가 정의된다.
hwang.arrow();

 

 

 

 

위의 ugo , hwang  모두  arrow() 는 undefined가 출력된다 . arrow 가 선언되 있는 arrow 필드를 보면 

함수의 범위가 따로 정의 되어있지 않고 바로 화살표 함수가 정의되어 있기 때문이다 

 

화살표 함수는 자신이 선언된 함수 범위에서 this가 정의된다는 것이 무슨 의미일까?

 

아래의 코드를 보자

 

아래 코드에서는 timeout 이라는 필드에 함수가 선언되어있고 그안에서 setTimeout이 호출되고 console.log 가 호출된다.  

위의 코드들과는 다르게 console.log가 밖에  function 키워드로 다른 함수가 선언되어있고  그 함수범위에서의 this는  timer를 가리킨다 . 

그러므로 console.log는 자신이 선언된 함수 범위에서의 this.name인 'time'을 출력한다 .

//함수 내에서 this

1.time 출력
const timer = {
    name: 'time',
    timeout : function(){
        setTimeout(()=>{
            console.log(this.name)
        },2000)
    }
}

timer.timeout();

2.undefined 출력
const timer = {
    name: 'time',
    timeout : function(){
        setTimeout(function(){
            console.log(this.name)
        },2000)
    }
}

timer.timeout();

 

만약 2번처럼 setTimeout을 일반 함수로 정의한다면 일반함수는 호출된 위치에서 this를 정의할 수 없어 undefined를 출력한다.

 

 

es6에서의 class

 

class User{
    //생성자함수를 갖는다.
    constructor(first,last){
        this.first = first
        this.last = last
    }
    //프로토 타입을 클래스 안에 정의해준다.
    getFullName(){
        return `${this.first} ${this.last}`
    }
}

 

class 예약어를 사용하고 생성자 함수를 갖고 메서드를 클래스 안에 정의한다 . 

 

 

자바스크립트 클래스의 상속

 

class Vehicle{
    constructor(name,wheel){
        this.name = name
        this.wheel = wheel
    }
}

class Car extends Vehicle{
    constructor(name,wheel,license){
    	//부모클래스의 필드를 초기화하는 생성자함수
        super(name,wheel)
        //Car의 필드
        this.license = license;
    }
}

const myCar = new Car('벤츠',4,true);
const yourCar = new Car('bmw',4,true);
console.log(myCar)
console.log(yourCar)

 

Car(자식)는 Vehicle(부모)을 상속 받고 있다     자식클래스는 부모클래스를 상속받음으로 부모클래스에 정의된 내용들을 사용할 수 있다 이때 super는 부모클래스의 생성자함수를 의미하며 자식클래스를 정의할때 부모클래스의 생성자함수를 불러와 파리미터로 값을 넘겨줘야한다.