JAVASCRIPT ) 오브젝트

오브젝트는

복제가 가능한 오브젝트 / 복제가 불가능한 오브젝트 로 나뉘고

속성은 필드로도  불린다.

오브젝트끼리는 메세지를 주고받는다. --> 함수/메소드의 매개변수를 통해 주고

함수의 리턴값을 통해서 받는다.

함수는 파라메터가 정의되어야한다.

이러한 약속된 형태를 인터페이스라고 한다.

 

정보의 은닉-

정보의 묶임-캡슐화

 

여러개의 묶임을 시스템이라 부르고

시스템은 열린 시스템과 닫힌 시스템으로 나눈다

열신시스템은 객체들의 이동이 자유로운 시스템

닫힌시스템은 객체들의 이동이 부자연스러운, 오고갈수없는 시스템

 

함수는 함수의 의미도 갖지만 객체의 의미를 가지기도 하는데

함수의 의미가 많아짐에따라 의미 구분하여 사용하기위해

class문법이나 화살표함수가 등장한다.

 

객체안에 this는 객체 자기 자신을 가리킨다.

객체밖에서 this가 사용되면 그때그때 다름

 

const HYI = {
	head: {
    	count: 1,
        color: "brown"
    },
    arm: 2,
    leg: {
    	count: 2,
        run: function(){}
    }
}

 

 

new Date() 처럼 new가 붙으면 복사가능한 객체

 

복사가능한 객체는 class(설계도)가 필요하고 설계도를 이용하여 생성한 객체를 인스턴스(instance)라고 한다.

 

class 클래스명{
	constructor( 인자 ){
    	속성 나열
    }
    메소드 나열
}

 

class humanBeing {
    constructor(name){
        this.name = name;
    }
    speak(){
    	alert('내 이름은' + this.name);
    }
}

const inyoungHuman = new humanBeing('inyoung');
document.write(inyoungHuman.name);
inyoungHuman.speak();

 

class humanBeing {
	constructor( name, headColor ){
    	this.name = name;
    	this.head =  1;
        this.headColor = headColor;
    }
  	running(){
    	document.write('달리는중');
  	}
  	singing(){
    	document.write('노래하는중');
  	}
}

const inyoungHuman = new humanBeing('inyoung', '노랑');
const minjiHuman = new humanBeing('minji', '갈색');

inyoungHuman.running();
minjiHuman.singing();
document.write(inyoungHuman.headColor);
document.write(minjiHuman.head);

 

<div id="newProject"></div>

<script>
    class Product {
        constructor(id, desc){
            this.id = id;
            this.desc = desc;
            this.itemDOM = '';
        }
        makeDOM(){
            this.itemDOM = `<div id="product${this.id}">${this.desc}</div>`;
        }
        displayDOM(targetDOM){
            this.makeDOM();
            document.getElementById(targetDOM).innerHTML += this.itemDOM;
        }
        runItem(targetDOM){
            this.makeDOM();
            this.displayDOM(targetDOM);
        }
    }
    const productDesc = ['zard', 'cdr', 'IVE', '에스파', '뉴진스', '아이유', '샤이니', 'god', '소방차']
    const productList = [];
    productDesc.forEach(function(v, i){
        productList.push(new Product(i+1, v));
    });
    productList[2-1].runItem('newProject'); //-1 한 이유는 그냥 쉽게 셀라고
    productList[3-1].runItem('newProject');
    productList[4-1].runItem('newProject');
</script>

 

단순히 값의 나열을 적는다면 객체라고 보기 힘들다.

객체는 속성과 메소드로 이루어져야 객체라고 볼 수 있다. -> 객체명 첫글자를 대문자로 시작하면 구분하기 좋다.