Gyui's Spring Notes — Object-Oriented 1

Reference

A reference is a pointer to the actual location of an object.

Scope

In JavaScript, scope does not exist inside blocks such as while, if, or for; it exists inside functions.

A global variable becomes a property of the window object.

Understanding closures

What is a closure? It is a way for an inner function to access variables of an outer function even after that outer function has finished.Honestly, it does not feel very intuitive yet.

Two ways to understand closures

-> Closures occur in nested function structures

-> Because JavaScript scope is function-based, calling the inner function of a nested function from the outside extends the variable’s lifetime globally

Context - this

Dictionary meaning of context: context, relation, circumstances, background, environment

What you need to know to get the property value of an object. (What points to that object.)

Let us look at it

Let us see how assigning a function to an object property differs from assigning one on the prototype.

Let us examine when closures are used.

Try more

Using prototypes, let us make Java-like replaceAll and trim methods (a regex issue?!).

1. String.prototype.replaceAll = function(str1, str2){
2. // Fill this part in.
3. }
4. String.prototype.trim = function(str){
5. // Fill this part in.
6. }

Examples

1. 
   /**
    * @author MYHOME
    */
   
   // In JavaScript, scope exists in functions, not inside blocks such as while, if, or for.
   
   // Set a global variable
   var drink = "milk";
   
   // if block
   if(3 > 1){
   // change drink to 'ichigo milk'
   // this is still within global scope.
       var drink = "ichigo milk";
   }
   
   // milk changes to ichigo milk
   //alert(drink == "ichigo milk");
   
   // inside the function it becomes 'ichigo latte'
   function mixCoffee(){
       var drink = "ichigo latte";
       //alert(drink);
   }
   
   // execute the function
   //mixCoffee();
   
   // here it becomes 'ichigo milk' again.
   //alert(drink);
   
   // -> a global variable becomes a property of the window object
   //alert("window's property : " + window.drink);
   
   // if you use a variable without declaring it with var, it becomes global -> probably not a good coding practice.
   // function that sets gv
   function globalTest(){
       gv = "be a Global Value!";
   }
   
   // set gv
   globalTest();
   
   // gv is now a global variable -> in testing, IE6 showed strange behavior
   //alert("gv " + window.gv);
   
   //--------------------------------------------------------------------------------------
   
   // closure practice
   // occurs in nested functions // the scope of an outer variable referenced by an inner function is extended.
   
   // robot~
   function Robot(){
   // manufacture date
       var createTime = new Date();
      
   // inner function -> closure occurs
       this.getAge = function(){
           var now = new Date();
           var age = now - createTime; //여기
           return age;
       }
   }
   
   var robo1 = new Robot();
   
   window.onload = function(){
       //alert(robo1.getAge());
   }
   // the createTime variable/object does not die until robo1 dies. (because of the closure)
   window.onclick =function(){
       //alert("created before " + robo1.getAge()/1000 + " second" );
   }
   
   // robot function 2 - using context
   
   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(); // error: createTime is not defined
   }
   
   // downside of closures
   // memory allocated to locally declared content may not be reclaimed - possible unintended memory leak!
   
   // robot3 function using prototype & context
   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. //--------------------------------------------------------------------------------------
   // prototype - use JavaScript functions like classes
   function GameSoft(title, price){
       this.title = title;
       this.price = price;
   }
   
   // define a method
   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);
   }
   
   // add a variable
   GameSoft.prototype.genre = "rpg";
   var pristontale = new GameSoft("pristontale", 10000);
   alert(pristontale.genre);
   pristontale.gameInfo();

Books & sites referenced

Ajax in action

Pro JavaScript Techniques

Closure reference: http://jibbering.com/faq/faq_notes/closures.html