Object
Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다.
var grades = {'test1': 10, 'test2': 6, 'test3': 80};
동시에 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다.
Object의 prototype은 모든 객체의 prototype이 된다.
Object가 가지고 있는 prototype는 모든 객체가 사용할 수 있는 기능이다. 즉, 모든 객체가 공통적으로 사용할 기능이 있다면 Object의 prototype으로 지정해 쓸 것이다.
모든 객체가 가지고 있었으면 하는 기능이 있다면 개발자가 기능을 추가할 수 있다.
또한 Object 객체를 확장하면 모든 객체가 접근할 수 있는 API를 만들 수 있다. 아래는 Object 객체를 확장한 사례다.
- Object.메소드() 와 Object.prototype.메소드()의 차이
Object.keys(arr); --> Object.keys=function(){ }
Object.protptype.toString() --> Object.prototype.toString = function(){ }
메소드가 프로토타입 소속이라는 것은 new한 순간 객체를 만들고 그 객체는 포로토타입이라는 특수한 프로퍼티에에 저장된 객체를 원형으로 하는 객체가 생성된다.
그렇게 생성된 객체는 toString()을 사용할 수 있게 된다.
Object는 자바스크립트의 공통 조상이다. 그래서 Object중에 ptototype이 중간에 낀 메소드들은 모든 객체들이 상속받고 있는 공통의 기능이 된다.
개발자가 만드는 자바스크립트 웹어플리케이션에서 모든 객체들이 공통적으로 가지고 있어야 하는 기능이 있다면 Object의 prototype 객체를 수정하여 그러한 기능을 만들 수 있다.
Object.prototype.contain = function(needle) {//어떠한 메소드를 갖게 하고 싶다면
for(var name in this){//메소드가 소속되어 있는 객체 -->this
if(this[name] === needle){// 객체들은 for-in문을 사용하여 하나하나 꺼내서 볼 수 있다.
return true;
}
}
return false;
}
var o = {'name':'test1', 'city':'test2'}
console.log(o.contain('test1'));//contain은 value가 존재하는지 체크-->true or false
var a = ['test1','test2','test3'];
console.log(a.contain('test2'));
그런데 Object 객체는 확장하지 않는 것이 바람직하다. 왜냐하면 모든 객체에 영향을 주기 때문이다.
확장 후에 아래 코드를 실행해보자.
for(var name in o){
console.log(name);
}
결과)
name
city
contain
--> prototype의 메소드인 contain까지 포함되는 결과를 낳게 된다.(원래 var o = {'name':'test1', 'city':'Seoul'})
확장한 프로퍼티인 contain이 포함되어 있다. 객체가 기본적으로 가지고 있을 것으로 예상하고 있는 객체 외에 다른 객체를 가지고 있는 것은 개발자들에게 혼란을 준다.
이 문제를 회피하기 위해서는 프로퍼티의 해당 객체의 소속인지를 체크해볼 수 있는 hasOwnProperty를 사용하면 된다.
for(var name in o){
if(o.hasOwnProperty(name))
console.log(name);
}
결과)
name
city
hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단한다. 만약 prototype으로 상속 받은 객체라면 false(contain은 부모로부터 상속받은 프로퍼티이다.)가 된다.
--> 객체의 직접적인 소유인 체크
'WebFont-end > JavaScript' 카테고리의 다른 글
[JavaScript] 클로저 (1) | 2014.12.21 |
---|---|
[JavaScript] 유효범위 (0) | 2014.12.21 |
[JavaScript] prototype (0) | 2014.12.07 |
[JavaScript] 상속 (0) | 2014.12.07 |
[JavaScript] this (0) | 2014.12.07 |