Object Class는 Object를 추상화하여 해당 Object에 clone(복제), extend(확장), inspect(검사), 
keys(값), toJSON(JSON), values(값) 의 Method를 지원합니다..

참고로 Prototype.js 에서 Object.extend 와 Class.create 를 사용하는 방식이 좀더 세부적으로 
찾아서 보여줄 예정이랍니다.

이는 추상화된 Object를 복제하고 Method, Property를 추가 확장이 가능하며, 다양한 Type을 찾는데 
사용되고 이하 다양한 기능을 제공합니다.

1. undefined and null are represented as such. 
   : undefined 와 null 은 비슷한것으로 표현되어짐
2. Other types are looked up for a inspect method: if there is one, it is used, 
otherwise, it reverts to the toString method
   : 다른 타입들도 inspect method에 의해서 찾아짐 : 만약 그것이 한번이라도 사용되었다면 
toString method로 돌아갑니다.
   
Object의 확장기능은 내장객체인 String, Number, Array, Function, Date 등에 추가적으로 
Method를 확장할 수 있게 됩니다.

예를 들어 String 내장 Object에 stripTag, replace, trim 함수가 없지만 
Object.extend(String.prototype, {추가될 함수의 정의}); 하게 되면 추가될 함수의 정의가
 String Object의 Method가 되게 됩니다.

다양한 예제를 통해서 살펴 보도록 하겠습니다.

Hash는 key와 그 key에 할당된 value의 배열 구조를 일컬러 부르고 있는데 값이나 키를 색인하는데 아주 
유용한 구조로 되어있습니다.

Prototype은 기본적으로 코딩은 JSON 포맷 자체가 그러한 구조로 되어있음도 알 수 있습니다.

Prototype.js의 Object Class뿐만아니라 대부분이 Hash구조 key와 value로 이루어져 있고 
Value에는 Number, String, Object, Function, Boolean 등 다양한 value를 갖을 수 있습니다.


	Object.extend(String.prototype, {
		cutstr: function(i) {
			return this.slice(0, i);
		}
	})
	
	var BBS = new Class.create();
	BBS.prototype = {
		str: 'PANDORA.TV',
		initialize: function() {},
		act: function() {
			var result = this.str.cutstr(3);
			alert(result);
		}
	}
    oBBS = new BBS();
	
	var PRG = new Class.create();
	PRG.prototype = {
		str: 'GOOGLE.COM',
		initialize: function() {
			var result = this.str.cutstr(4);
			alert(result);
		}
	}
	
	
	
위에서 생성한 PANTV Class 내부를 살펴보면 global_value는  key값 ''는 value값으로 되어있습니다.
value로 function도 갖을 수 있습니다. global_function은 key이고 function(parm1, parm2) 
{...}은 value를 갖습니다.

JSON포맷을 숙지하고 있다면 더 이해가 빠르리라 생각듭니다..

keys Method는 Object의 key를 string으로 반환합니다. 위의 소스 코드를 
예로 Object.keys(oPANTV)를 실행하게 되면 반환되는 결과는 string Type의 -> 
['global_values', 'initialize', 'global_function', 'private_function', 
'public_function']가 될것입니다..

위의 메소드를 이용하지 않더라도 가능합니다.

for(var property in oPANTV) { alert(property) }   이렇게 수행하면 oPANTV가 갖고 있는 
property명을 모두 alert로 띄우게 됩니다.
다시 말하면 oPANTV의 property와 hash구조의 key는 같다는 의미입니다.

위 소스는 참고로 알고 계시면 되구요.

toJSON Method는 AJAX Class를 이용한 Request를 이용할때나 오브젝트를 String화할때 
즉 Eval의 반대 함수라고 생각해도 될것 같습니다.
쉽게 기존 개발 방법은 parameter를 하나 하나 추가하는 방식이였지만 서버와 JSON으로 
통신이 이뤄질때에는 Class내에서JSON 오브젝트로 이용하다가 이를 바로 서버로 전송하게 
될 경우에 JSON 타입의 string화 할때 이용하면 유용합니다.

values Method는 Object의 value값을 배열로 반환합니다. keys Method와는 다르게 배열로 
반환하는 이유는 value에는 다양한 type가 반환되기 때문입니다.

clone Method는 굳이 설명하지 않더라도

위에서도 살짝 언급했지만 가장 유용하게 사용될 Method중의 하나 입니다.
Object.extend Method인데요 이 기능만 잘 사용한다면 Method 자체의 사전적 의미는 '확장' 입니다. 
하지만 사용에 따라서는 상속이 될 수도 있구요.

위에서 String 내장 Object에 여러가지 Method를 추가하여 Extend의 개념을 갖게 되었구요.

위의 소스를 보면 oPANTV Class와 oPANTV2 Class 2가지가 있습니다.

oPANTV2가 Object화 되면서 initialize가 수행되고 
Object.extend(oPANTV.prototype, {...}); 가 수행됩니다.

이로 PANTV2에 oPANTV class에 있는 Method들이 PANTV2의 Method가 됩니다.

----------------------------------------------------------------------------

다양한 예제를 통해 Object Class에 대해 알아봅시다.

clone, key, value, toJSON Examples 

	var GOOGLE = new Class.create();
	GOOGLE.prototype = {
		obj: {name:'PANDORA', age:28, birth:1980, url:'HTTP://www.pandora.tv'},
		arr: ['tizie', 'pandora', 'naver99'],
		
		initialize: function() {},
		act: function() {
			alert('cloned');
		},
		show: function() {
			alert('obj.name -> ' + this.obj.name + '\nobj.url -> ' + this.obj.url);
		},
		showkey: function() {
			alert(Object.keys(this.obj));
		},
		showvalue: function() {
			alert(Object.values(this.obj));
		},
		showJSON: function() {
			alert(Object.toJSON(this.obj));
		},
		showIns: function() {
			var oDiv = $('main');
			var JSN = {ch_name : 'PANDORA CHANNEL', ch_userid : 'pandoratv'};
			
			alert(Object.inspect());
			alert(Object.inspect(oDiv));
			alert(Object.inspect(JSN));
			alert(Object.inspect(this.arr));
		}		
	}
	
	var PAN = Object.clone(GOOGLE.prototype);	
	
	PAN.act();
	// -> 'cloned'
	PAN.show();
	//-> 'obj.name -> PANDORA'
	//-> 'obj.url -> HTTP://www.pandora.tv'
	PAN.showkey();
	//-> 'name,age,birth,url'
	PAN.showvalue();
	//-> 'PANDORA,28,1980,HTTP://www.pandora.tv'
	PAN.showJSON();
	//-> '{"name": "PANDORA", "age": 28, "birth": 1980, "url": "HTTP://www.pandora.tv"}'
	PAN.showIns();
	//-> undefined
	//-> <div id="main" class="clearfix">
	//-> [object Object]
	//-> ['tizie', 'pandora', 'naver99']


---------------------------------------------------------------------------------------

Object.extend Quiz

var PANDORA = new Class.create();
PANDORA.prototype = {
	name: 'pandora',
	url: null,
	initialize: function(url) { this.url = url; }
}

var PAN1 = new PANDORA('http://www.pandora.tv');
var PAN2 = new PANDORA('http://www.google.com');

Object.extend(PAN1, { show: function() { alert(this.name); } }); 
//PAN1 객체에만 show Method가 추가됨
PAN1.show();
//-> 'pandora'
PAN2.show();
//-> 객체가 null이거나 지원되지 않는 메서드를 호출하였습니다.


Object.extend(PANDORA.prototype, { showurl: function() { alert(this.url); } }); 
PAN1.showurl();
//-> 'http://www.pandora.tv'
PAN2.showurl();
//-> 'http://www.google.com'

'PANDORA의 원형에 Method를 추가하여 PAN1, PAN2 모두에서 show Method를 사용 가능'
'원형에 extend할 경우에는 new 를 통해 미리 생성된 객체라할 지라도 Object.extend를 통해 
추가한 Method의 경우 사용이 가능하다.'
'단 Runtime 에 따라 에러는 발생할 수 있습니다.'
		
신고
Posted by Rhio.kim