[JavaScript] 객체

📖 자바스크립트 객체 정의

자바는 상속을 제어와 코드의 재사용을 위해 사용한다. 하지만 자바스크립트는 오로지 코드의 재사용(공유)을 위해서 사용한다.

 

📕객체 리터럴 방식: ES3

var pobj ={
	x: 100,
	y: 200,
	myShape: 'Player',
	display: function(){
		document.write("<h1>"+this.x+", "+this.y+"="+this.myShape+"</h1>")
	}
};
pobj.display();

 

📗 생성자함수 패턴의 객체 생성: ES5

// java: ClassType object = new ClassType();
function Person(){ // 생성자함수를 만든다고 생각.
	// 인스턴스의 구성요소를 초기화
	this.x= 100; // 함수의 생성자함수 패턴인 경우 this를 꼭 써서 선언해야한다.(= 인스턴스변수를 생성하기위해서는 this 필요)
	this.y= 200;
	this.myShape= 'Player';
	this.display = function(){
		let color = 'green'; // 지역변수
		document.write('x=' + this.x);
		document.write(', y=' + this.y);
		document.write(', myShape' + this.myShape);
		document.write(', color=' + color); // 지역변수니까 this 제외
		document.write('<hr>');
	};
};

let pObj = new Person(); // ES5의 객체 생성 방식
pObj.display();

 

하지만 해당 방법이 메모리가 너무 비효율적이기 때문에 prototype을 이용하여 사용한다.

ProtoType은 코드를 넣고 공유하는 공간이다.

 

1. 사용 방법

Person.prototype.getName= function(){
	return this.name;
};

Person.prototype.setName= function(value){
	this.name=value;
};

항상 prototype을 타이핑하기 귀찮기때문에 Function객체에 함수를 선언해 해당 함수를 사용하여 선언한다.

2. prototype를 편리하게 사용하는 방법
모든 함수객체?는 Function.prototype을 공유한다. 
따라서 Function.prototype에 작성하면 모든 객체가 공동으로 사용가능하다.

 

📗 ProtoType 사용

항상 .prototype을 작성하지않고 Function 객체에 prototype의 메소드를 자동으로 연결되도록 함수를 선언하여 사용한다.

// ES5: 생성자 함수 패턴
function Person(arg){
	this.name= arg;
};

// ⭐
Function.prototype.method= function(name, func){
	this.prototype[name]= func;
}

Person.method("setName", function(value){
	this.name=value;
});

Person.method("getName", function(value){
	return this.name+": Person";
});

var man= new Person("남자");
console.log(man.getName());

 

📘 Class 사용: ES6

extends는 prototype 기반으로 동작: Rabbit.prototype.[[Prototype]]을 Animal.prototype으로 설정한다. [[Prototype]]: 포인팅 한다는 의미, 브라우저마다 __proto__를 지원하지않기도 해서 꺽쇠로 표현함.

class Animal{
    constructor(name){
    	this.speed= 0;
    	this.name= name;
    }
    run(speed){
        this.speed= speed;
        alert(`${this.name}은/는 속도 ${this.speed}로 달립니다.`);
    }
    stop(){
        this.spped= 0;
        alert(`${this.name}이/가 멈췄습니다.`);
    }
}
class Rabbit extends Animal{ 
    hide(){
        alert(`${this.name}이/가 숨었습니다.`);
    }
}

let bear= new Animal("곰");
let whiteRabbit= new Rabbit("흰 토끼");

bear.run(10);
// bear.hide(); error

whiteRabbit.hide();
whiteRabbit.run(5);

 

[[참고 자료]]

https://ko.javascript.info/class-inheritance