0)
함수 object 에 prototype 이라는 항목이 있는데요,
prototype 을 어떻게하면 효율적(?)으로 사용할까..라는 생각..이전에,
prototype 을 어떻게 쓰는건지 궁금했습니다.
* 참고 *
ISBN 978-89-6626-015-7 JavaScript Patterns
113page - 프로토타입과 비공개 멤버..
...
1)
<div id=d120418_1>output1</div>
<div id=d120418_2>output2</div>
<div id=d120418_3>output3</div>
<div id=d120418_4>output4</div>
<div id=d120418_5>output5</div>
<script>
(
function() {
var Gadget = function() {
this.getName = function() {
return this.name
};
// this.prototype=.. 형식은 넣어도 적용 안됩니다. prototype 인수(?)받은 후에 function 함수 실행이 되니까요.
};
var toy = new Gadget();
Gadget.prototype = {
name: 'Safari',
getBrowser: function() {
return this.name;
},
setBrowser: function(v) {
this.name = v;
},
deleteName: function(v) {
delete this.name;
}
}
var
tuy = new Gadget();
document.getElementById('d120418_1').innerHTML = toy.getName() + ' ' + (toy.getBrowser ? toy.getBrowser() : '*none-function*');
document.getElementById('d120418_2').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
tuy.setBrowser('Chrome');
document.getElementById('d120418_3').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
tuy.deleteName();
document.getElementById('d120418_4').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
tuy.deleteName();
document.getElementById('d120418_5').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
})();
</script>
...
...
2)
Gadget 함수를 prototype 없이 적용한
toy 변수 예시와
prototype 을 적용한
tuy 변수에
name 값을 적용한 예시입니다.
3)
첫번째 줄은, prototype 을 적용하지 않았으니
Gadget 을 이용해 만든 object 에 name 항목이 없어서 "undefined",
역시, getBrowser 함수도 항목이 없어서 "undefined" 입니다.
두번째 줄은, prototype 을 적용한 후인데,
object 내에는 name 항목이 없지만, prototype 에서 name 항목을 찾아서 "Safari" 가 넘어왔구요,
getBrowser 함수도 prototype 에서 찾을 수 있기 때문에 "Safari" 가 넘어왔습니다.
세번째 줄은, setBrowser 함수를 이용해서 name 항목에 적용한 예시입니다.
네번째 줄은 setBrowser 함수를 이용해서 적용한 name 값을 삭제한 예시입니다.
다섯번째 줄은 name 값을 다시 삭제하려는 예시입니다.
4)
세번째 줄 까지는 금방 이해를 하실 수 있겠습니다만,
네번째 줄은 세번째 줄에서 선언한
"object 내에서의 name 항목"을 삭제한 케이스입니다.
prototype object 에 있는 name 항목을 삭제한 것은 아니죠.
결국, 세번째줄에서 선언한 name 은
해당 object 내에 적용할 경우라,
name 항목을 바로 찾을 수 있기 때문에 "Chrome"이 넘어왔구요..
네번째 줄에서 삭제한 name 은
해당 object 내에 있는 name 항목인데,
name 을 다시 부를 때, 삭제한 항목이라 없기 때문에 prototype 으로 선언해둔
name 값을 찾아와 "Safari"가 넘어온거죠.
5)
다섯번째 줄..에서 조금 애매(?)할 수는 있습니다.
해당 object 내에 name 항목이 없으면 prototype 의 name 을 의미하는게 아닐까..하구요..
하지만, 항목 선언시에 적용되는 타겟이냐와,
항목을 못찾았을 경우 prototype 적용값을 추적하느냐..는 조금 달라서요..
결국, 삭제하려던 name 항목은 그냥(?) 못찾는 것이고,
값을 불러올 땐 prototype 으로 선언했던
name 항목까지 찾아내서 "Safari"가 넘어오게 되는거죠.
...
6)
정리를 하자면(?),
function object 에 선언하는
prototype 항목은
function 이 new 를 이용해서 object 를 만들었을 때 사용되며, (첫번째의 undefined..)
해당 항목명을 못찾았을 땐
prototype 으로 선언된 값을 추적해서 찾아오고, (두번째 Safari)
선언, 삭제를 할 때는
해당 object 에 있는 항목을 직접 지정하며, (세번째 setBrowser, 네번째 deleteName)
삭제하려는 해당 항목이 없을 땐,
해당 항목명을 찾지못한다고 오류를 내지 않고, 그냥 종료를 합니다. (다섯번째 deleteName)
... 이런 내용이네요.
탐색 node(?) 가 prototype 선언을 이용해서 적용되는 것 까지는 알겠는데..
음.. 실제 활용에서는 더 복잡(?)하게 전개할 수 있다는게 흥미롭습니다.
easyBow killofki@.
함수 object 에 prototype 이라는 항목이 있는데요,
prototype 을 어떻게하면 효율적(?)으로 사용할까..라는 생각..이전에,
prototype 을 어떻게 쓰는건지 궁금했습니다.
* 참고 *
ISBN 978-89-6626-015-7 JavaScript Patterns
113page - 프로토타입과 비공개 멤버..
...
1)
<div id=d120418_1>output1</div>
<div id=d120418_2>output2</div>
<div id=d120418_3>output3</div>
<div id=d120418_4>output4</div>
<div id=d120418_5>output5</div>
<script>
(
function() {
var Gadget = function() {
this.getName = function() {
return this.name
};
// this.prototype=.. 형식은 넣어도 적용 안됩니다. prototype 인수(?)받은 후에 function 함수 실행이 되니까요.
};
var toy = new Gadget();
Gadget.prototype = {
name: 'Safari',
getBrowser: function() {
return this.name;
},
setBrowser: function(v) {
this.name = v;
},
deleteName: function(v) {
delete this.name;
}
}
var
tuy = new Gadget();
document.getElementById('d120418_1').innerHTML = toy.getName() + ' ' + (toy.getBrowser ? toy.getBrowser() : '*none-function*');
document.getElementById('d120418_2').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
tuy.setBrowser('Chrome');
document.getElementById('d120418_3').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
tuy.deleteName();
document.getElementById('d120418_4').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
tuy.deleteName();
document.getElementById('d120418_5').innerHTML = tuy.getName() + ' ' + (tuy.getBrowser ? tuy.getBrowser() : '*none-function*');
})();
</script>
...
undefined *none-function*
Safari Safari
Chrome Chrome
Safari Safari
Safari Safari
...
2)
Gadget 함수를 prototype 없이 적용한
toy 변수 예시와
prototype 을 적용한
tuy 변수에
name 값을 적용한 예시입니다.
3)
첫번째 줄은, prototype 을 적용하지 않았으니
Gadget 을 이용해 만든 object 에 name 항목이 없어서 "undefined",
역시, getBrowser 함수도 항목이 없어서 "undefined" 입니다.
두번째 줄은, prototype 을 적용한 후인데,
object 내에는 name 항목이 없지만, prototype 에서 name 항목을 찾아서 "Safari" 가 넘어왔구요,
getBrowser 함수도 prototype 에서 찾을 수 있기 때문에 "Safari" 가 넘어왔습니다.
세번째 줄은, setBrowser 함수를 이용해서 name 항목에 적용한 예시입니다.
네번째 줄은 setBrowser 함수를 이용해서 적용한 name 값을 삭제한 예시입니다.
다섯번째 줄은 name 값을 다시 삭제하려는 예시입니다.
4)
세번째 줄 까지는 금방 이해를 하실 수 있겠습니다만,
네번째 줄은 세번째 줄에서 선언한
"object 내에서의 name 항목"을 삭제한 케이스입니다.
prototype object 에 있는 name 항목을 삭제한 것은 아니죠.
결국, 세번째줄에서 선언한 name 은
해당 object 내에 적용할 경우라,
name 항목을 바로 찾을 수 있기 때문에 "Chrome"이 넘어왔구요..
네번째 줄에서 삭제한 name 은
해당 object 내에 있는 name 항목인데,
name 을 다시 부를 때, 삭제한 항목이라 없기 때문에 prototype 으로 선언해둔
name 값을 찾아와 "Safari"가 넘어온거죠.
5)
다섯번째 줄..에서 조금 애매(?)할 수는 있습니다.
해당 object 내에 name 항목이 없으면 prototype 의 name 을 의미하는게 아닐까..하구요..
하지만, 항목 선언시에 적용되는 타겟이냐와,
항목을 못찾았을 경우 prototype 적용값을 추적하느냐..는 조금 달라서요..
결국, 삭제하려던 name 항목은 그냥(?) 못찾는 것이고,
값을 불러올 땐 prototype 으로 선언했던
name 항목까지 찾아내서 "Safari"가 넘어오게 되는거죠.
...
6)
정리를 하자면(?),
function object 에 선언하는
prototype 항목은
function 이 new 를 이용해서 object 를 만들었을 때 사용되며, (첫번째의 undefined..)
해당 항목명을 못찾았을 땐
prototype 으로 선언된 값을 추적해서 찾아오고, (두번째 Safari)
선언, 삭제를 할 때는
해당 object 에 있는 항목을 직접 지정하며, (세번째 setBrowser, 네번째 deleteName)
삭제하려는 해당 항목이 없을 땐,
해당 항목명을 찾지못한다고 오류를 내지 않고, 그냥 종료를 합니다. (다섯번째 deleteName)
... 이런 내용이네요.
탐색 node(?) 가 prototype 선언을 이용해서 적용되는 것 까지는 알겠는데..
음.. 실제 활용에서는 더 복잡(?)하게 전개할 수 있다는게 흥미롭습니다.
easyBow killofki@.
'baseJavascript' 카테고리의 다른 글
prototype] 쉽게(?) 설정하자면.. (0) | 2012.06.04 |
---|---|
function]..을 delete 했을 때.. ('12.09.14 14:50 추가수정..) (0) | 2012.06.02 |
function var] 함수내 함수를 재사용하기 위해 함수내 변수를 전달해보고 싶었습니다. (0) | 2012.04.07 |
var 선언] function 기능을 쓰지 않으면..? (0) | 2011.11.25 |
c언어] 잠깐 ++(plus 기호 두개) 에 대한 것이 생각나서.. (0) | 2011.09.15 |