기록, 정리 조각

JavaScript OOP, Prototype)

1. 객체에 속성이용

man.name="홍길동";

Man["name"] = "홍길동";

2. 함수 추가

1) 익명의 함수 이용

(함수의 이름이 없고 몸체만있는 함수) 

Man.getName = fuction(){

       return this.name;

}

2) 객체 외부 함수 이용

function printName()

{

       alert(this.name);

}

Man.getName = printName; // 괄호를 사용하지 않음

3. 객체 생성

1) new Object(); 방식

 new Object();

 var man = new Object();

 man.name = "홍길동";

2) 생성자이용

function ManObject(name, height){

       this.name = name;

       this.height = height;

}

Var man = new ManObject("홍길동", 170);

Alert(man.name + " / " + man.height);

3) 생성자를 이용한 방식에서 클래스에 메소드 추가

function ManObject(name, height){

 this.name = name;

 this.height = height;

 

this.getName = function(){

       return this.name

} // 생성자에 직접 함수 정의

}

Prototype 속성은 모든 자바스크립트 객체의 기본속성이다.

--어떤 객체의 prototype에 속성이나 함수를 정의 한다는 것은 앞으로 그 객체에 공통적으로 적용되는 속성이나 함수를 정의한다는 의미

4.Prototype 를 이용

function ManObject(name, height){

       this.name = name;

       this.height = height;      

} // 생성자를 만들고 함수는 생성자 안에 지정하지 않음

ManObject.prototype.getName = function(){

       return this.name;

} // prototype 속성에 새로운 함수를 붙임

생성자에 함수 정의

인스턴스를 여러 개 만들때 인스턴스는 메모리로 상주. 인스턴스마다 함수와 같이 생김

Prototype을 이용

함수가 단한번 만들어지고 모든 인스턴스는 이 프로로타입 함수를 공유한다.

객체안에 내장된 함수가 객체의 지역변수를 자신의 지역변수처럼 사용할 경우 이러한 함수를 클로저라 한다.

5.클로저

1-1) 클로저 발생 하는 경우

function MyObject(){

       var startTime = new Date();

       this.elapsedTime = function(){

              var now = new Date();

              var elapsed = now - startTime;

              return elapsed;

       }

}      // 클로저 : startTime 이 함수 안에 없고, 클래스 변수         //startTime을 참조함

       //클로저발생 => 함수 안에서 사용하는 외부의 지역변수는

       //깨긋이 지워지지 않고 함수에 묶여있어 메모리 누수현상발생.

1-2) 참조할수 있는 startTime이 없어 오류발생 하는 경우

function MyObject(){

       var startTime = new Date();

       this.elapsedTime = getElapsed;

}

function getElapsed(){

     var now = new Date();

     var elapsed = now + startTime();        return elapsed;

}

1-3) 클로저 발생안되게 사용하는 방법

function MyObject(){

       this.startTime = new Date();

}

MyObject.prototype.elapsedTime = function(){

      var now = new Date();

      var elapsed = now + this.startTime;      

      return elapsed;

}

6.Prototype 의 성질 

1) Prototype 속성 변경  

그 이전에 만들 객체의 속성은 자동으로 변경

 프로토 타입 영역의 속성은 모든 인스턴스간에 공유

function MyObject(){ }

MyObject.prototype.color = "blue";

var obj1 = new MyObject();

alert(obj1.color); // blue

MyObject.prototype.color = "red";

car obj2 = new MyObject();

alert(obj1.color + " / " + obj2.color); // red / red

2) Prototype를 이용한 내장객체 확장

Object.prototype.log = function(){

document.write("this:" + this);

//최상위 객체인 Object의 프로토타입에 log함수 추가 => 모든 자바스크립트 객체, 변수에 대해서 log메소드 사용가능

}

var arr = new Array(0,1,2);

arr.log(); // this : 0, 1, 2

var name = "mike";

name.log(); // this : mike

var sum = 1 + 3;

sum.log();       //this : 4

7. 자바스크립트 객체의 상속

1-1) 상속 - prototype 을 이용한 부모 클래스 지정방법 (부모클래스 생성자 매개변수 없는경우)

       ManObject.prototype.eyeCnt = 2;

       ManObject.prototype.getEyeCnt = function(){

              return this.eyeCnt;

}

function AsianMan(){

       this.eyeColor = "black";

}

AsianMan.prototype = new ManObject();//AsianMan 의 부모클래스는 ManObject

function WesternMan(){

       this.eyeColor = "blue";

}

WesternMan.prototype = new ManObject();//WesternMan 의 부모클래스는 ManObject

var HongGilDong = new AsianMan();

var smith = new WesternMan();

alert(HongGilDong.eyeCnt); // 2

alert(HongGilDong.eyeColor); // black

alert(HongGilDong.getEyeCnt()); // 2

alert(smith.eyeCnt); //2

alert(smith.eyeColor); // blue

alert(smith.getEyeCnt()); // 2

1-2) 상속 - prototype 을 이용한 부모 클래스 지정방법 (부모클래스 생성자 매개변수 있는경우)

$(id | element) // 엘리먼트가 반환됩니다.$((id | element) ...) // 다수의 id나 element를 입력할 경우 동일한 수의 엘리먼트 배열이 반환됩니다.

function $(element) {  // 입력된 인자가 2개 이상이라면  if (arguments.length > 1) {    // elements라는 배열을 만들어 인자 수 만큼 순환    for (var i = 0, elements = [], length = arguments.length; i < length; i++)      // 입력된 인자를 다시한번 재귀 호출로 자기 자신을 호출하여 그 결과를 elements 배열에 넣음      elements.push($(arguments[i]));    // 결과 리턴    return elements;  }  // 입력된 인자가 1개 이하라면 해당 인자가 문자열인지 확인한다  if (Object.isString(element))    // 모두들 아실 document.getElementById 입니다.    element = document.getElementById(element);  // 가져온 element를 Prototype Element를 상속받아 반환합니다.  return Element.extend(element);}

$$('div');// -> document에 존재하는 모든 DIV 엘리먼트를 가져옵니다. // -> document.getElementsByTagName('div')와 동일합니다. $$('#contents');// -> 이것은 $('contents')와 동일합니다.

<ul id="fruits">   <li id="apples">     <h3 title="yummy!">Apples</h3>     <ul id="list-of-apples">       <li id="golden-delicious" title="yummy!" >Golden Delicious</li>       <li id="mutsu" title="yummy!">Mutsu</li>       <li id="mcintosh">McIntosh</li>       <li id="ida-red">Ida Red</li>     </ul>     <p id="saying">An apple a day keeps the doctor away.</p>   </li> </ul>

$('apples').getElementsBySelector('[title="yummy!"]'); // -> [h3, li#golden-delicious, li#mutsu] 배열이 반환 됨
$('apples').getElementsBySelector( 'p#saying', 'li[title="yummy!"]'); // -> [li#golden-delicious, li#mutsu, p#saying] 배열이 반환됨
$('apples').getElementsBySelector('[title="disgusting!"]'); // -> [] 빈 배열이 반환됨

var nodes = $A(someUL.getElementsByTagName('li')).map(Element.extend); var nodes2 = someUL.getElementsBySelector('li');

<ul>  <li id="yellow">홍길동</li>  <li class="blue">이순신</li>  <li title="nice">유관순</li></ul>

$$('li');// -> [li#yellow, li.blue, li] 배열이 반환됨 $$('li#yellow');// -> [li#yellow] #은 id를 뜻함. li 엘리먼트 중에 yellow라는 id를 가진 엘리먼트를 찾아 반환함 $$('#yellow');// -> [li#yellow] yellow id를 가진 엘리먼트를 찾아 반환함 $$('li[title=nice]');// -> [li] 배열 반환// -> [] 으로 감싼 부분은 속성을 뜻함. li객체중에 title속성의 값이 'nice' 인 엘리먼트를 찾아 반환 $$('[title=nice]');// -> [li] 배열 반환// -> 모든 엘리먼트중에 title속성의 값이 'nice'인 엘리먼트를 찾아 반환

$$('#contents a[rel]'); // -> 모든 a 엘리먼트중에 contents라는 id를 가지고 rel 속성을 가지고 있는 엘리먼트 반환 $$('a[href="#"]');// -> 모든 a 엘리먼트중에 href 속성이 #인 엘리먼트 반환 $$('#navbar a', '#sidebar a'); // -> 모든 a 엘리먼트중에 id가 navbar거나 sidebar인 엘리먼트 반환 

var paras = $A(document.getElementsByTagName('p'));paras.each(Element.hide); $(paras.last()).show();

$A(document.getElementsByTagName('p')).map(Element.extend).invoke('hide'); 

function $A(iterable) {  // 입력된 값이 빈 값을 경우 빈 배열을 반환  if (!iterable) return [];  // Prototype의 메서드인 toArray가 있을 경우 해당 메서드를 실행하여 반환  if (iterable.toArray) return iterable.toArray();  // 입력된 값의 길이를 가져온다. 없을 경우 0으로 함  // results라는 이름의 배열을 생성한다  var length = iterable.length || 0, results = new Array(length);  // 새로만든 results 배열로 값 복사  while (length--) results[length] = iterable[length];  // 결과 반환  return results;}

// 어려운 방법function showArgs() {   alert(Array.prototype.join.call(arguments, ', ')); }
// 쉬운 방법function showArgs() {   alert($A(arguments).join(', ')); } 

var form = $('contact'); // -> contact 라는 id를 가진 form을 가져옴 var input = form['company']; // -> form 이하의 name이 company 폼 엘리먼트를 가져옴 Form.Element.getValue(input);// -> 폼 엘리먼트의 값을 가져옴 // 혹은 다음과 같은 짧은 방법이 있음$(input).getValue();

$F(input);

var $F = Form.Element.Methods.getValue;

Form.Element.Methods = {  getValue: function(element) {    // 입력받은 엘리먼트를 Element 상속 받음

    element = $(element);    // 엘리먼트의 tagName을 소문자로 바꾸어 method에 저장

    var method = element.tagName.toLowerCase();    // Form.Element.Serializers 클래스 이하의 method 메서드를 수행함

    // Form.Element.Serializers.method 라고 하면 진짜 method를 찾겠죠

    // 이와 같이 하면 동적으로 메서드를 호출할 수 있음



    return Form.Element.Serializers[method](element);  }}

Form.Element.Serializers = {  input: function(element, value) {    // 엘리먼트의 타입을 확인    switch (element.type.toLowerCase()) {      case 'checkbox':      case 'radio':        // 체크박스와 라디오는 다음의 메서드를 다시한번 호출하여 결과를 반환        return Form.Element.Serializers.inputSelector(element, value);      default:        // 기타 나머지는 textarea로 판단        return Form.Element.Serializers.textarea(element, value);    }  },
  inputSelector: function(element, value) {    // value 값이 없으므로 엘리먼트의 checked값이 참이면 value를 반환하고 거짓이면 null 반환    if (Object.isUndefined(value)) return element.checked ? element.value : null;    else element.checked = !!value;  },
  textarea: function(element, value) {    // value값이 없으므로 엘리먼트의 value값이 반환    if (Object.isUndefined(value)) return element.value;    else element.value = value;  }};

function $H(object) {  return new Hash(object);};

$R(0, 10).include(10) // -> true 반환, 10이 포함되어 있는지 확인$A($R(0, 5)).join(', ') // -> '0, 1, 2, 3, 4, 5' $A($R('aa', 'ah')).join(', ') // -> 'aa, ab, ac, ad, ae, af, ag, ah' $R(0, 10, true).include(10) // -> false 반환, 10이 포함되었나 확인하는 명령문, 3번째 인자가 true로 10이 포함되지 않음$R(0, 10, true).each(function(value) {   // 10번 실행되며 value값은 0부터 9까지 증가}); 

$w('apples bananas kiwis') // -> ['apples', 'bananas', 'kiwis'] 배열 반환

$w('apples bananas kiwis').each(function(fruit){   var message = 'I like ' + fruit;   // 메시지와 함께 무언가를 처리})

$w('ads navbar funkyLinks').each(Element.hide);

['ads', 'navbar', 'funkyLinks'].each(Element.hide);

function $w(string) {  // 입력된 값이 문자열이 아닐경우 빈 배열 반환  if (!Object.isString(string)) return [];  // 일반 프로그래밍의 trim에 해당하는 문자열 좌우 공백 제거  string = string.strip();  // 문자열 값이 있으면 정규식 \s(whitespace)로 split, 없다면 빈 배열 반환  return string ? string.split(/\s+/) : [];}

getTransport: function() {   return Try.these(     function() { return new XMLHttpRequest() },     function() { return new ActiveXObject('Msxml2.XMLHTTP') },     function() { return new ActiveXObject('Microsoft.XMLHTTP') }   ) || false;}