| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | http://1 |
| extra_vars4 | ko |
| extra_vars5 | http://jaures.egloos.com/2262952 |
| extra_vars6 | sitelink1 |
1번 :
function Func1(val) {
this.val = val;
this.showValue = function() {
alert(this.val);
};
}
var a = new Func1("Hello~");
a.showValue(); // alert "Hello~"
2번 :
function Func2(val) {
this.val = val;
}
Func2.prototype.showValue = function() {
alert(this.val);
}
var b = new Func2("World!");
b.showValue(); // alert "World!"
보통 객체는 위의 1번과 2번의 방법으로 만들 수 있다. 그런데 1과 2의 차이는 무엇일까?
1번은 func1 내부에 method showValue를 정의했고, 2번은 prototype을 이용해 외부에서 별도로 정의를 했다.
new로 각각 객체를 생성한 후 showValue() method를 실행한 결과는 기대대로 출력이 된다. 그렇다고 하면 별 차이 없는것 아닐까라고 생각할 수도 있겠지만 여기에는 보이지 않는 아주 큰 차이점이 내부적으로 존재한다.
아래를 실행했을 때의 결과는 과연 무엇일까?
a : a.hasOwnProperty("showValue");
b : b.hasOwnProperty("showValue");
c : "showValue" in b;
결과는 a, c는 true, b는 false 이다. 엥? b객체의 showValue는 b의(Func2) property가 아니란 말인가?
hasOwnProperty는 해당 객체에 특정 property가 존재여부를 return 해주는 함수다. 즉, b의 showValue는 말그대로 b의 property가 아니란 얘기다. 그런데 왜 property가 존재하는지를 확인해 볼수 있는 in 연산자에서는 true가 return 되는걸까?
showValue는 b의 property가 맞긴맞다. 하지만 a.showValue와 다른점은 b.showValue는 상속받은 property라는 점이다.
여기서 다시 hasOwnProperty의 뜻을 음미해보길 바란다. 말 그대로 "has own property?" 그대로 해당 객체가 해당 property를 가지고 있는지를 확인해보는 것이다.
prototype은 new 연산자를 통해 생성된 객체모두에 상속된다. 그래서 이미 생성되어 있더라도 나중에 prototype을 통해 추가된 property를 그대로 사용할 수 있다. 이것이 중요한 이유는 바로 새로 생성되는 모든 객체가 해당 property를 직접 자신이 가지지 않고 상속받는 것이기 때문에 해당 property가 객체 자신이 소유할 필요가 없다는 뜻이된다. 이는 해당 property를 위한 메모리를 별도로 차지하지 않는다는 의미이기도 하다.
new 연산자를 사용하게 되면
1. new : property가 없는 비어있는 객체를 생성한다. 해당 객체의 prototype을 설정한다.
2. Func1("World") : 해당 함수를 호출한다. Func1의 prototype property값을 새로 생성된 객체의 prototype으로 설정한다.
3. this가 1에서 생성된 객체를 가리키게 한다.
모든 함수에는 prototype이라는 property가 있고, 이것은 함수가 정의될때 자동으로 생성되고 초기화 된다. prototype은 construct라는 property를 가지고 초기화 된다. 즉, Function.prototype.construct가 초기화 된다.
Javascript의 모든 객체는 prototype 이라고 불리는 또 다른 객체를 내부적으로 참조할 수 있도록 하는데, new를 통해 생성된 객체는 prototype의 property들을 자신의 property로 가져(상속)오게 된다.
하지만 새로 생성된 객체에서 prototype property 값을 설정하려고 하면 그 객체의 해당 property는 더이상 prototype의 값을 참조하지 않게 된다. 즉, 생성된 객체에 해당 property가 새로 추가되게 된다.
var b = new Func2("World!");
b.showValue(); // alert "World!"
b.showValue = function() { alert(1234); }
b.showValue(); // alert 1234