규이 님이 스프링 노트 < 객체지향 1 >

자바스크립트 관련 이론을 설명해주는 곳은 정말 셀 수 없이 많다.
따라서 어설프게 잘못된 개념을 스스로 작성해서 적는 것 보다는
나보다 더 친절하게 설명해 주시는 분들의 
블로거나 페이지를 소개시켜주는 편이 좋을 것 같다. 

다시말해 자료의 재활용과 기존 블로그들의 재 활성화를 위함이다.

직접적으로 알지는 못하지만 이렇게 인연이 닿아
이런 고수님들을 소개해드릴 수 있게 되어
개인적으로도 영광이다.
작성하신 분들도 앞으로도 이런 영광스러움의 마음이 늘 함께하시길 바란다. 

아,
삭제를 원하시면 댓글로 말씀하시면 바로 지우겠습니다.
다른 의도는 없었습니다.
미리 양해 말씀 남깁니다.

두번째 출처는 
규이 님이 스프링 노트이다.
http://godpage.springnote.com/pages/4202573
이곳에는 자바스크립트는 물론 다양한 프로그렘에 대한 정보도 얻을 수 있다. 

참조(reference)

참조는 객체의 실제위치를 나타내는 포인터다

 

유효범위(scope)

자바스크립트에서는 유효범위가 블록(while, if, for 등등)안에 존재하지 않고 함수안에 존재한다.

전역변수는 window 객체의 프로퍼티가 된다.

 

클로저(closure) 이해하기

클로저란?   어떤함수를 감싸는 외부함수가 종료되었더라도, 내부함수에서 외부함수의 변수에 접근할 수 있는 방법. 솔직히 별로 와닿지 않음

클로저 이해법 2가지

  -> 클로저는 중첩함수 구문에서 발생

  -> 자바스크립트의 유효범위는 함수이므로 외부에서 중첩함수의 내부함수를 호출함으로써 변수의 범위가 전역으로 확장됨

 

콘텍스트(context) - this

콘텍스트 사전적 의미: 문맥, 전후관계, 어떤일의 정황, 배경, 환경

어떤 객체의 프로퍼티값을 구하기위해 알아야 하는것.(그 객체를 가르키는것)

 

알아보기

객체의 프로퍼티에 함수를 지정하는 방법과 프로토타입에 지정하는 방법은 어떻게 다른지 알아보자.

클로저가 어떤때에 쓰이는지 조사해보자.

 

 더 해보기

프로토타입을 사용하여 자바의 replaceAll, trim메서드를 만들어보자 (정규식문제?!)

 

1. String.prototype.replaceAll = function(str1, str2){
2. //이부분을 채워봅시다.
3. }
4. String.prototype.trim = function(str){
5. //이부분을 채워봅시다.
6. }

 

 

 

예제들

1. 
   /**
    * @author MYHOME
    */
   
   //자바스크립트에서는 유효범위가 블록(while, if, for 등등)안에 존재하지 않고 함수안에 존재한다.
   
   //전역변수 설정
   var drink = "milk";
   
   //if 블록
   if(3 > 1){
       //drink를 'ichigo milk'로 변경
       //여기는 여전히 전역 유효범위안이다.
       var drink = "ichigo milk";
   }
   
   //milk -> ichigo milk로 바뀜
   //alert(drink == "ichigo milk");
   
   //함수 안에서는  'ichigo latte'가됨
   function mixCoffee(){
       var drink = "ichigo latte";
       //alert(drink);
   }
   
   //함수실행
   //mixCoffee();
   
   //여기서는 다시 'ichigo milk'가 됨.
   //alert(drink);
   
   //-> 전역변수는 window 객체의 프로퍼티가 됨
   //alert("window's property : " + window.drink);
   
   //var로 변수를 선언하지 않고 사용할경우 그 변수는 전역변수가 됨 -> 사용하기에 좋은 코딩 방식은 아닌듯.
   //gv변수를 세팅해주는 함수
   function globalTest(){
       gv = "be a Global Value!";
   }
   
   //gv 세팅
   globalTest();
   
   //gv는 이제 전역변수~ -> 테스트결과 ie6에서는 이상한 반응을 보여줌
   //alert("gv " + window.gv);
   
   //--------------------------------------------------------------------------------------
   
   //클로저 연습
   //중첩함수에서 발생 // 중첩함수의 내부함수에서 참조하는 외부함수의 변수의 유효범위가 확장됨.
   
   //로보트~
   function Robot(){
       //제조일
       var createTime = new Date();
      
       //내부함수 -> 클로저발생
       this.getAge = function(){
           var now = new Date();
           var age = now - createTime; //여기
           return age;
       }
   }
   
   var robo1 = new Robot();
   
   window.onload = function(){
       //alert(robo1.getAge());
   }
   //createTime 변수/객체는 robo1이 죽을때까지 죽지않는다. (클로저때문에)
   window.onclick =function(){
       //alert("created before " + robo1.getAge()/1000 + " second" );
   }
   
   //로보트 함수2 - 컨텍스트사용
   
   function Robot2(){
       var createTime = new Date();
       this.getAge = roboAge;
   }
   
   function roboAge(){
       var now = new Date();
       var age = now - createTime;    //createTime변수는 유효범위를 벗어났으므로 사용불가 클로져가 생성되지 않음. -> 에러발생!
       return age;
   }
   
   var robo2 = new Robot2();
   
   window.onclick = function(){
   //    robo2.getAge(); //createTime이 정의되지 않았다는 에러발생
   }
   
   //클로저의 문제점
   //지역변수에서 선언된 내용의 메모리가 회수되지 않는다. - 의도하지 않은 메모리 누수의 가능성!
   
   //프로토타입 & 컨텍스트를 사용한 robot3함수
   function Robot3(){
       this.createTime = new Date();
   }
   
   Robot3.prototype.getAge = function(){
       var now = new Date();
       var age = now - this.createTime;
       return age;
   }
   
   
   var robo3 = new Robot3();
   window.onclick = function(){
       alert("created before " + robo3.getAge()/1000 + " second" );
   }
2.  
3. //--------------------------------------------------------------------------------------
   //프로토타입 - 자바스크립트 함수를 클래스처럼 사용하기
   function GameSoft(title, price){
       this.title = title;
       this.price = price;
   }
   
   //메서드 정의
   GameSoft.prototype.getTitle = function(){
       return this.title;
   }
   
   GameSoft.prototype.getPrice = function(){
       return this.price;
   }
   
   GameSoft.prototype.gameInfo = function(){
       alert("title : " + this.title + " | price : " + this.price);
   }
   
   //변수추가
   GameSoft.prototype.genre = "rpg";
   var pristontale = new GameSoft("pristontale", 10000);
   alert(pristontale.genre);
   pristontale.gameInfo();

 

참고한 책 & 사이트

Ajax in action

프로자바스크립트 테크닉

클로저 관련 : http://jibbering.com/faq/faq_notes/closures.html