스크린샷 2022-07-23 오전 8.12.02.png

객체 라는것은 사람에 비유 했을때,

이름, 성별, 키 라는 어떤 (속성)값이 있고,

말하기, 걷기 라는 어떤 (속성)액션이 있다.


생성자 함수로 만들어낸 객체를 인스턴스(instance)라고 부른다.

스크린샷 2022-07-23 오전 8.34.01.png

function Card(num, color) {
        this.num = num;
        this.color = color;
        this.init();
    }
		// 각각의 카드에 메서드를 일일히 넣으면 메모리공간을 차지 하기 떄문에..
		// 메서드를 한공간에 저장하고 걔를 갖다 쓰려고한다. = prototype
    Card.prototype = {
				// 새로 Card의 prototype객체를 만들경우 constructor를 명시해 줘야한다.
        constructor: Card,
        init: function() {
            const mainElem = document.createElement('div');
            mainElem.style.color = this.color;
            mainElem.innerHTML = this.num;
            mainElem.classList.add('card');
            document.body.appendChild(mainElem);
        }
    };

    const card1 = new Card(1, 'green');
    const card2 = new Card(7, 'blue');

각각의 달라지는 속성들은 생성자 함수안에 선언해놓고, 똑같이 공유하는 프로퍼티는 prototype에 저장해 놓고 쓴다………

css에 클래스 스타일은 이미 지정했다는 가정하에 html에 바로 찍힘

스크린샷 2022-07-23 오전 8.52.13.png