[JS] Object (feat. 구식 prototype 버전)

객체

const person = {};
// 속성, property
person.name = '일분이';
person.age = 10;
// 메소드, method
person.introduce = function () {
    console.log('안녕하세요. 저는 일분이이고 나이는 10살이에요');
};
person.introduce();

const perseon = {
    name: '일분이',
    age: 10,
    introduce: function () {
        console.log('안녕하세요 저는 일분이이고, 나이는 10살이에요');
    },
};

const person = {
    name: '일분이',
    age: 10,
    introduce: function () {
        console.log(`안녕하세요 저는 ${this.name}이고, 나이는 ${this.age}살이에요`);
    },
};

---

1. 생성자 함수 방식

지금 ECMA Script 에서는 class 문법이 추가됐음. 이건 옛날 버전!

• 생성자 함수 호출을 할 때 함수가 생성자로서 호출이 되게 하고 싶으면 new 붙이면 됨. 그래서 각각 개별 객체를 this가 가리키게 된 것

인스턴스

= 각각의 생성자 함수로 만들어낸 객체

/// 생성자 (constructor)
function Person(nickname, age) {
    this.nickname = nickname;
    this.age = age;
    this.introduce = function () {
        console.log(`안녕하세요 저는 ${this.nickname}이고, 나이는 ${this.age}이에요`);
    };
}
// 인스턴스 (instance)
const person1 = new Person('일분이', 10);
const person2 = new Person('이분이', 8);

person1.introduce();
person2.introduce();

🤍 개선 => 공유하는 속성/메소드는 prototype 객체에 정의하기

introduce도 this.nickname, this.age와 같이 같은 레벨에 있기 때문에 메모리 점유. 하지만 introduce는 다 똑같은 prop. 그래서 비효율적. 메모리 낭비임

=> 하나만 만들어놓고 개별 객체들이 공유하게끔

function Card(num, color) {
    this.num = num;
    this.color = color;
}

Card.prototype.width = 100;
Card.prototype.height = 150;

const card1 = new Card(1, 'green');
const card2 = new Card(2, 'red');

console.log(card1.color);
console.log(card2.color);
console.log(card1.width);
console.log(card2.width);

function Card(num, color) {
    this.num = num;
    this.color = color;
    this.init();
}

Card.prototype = {
    constructor: Card,
    init: function () {
        const mainElm = document.createElement('div');
        mainElm.style.color = this.color;
        mainElm.innerHTML = this.num;
        mainElm.classList.add('card');
        document.body.appendChild(mainElm);
    },
};

const card1 = new Card(1, 'green');
const card2 = new Card(2, 'red');

---

2. class 방식

class Card {
    constructor(num, color) {
        this.num = num;
        this.color = color;
        this.init();
    }

    init() {
        const mainElm = document.createElement('div');
        mainElm.style.color = this.color;
        mainElm.innerHTML = this.num;
        mainElm.classList.add('card');
        document.body.appendChild(mainElm);
    }
}

const card1 = new Card(1, 'green');
const card2 = new Card(2, 'red');