[JS] 객체(object), 클래스(class)

목차

1. 객체

2. 클래스

 2 - 1 클래스 상속 (extends, super)

 

 

1. 객체

 

객체는 참조형 데이터 타입

하나의 사물을 표현하는 여러 데이터를 다룰 때 사용

 

데이터 타입

원시형 : string, number, boolean 등

참조형 : object, array, function

// 객체 문법
// 리터럴 문법
const user = {};
console.log(user);

// 생성자 문법
// new 예약어
const user = new Object();
console.log(user);

const computer = {
    name : "gram",
    model : 15,
    color : "white",
    sell : false,
    price : 165000
};

// 객체는 실제 존재하는 개체를 표현할 때 작업
// 객체에는 여러 키와 값이 존재하고 특정값을 호출할 수 있어야한다.

// 객체의 name만 호출 해보기
// 점 표기법
console.log(computer.name) === "gram";

// 괄호 표기법
console.log(computer["name"]) === "gram";

// 점 표기법과 괄호 표기법 차이
// 속성 특수문자 접근, 매개변수를 속성으로 접근할 때
// 괄호 표기법을 사용한다
const content = {
    "content-type" : "text/javascript"
};
content["content-type"];

function objProperty(obj, key){
    console.log(obj["name"]);
}
objProperty(computer, "name");

const student = {
    age : 30,
    phone : "01012345432",
    city : "서울"
};

const student2 = {
    age : 30,
    phone : "01012345432",
    city : "서울",
    say : function(){
        console.log(this) // this는 객체 안에 있다.
    }
};

student2.say();

function createStudent(age, phone, city){
    this.age = age;
    this.phone = phone;
    this.city = city;
}

const student3 = new createStudent(22, "01066661111", "부산");
console.log(student3); // 배열 출력
console.log(student3.age); // 22
console.log(student3.city); // 부산

// new 생성자 문법을 사용하면 윈도우 객체가 아닌 빈객체에 값이 생긴다

 

 

2. 클래스

 

클래스는 객체를 만들기 위해 사용되는 방법중 하나 클래스를 사용하면 코드의 가독성이 좋아지고

상속을 통한 코드의 재사용성이 좋아집니다. (만약 클래스가 없었다면 객체를 하나 생성할 때마다

코드가 길어져서 불편해졌을겁니다.)

class Student {
    // class 생성시 첫문자 대문자
    // 생성자 함수
    // constructor : 최초에 한번 new로 객체를 생성할 때
    constructor(_age, _phone, _city){
        this.age = _age;
        this.phone = _phone;
        this.city - _city;
    }
    // get 호출 조회 할 때 사용할 메서드
    get getAge(){
        return this.age;
    }
    
    // set 수정을 할 때 사용할 메서드
    set setAge(_age){
        this.age = _age
    }
    
    // static 정적 메서드 클래스로 객체를 만들 때 생성되지 않는다.
    // 클래스 안에 있는 자원을 가지고 기능을 작성해야할 경우
    static myfn(age, phone, city){
        let obj = new student(age, phone, city);
        obj.age = this.age;
    }
}

let obj = new Student(20, "01012341234", "서울");
console.log(obj); // 배열 생성

obj.getAge(); // 클래스에 있는 함수 호출시 객체에 담아서 사용한다.

Student.myfn(); // static은 클래스 안에 있는 자원을 가지고 있어서 함수 호출시
                // 클래스 명을 가져온다

 

부모 클래스 자식 클래스

class Mother {
    constructor(_name, _age){
        this.name = _name;
        this.age = _age;
    }
    getInfo() {
        return `이름 : ${this.name} / 나이 : ${this.age}`;
    }
}

class Child extends Mother {
    // extends 부모클래스에서 자식클래스에게 상속할 때 사용
    constructor(_hp, mp, _atk, _name, _age){
		super(_name, _age); // super 부모 클래스의 생성자 함수를 호출
        this.hp = _hp;
        this.mp = _mp;
        this.atk = _atk;
    }
	getState(){
    	return `hp : ${this.hp} / mp : ${this.mp} / atk : ${this.atk}`;	
    }
    
    setHp(_hp){
    	this.hp = _hp;
    }
    
    static getAtk(n) {
        return n.atk
    }
}

let character1 = new Child(100, 80, 200, "자카", 31);
let character2 = new Child(150, 70, 180, "자카팍", 33);

console.log(character1.getInfo()); // 이름 : 자카 / 나이 : 31
console.log(Child.getAtk(character2)); // 180

 

 

자바스크립트를 이용해서 클래스를 이용한 팝업창 만들기

class Popup {
    constructor (_popupWrap){
        this.popupWrap = _popupWrap;
    }
    
    setPopupOpen(){
    	// classList 요소에 가지고 있는 모든 클래스의 리스트
        // contains 클래스를 가지고 있는지 확인 === true false
        if (this.popupWrap.classList.contains(".popup-wrap")){
            // true 클래스를 가지고 있으면 팝업이 켜짐
            this.popupWrap.classList.remove("is-active");
        } else {
            // false 클래스를 추가
            this.popupWrap.classList.add("is-active");
        }
    }
}

let popup = new Popup(document.querySelector(".popup-wrap"));