승진이의 세상 살아가는 이야기  
Front Page
Tag | Location | Media | Guestbook | Admin   
 
자바스크립트 오버로딩,오버라이딩
현재 우리가 사용하고 있는 자바스크립트는 1.5버전을 사용하고 있다. 자바스크립트 2는 현재 Working Draft1까지 나온 상태이다.

내가 자바스크립트를 공부한지 얼마 되지 않았기 때문에 이해를 못하는 부분도 약간 있었다. 대충 이해하고 도움이 될것 같은것 위주로 정리를.. ㅎㅎㅎ

Functions are First-Class Object (Language : javascript)
  1. fucntion sum(a,b) {
  2.     return a + b;
  3. }
  4.  
  5. var sum = function(a, b) {
  6.     return a + b;
  7. }

펑션이 First-Class Object라는 의미는 잘 이해하지 못했지만 두가지형태 모두 사용이 가능하다. 아래 형태는 prototype.js를 사용할 때 익숙치 않아서 이해할때 가장 어려움이 있었던 부분.

Suports functional scope only (Language : javascript)
  1. function showSum(a, b) {
  2.     var c = function() {
  3.         alert(a + b);
  4.     }
  5.     return c;
  6. }
  7.  
  8. var sum = showSum(2, 3);
  9. sum();

제한적인 영역을 가지는 펑션이다. c의 경우에는 리턴을 받는 것 외에는 밖에서 제어할 수가 없다.

Supports closure (Language : javascript)
  1. function add_x(x) {
  2.     return function(y) { return x + y; };
  3. }
  4.  
  5. var f = add_x(3);
  6. f(4);

클로저 지원이다. 말은 들은 적이 있는데 잘 감이 오질 않는다. 저걸 실행하면 f(4)가 7 이란 값을 리턴해준다. 이해는 잘 못하지만 먼가 신기하다. 클로저란게 원래는 3으로 함수를 호출했을때 x가 할당되고 함수가 끝나면 x의 값이 사라져야 되는데 그렇지 않고 남아있게 되는거다. 아직 내공이 부족해서 정학이 어떤 상황에 써야할지는 감이 잘 오질 않는다. 클로저에 대해 알아보려고 찾은 괜찮은 글이 있어서 링크를 건다.


이하는 자바스크립트를 객체지향으로 사용하는 법에 대한 부분이다.

Constructor (Language : javascript)
  1. var car = function(name, cost) {
  2.     this.name = name;
  3.     this.cost = cost;
  4.     this.feature();
  5. }
  6.  
  7. car.prototype.feature = function() {
  8.     alert("name : " + this.name + "\n cost : " + this.cost);
  9. }
  10.  
  11. var sonata = new car("쏘나타", 2000);

추상화(Abstraction)부분이다. prototype.js를 이해하려면 필수적으로 이해해야 할 부분이라고 생각된다. 처음 봤을때는 꽤나 당황했었지만 저런 패턴을 많이 사용하고 복잡한 스크립트일수록 저렇게 객체로 만들어 쓰는건 유용한것 같다. 당연히 OOP는 검증된 패턴이니까....

Overloading (Language : javascript)
  1. var sum = function() {
  2.     var args_len = arguments.length;
  3.     switch(args_len) {
  4.         case 0:
  5.             statement.....;
  6.             break;
  7.         case 1:
  8.             statement.....;
  9.             break;
  10.         ............
  11.     }
  12. }

C할때 지겹도록 배우던(배우기만 지겹게 배웠지 이해는 잘.. ㅋㅋ) 오버로딩이다. 기본적으로 자바스크립트는 오버로딩을 지원하지 않는다. 파라미터 갯수가 달라도 기본적으로 오류가 나지 않고 알아서 해주기 때문에 오버로딩을 해주지 못하는데 그걸 이런식으로 해결한 것이다. 어려운 스크립트는 아니지만 순간 "천잰데?" 하는 생각이 들었다. 아규먼트 갯수를 세어서 오버로딩을 할 수 있게 해준다. 물론 연산자 오버로딩은 안된다. ㅎㅎ

function Overloading (Language : javascript)
  1. switch(args_len) {
  2.     case 0:
  3.         if(typeof(arguments[0]) == "Number") {
  4.             Numeric Operation...
  5.         } else if(typeof(arguments[0]) == "String") {
  6.             String Operation....
  7.         }
  8.     case 1:
  9.         statement.....;
  10.         break;
  11.     ............
  12. }
  13.  

오버로딩을 이런식으로 하면 아규먼트 타입에 따라서도 다르게 할 수 있다. 신기한게 참 많군..

Overriding (Language : javascript)
  1. var car = function(name, cost, gasoline) {
  2.     this.name = name;
  3.     this.cost = cost;
  4.     this.fuel = gasoline;
  5. }
  6.  
  7. car.prototype = {
  8.     use_fuel : function(offset) {
  9.         this.fuel -= offset;
  10.         return this.fuel;
  11.     }
  12. }
  13.  
  14. var avante = new car("avante", 1500, 2000);
  15. var sonata = new car("sonata", 2000, 3000);
  16.  
  17. sonata.use_fuel = function() {
  18.     return this.fuel;
  19. }

OOP의 상속성을 보여주는 부분이다. 이를 위해서 자바사크립트는 prototype이라는 메서드를 제공하고 있다. 그냥 sonata.use_fuel()을 하면 8번라인의 use_fuel이 실행된다. 하지만 17번에서 sonata.use_fuel()을 다른 메서드로 재정의 해 줌으로써 sonata.use_fuel()을 하면 17번 라인의 use_fuel이 실행된다. Overriding된 것이다.

Encaptulation, Data Hiding (Language : javascript)
  1. var car = function(name, cost, gasoline) {
  2.     this.name = name;
  3.     this.cost = cost;
  4.     var fuel = gasoline;
  5.     function use_fuel(offset) {
  6.         fuel -= offset;
  7.     }
  8.     this._useFuel = function(offset) {
  9.         use_fuel(offset);
  10.     }
  11. }
  12.  
  13. var sonata = new car("sonata", 2000, 3000);
  14. sonata._useFuel(10);

캡슐화와 정보은닉화 부분이다. 함수를 이렇게 구성하면 4, 5번라인의 fuel과 use_fuel은 Private Member가 되고 8번줄의 _use을 통해서 Private Member에 접근한다.

이상이 OOP에 대한 부분이고 이하는 그외 몇가지 도움이 될만한 코딩들이다.

Flexibility of Javascript (Language : javascript)
  1. var target = e.srcElement || e.target;
  2.  
  3. var index = (index >= 0) ? index : 0;
  4.  
  5. function oneRun() {
  6.     .................
  7.     .................
  8.     oneRun = function() {}
  9. }

1번은 둘중에 유효한 값이 자동으로 들어간다. (이거 꽤 유용할듯..)
나도 3항연산자는 잘 안쓰는 편이데 3항연산자로 변수할당도 가독성도 괜찮고 간단히 짤수 있어서 좋은듯...
5번줄의 oneRun은 괜찮은 아이디어같다. 이게 머냐하면 단 한번만 실행이 되어야 하는 메서드이다. 메서드를 다 실행안다음에 자신은 empty로 초기화 시켜버림으로써 단 한번만 실행할 수 있게 한다.(fake overliding)


innerHTML (Language : javascript)
  1. var strHTML = "<div id = 'abcd'>";
  2. strHTML += " HTML 텍스트....";
  3. ............
  4. strHTML += "</div>";

innerHTML을 쓸때 보통 위와 같은 형태로 string을 만들어서 사용하는데 이것은 상당히 부하가 크다. 과정을 설명하자면 1번줄에서 공간을 확보하고 string을 할당하고 2번줄에서 추가되기 때문에 이전꺼는 지운다음에 string을 이어붙힌 만큼의 공간을 다시 확보하고 할당한다. 이과정이 계속 반복되는 것이다. 그래서 아래와 같이 사용하는 것이 더 좋단다.

innerHTML (Language : javascript)
  1. var strHTML = new Array();
  2. strHTML.push("html 텍스트");
  3. ..........
  4. return strHTML.join("");

스트링을 배열로 만든 뒤에 join()으로 스트링을 이어붙힌 것이다. join은 인자로 각 배열을 스트링으로 이어붙혀주느데 인자로 아무것도 주지 않았으므로 text가 그냥 이어붙혀진다. 이렇게 사용할 경우 IE에서는 더 빠르고 Firefox에서는 두 방법의 속도가 비슷하다고 한다.


(Language : javascript)
  1. var value = document.getElementById("inputbox").value;
  2. var diabled = document.getElementById("inputbox").disabled;
  3. value = "검색어";
  4. disabled = true;

객체의 속성을 사용할때 반족될 경우 위처럼 사용한 것 보다는
(Language : javascript)
  1. var oInput = document.getElementById("inputbox");
  2. oInput.value = "검색어";
  3. oInput.disabled = true;

이렇게 변수에 할당해서 하는 것이 더 빠르다. 전자의 경우는 매번 찾는 과정을 반복하게 된다.


form submit handler의 올바른 사용법 (Language : javascript)
  1. <form onsubmit="return handler();">
  2.     <input type="image" ...>
  3. </form>
  4.  
  5. function handler() {
  6.     if(condition) {
  7.         return false;
  8.     }
  9.     return true;
  10. }

이부분은 약간 태그의 올바른 사용법에 해당하는 부분이다. 우리팀도 웹표준에 대한 부분이 잘 정립이 안되어 있기 때문에 이렇게 사용안하고 inpu type=button에다가 onclick="checkValid();"를 주어서 값이 맞을 경우에만 form.submit을 한다. 근데 이건 동작은 기본적으로(?) 같기는 하지만 올바른 방법은 아니다. 왜나하면 type=submit이란 태그가 존재하고 이를 사용하면 자동으로 submit으로 동작을 하니까...(type=image도 똑같은 submit이다. 이미지버튼이란 점 빼고...) 이부분은 약간 애매하긴 하지만 올바르게 용도대로 사용할 때의 이점도 있다. 이부분에 대해선 따로 포스팅하겠다.

submit버튼을 사용하면 자동으로 submit이 되므로 Validation체크를 할 시간이 없기 때문에 onsubmit핸들러를 통해서 Validation체크를 해주도록 하는 것이다.


또한 프레임워크 사용에 대해서도 약간 주의를 주었다. prototype.js를 사용하면서 $()만 사용하는 경우도 많은데 이럴결우 몸짓만 커지고 느려질수가 있다.(내가 그렇다. ㅡ..ㅡ $와 $F만...) 프레임워크를 사용하려면 최대한 활용을 하자...
신고


BLOG main image
항상 0에서 시작한다는 자세를 갖고 앞으로 나에게 가장 유리한 것이 무엇인지를 찾아라.
 Notice
 Category
분류 전체보기 (228)
승진이 이야기 (29)
승진이 공부중 (16)
승진이 자료실 (1)
승진이와 Android (1)
승진이와 Java (49)
승진이와 DB (10)
승진이와 영어 (3)
승진이와 책 (8)
승진이와 C (6)
승진이와 Web (15)
승진이와 정보 (68)
승진이와 XML (3)
승진이와 Q&A (2)
승진이의 Logs (0)
승진이와 사진 (1)
승진이와 Android (0)
승진이와 자동차 (4)
승진이와 이클립스 RCP (6)
승진이와 프로젝트들 (0)
승진이와 JavaScript (2)
승진이와 쉘프로그래밍 (0)
Flex (0)
 TAGS
IzPack surge 자바 문자열 검색 FTP업로드 java.lang.NoClassDefFoundError 리눅스 informix 객체 참조 Android 새창으로 열기 수식 검색 신협중앙회 얼린 문 열기 c 스윙 C언어 문자열 디렉토리명 넷빈즈 에러 크로스 브라우저 펀드 특수 문자 엑셀 오라클 SDK Setup.exe 자격증 LPIC Preference 디렉토리 변경 java install.xml 뒤로가기 버튼 쓰레드 pk fk 조회 리눅스 팁 쉘스크립트
 Calendar
«   2017/11   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
 Recent Entries
ORA-32039: 순환 WITH 절에는 열 별칭 목록..
rexpert 오라클 접속 설정 방법
간단한 코드 테이블 설계
String padding 자바스크립트
jquery selector 셀렉터 표현식으로 찾기
이광영 부장판사 솜방망이 처벌 관련 링크들
sql 디벨로퍼 각주 제거 생성 단축키
jquery 이용하여 프린트 1
테이블 자동 줄바꿈 처리 방법
문자 찍는 함수 CHR() 함수와 ASCII()함수
 Recent Comments
5년이란 시간동안 my..
은성훈 - 2014
한국새끼들이 이래서..
qweqwe - 2014
mysql도 rollup기능..
ㄴㄴㄴ - 2014
감사합니다
고마워요 - 2012
헐.. 정말인가요? 사..
BreathAir - 2011
저는 이제서야 관련..
originkim - 2011
아주 막장 그자체라..
기술자 - 2010
request의 parameter..
님 짱!! - 2010
제가 목격한 건데요...
^^ - 2010
네 도대체 왜 그렇게..
BreathAir - 2010
 Recent Trackbacks
スタッドレスタイヤ..
スタッドレスタイヤ..
野球ス ミズノ
野球ス ミズノ
ve may bay
ve may bay
visit this web page..
visit this web page..
timeshare vacation..
timeshare vacation..
joogle.in
joogle.in
arassegaf.com
arassegaf.com
new Software techno..
new Software techno..
www.douloschurch.com
www.douloschurch.com
fix DBF file
fix DBF file
 Archive
2013/12
2013/11
2013/04
2013/03
2012/09
 Link Site
내 마음속 폭풍은 아직 아..
괴짜 프로그래머의 일상사~..
Joel on Software
Android 개발자 커뮤니티 ,..
developer.com
Jace\'s Blog
오라클 10g Documentation
Programing Note (승만이)
실용주의를 꿈꾸며(이클립..
http://pragmatic.kr
자바 누리 기술 문서 / 매..
Reflect
Java API 6.0 한글번역
eclipse resources 문서 링..
자바 관련 소스 많은 곳
미디어 파일 (무제한 웹하드)
http://younghoe.info/
Open Knowledge Share Drea..
키스포토 (사진강좌와 사진..
외국 드라마 TV show 자막..
무료 ebooks
지금샵
 Visitor Statistics
Total : 233,018
Today : 29
Yesterday : 14
rss