prototype 사용법

JAVASCRIPT 2009/11/13 19:51 |


prototype : 객체에 새로운 메소드나 속성을 추가하고자 할때 사용한다.

 

기본 패턴은 아래와 같다.

function Atest() {
}

Atest.prototype = {

    init : function() {
        alert('init');
    },
    paging : function() {
        alert('paging');
    }
}


var test1 = new Atest();
test1.init();
test1.paging();

 

 

예제 1)

 

<html>
<head>
<script language="javascript">


function LikeSport() {
}

LikeSport.prototype = {

    initialize : function(basketball, soccer) {

        this.basketball = basketball;

        this.soccer = soccer;

    }

}

var Show = {
    okClick : function(event) {
        var SportList = new LikeSport();
        SportList.initialize('농구', '축구');
        document.getElementById('show1').innerHTML = 'SportList.basketball = ' + SportList.basketball;
        document.getElementById('show2').innerHTML = 'SportList.soccer = ' + SportList.soccer;
    },
    noClick : function(event) {
        var SportList = new LikeSport();
        SportList.initialize('농구1111', '축구1111');    
        document.getElementById('show1').innerHTML = 'SportList.basketball = ' + SportList.basketball;
        document.getElementById('show2').innerHTML = 'SportList.soccer = ' + SportList.soccer;
    }
   

}

 

 


</script>

<script>
function Person(pName,gender,birth){ // 기능함수를 만든다. Person 은 기능함수 개체이다.
  this.pName=pName; // 받은 인수를 개체 속성에 할당한다. this 는 callPerson 기능함수 개체(myPerson)를 참조한다.
  this.gender=gender;
  this.birth=birth;
}
function callPerson(IdNumb,pName,gender,birth){ // 기능함수를 만든다.
  this.IdNumb=IdNumb; // 받은 인수를 개체 속성에 할당한다.
  Person.apply(this,new Array(pName,gender,birth)); // 속성들의 배열변수를 기능함수 Person에 전달한다.
}

myPerson=new callPerson(12345,'홍길동','남',1900);
document.write('호출한 사람은 ('+myPerson.pName +', '+myPerson.gender +', '+myPerson.birth  +')이다.')
</script>

</head>
<body>

<div id="show1" ></div>
<div id="show2" ></div>
<input type="button" value="클릭" onclick="Show.okClick();">
<input type="button" value="클릭" onclick="Show.noClick();">
   
</body>
</html>

 

 

 

 

예제 2)

 

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<script>
function xFontSelector() {
    this.container = null;
    this.fontList = null;
    this.targetElement = null;
}

xFontSelector.prototype.init = function () {
    var This = this;
    var A = document.createElement("A");
    var BR = document.createElement("BR");
    this.container = document.createElement("DIV");
    this.container.style.border = "1px solid #000000";
    this.container.style.backgroundColor = "#FFFFFF";
    this.container.style.textAlign = "center";
    this.container.style.display = "none";
    this.container.style.position = "absolute";
    this.container.style.width = "100px";
    for (var i = 0; i < this.fontList.length; i++) {
        var item = A.cloneNode(false);
        item.style.cursor = "pointer";
        item.innerHTML = this.fontList[i];
        item.onclick = function () { This.setFont(this.firstChild.nodeValue); }
        this.container.appendChild(item);
        this.container.appendChild(BR.cloneNode(false));
    }
    document.body.appendChild(this.container);
}

xFontSelector.prototype.setFont = function (rFont) {
    this.targetElement.value = rFont;
    this.container.style.display="none";
}

xFontSelector.prototype.showXFontSelector = function (e) {
    this.container.style.top = e.clientY + "px";
    this.container.style.left = e.clientX + "px";
    this.container.style.display = "block";
}

var xFont = new xFontSelector();

function testfont() {
    xFont.fontList = new Array("굴림","궁서","바탕","돋움");
    xFont.targetElement = document.getElementById("selFont");
    xFont.init();
}


function array_max(){
var i, max = this[0];

for (i = 1; i < this.length; i++){
    if (max < this[i]) max = this[i];
}

return max;
}
Array.prototype.max = array_max;
var x = new Array(1,2,3,4,5);
document.write(x.max());

</script>
 </HEAD>

 <BODY onload="testfont()">
<form name="form1">
<input type="text" name="selFont" id="selFont">
<input type="button" value="폰트선택" onclick="xFont.showXFontSelector(event)">
</form>
 </BODY>
</HTML>

[출처] prototype 사용법...|작성자 유노


저작자 표시

'JAVASCRIPT' 카테고리의 다른 글

prototype : Ajax.Request  (0) 2009/11/13
Ajax.Request객체  (0) 2009/11/13
prototype 사용법  (0) 2009/11/13
prototype.js:다운로드해 사용해 보자  (0) 2009/11/13
getElementsByTagName 사용예  (0) 2009/11/13
아이디 저장 프로세스  (0) 2009/11/13


Posted by 거침없이포스팅

Trackback Address :: http://blog.postgo.co.kr/trackback/109 관련글 쓰기

댓글을 달아 주세요

티스토리 툴바