퇴근5분전

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 function inherit(proto) {
            function F() { }
            F.prototype = proto;
            return new F;
        }
        //상속 관련!
        function extend(Child, Parent) {
            Child.prototype = inherit(Parent.prototype);
            Child.prototype.constructor = Child;
            Child.parent = Parent.prototype;
        }

        // todo : override
        var Pet = function (name) { 
            this.Cry = function () { return "Cry:"; }
        }
          
        var Dog = function (name) {
            //Pet.call(this, name);
            Pet.apply(this, [name]);
            //override
            var _Cry = this.Cry;
            this.Cry = function () {
               var cry = _Cry();
               return cry + "멍"; 
            };
        }

        var Cat = function (name) {
            //Pet.call(this, name);
            Pet.apply(this, [name]);
            //override
            var _Cry = this.Cry;
            this.Cry = function () {
                var cry = _Cry();
                return cry + "냐옹";
            };
        }
          
        extend(Dog, Pet);
        extend(Cat, Pet);

        var dog = new Dog("강아지");
        alert(dog.Cry());

        var cat = new Cat("고양이");
        alert(cat.Cry());

 

 

override 구현.

 

var Dog = function (name) {
            //Pet.call(this, name);
            Pet.apply(this, [name]);
            //override
            var _Cry = this.Cry;
            this.Cry = function () {
               var cry = _Cry();   // 상위 function call.
               return cry + "멍";
            };
        }

 

 

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
  /*  http://javascript.info/tutorial/pseudo-classical-pattern
    There is a well-known, but wrong way of inhereting, when instead of Rabbit.prototype = inherit(Animal.prototype) people use: 
// inherit from Animal  
Rabbit.prototype = new Animal()  
As a result, we get a new Animal object in prototype. Inheritance works here, because new Animal naturally inherits Animal.prototype. 
… But who said that new Animal() can be called like without the name? The constructor may strictly require arguments and die without them. 
Actually, the problem is more conceptual than that. We don’t want to create an Animal. We just want to inherit from it. 
That’s why Rabbit.prototype = inherit(Animal.prototype) is preferred. The neat inheritance without side-effects.  
    */
     
    function inherit(proto) {
        function F() { }
        F.prototype = proto;
        return new F;
    }
    //상속 관련!
    function extend(Child, Parent) {
        Child.prototype = inherit(Parent.prototype);
        Child.prototype.constructor = Child;
        Child.parent = Parent.prototype;
    }
    // todo : 네임스페이스

    var JS = {};
    JS.Pet = function (name) { this.getName = function () { return name; } };
    var pet = new JS.Pet("애완");

    JS.ExpendClass = {}; // 하나더..
    JS.ExpendClass.Dog = function (name) { JS.Pet.apply(this, [name]); };
    
    extend(JS.ExpendClass.Dog, JS.Pet);

    var dog = new JS.ExpendClass.Dog("강아쥐!!!");
    
    alert(pet.getName());
    alert(dog.getName());

    //네임스페이스가 길어지면 힘들어짐... 그래서 별칭도 가능함.
    var JSExc = JS.ExpendClass;

    JSExc.Cat = function (name) { JS.Pet.apply(this, [name]); }
   
    extend(JSExc.Cat, JS.Pet);

    var cat = new JSExc.Cat("냐옹이!!");
    alert(cat.getName());

     

 

네임스페이스 관련된 내용을 적어본다. 

 

var JS = {}; // object 선언

var JS.ExpendClass = {}; // object 선언

// static 을 이용해서 네임스페이스처럼 쓰는 것임.

'# 6) JavaScript' 카테고리의 다른 글

javascript] OOP정리. override  (0) 2014.05.23
javascript] OOP정리. 상속  (0) 2014.05.23
javascript] OOP정리. static 멤버  (0) 2014.05.23
javascript] OOP정리. prototype  (0) 2014.05.23
javascript] OOP정리. class처럼 만들기.  (0) 2014.05.23

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
  /* http://javascript.info/tutorial/pseudo-classical-pattern
     There is a well-known, but wrong way of inhereting, when instead of Rabbit.prototype = inherit(Animal.prototype) people use: 
  // inherit from Animal  
  Rabbit.prototype = new Animal()  
  As a result, we get a new Animal object in prototype. Inheritance works here, because new Animal naturally inherits Animal.prototype. 
  … But who said that new Animal() can be called like without the name? The constructor may strictly require arguments and die without them. 
  Actually, the problem is more conceptual than that. We don’t want to create an Animal. We just want to inherit from it. 
  That’s why Rabbit.prototype = inherit(Animal.prototype) is preferred. The neat inheritance without side-effects.  
     */

          function inherit(proto) {
              function F() { }
              F.prototype = proto;
              return new F;
          }
          //상속 관련!
          function extend(Child, Parent) { 
              Child.prototype = inherit(Parent.prototype);
              Child.prototype.constructor = Child;
              Child.parent = Parent.prototype;
          } 

          // todo : 상속!
          var Pet = function (name) {
              // 여기서 name은 private
              var privateMember = 1; // private
              function getAge() { // private
              }  

              this._ProtectedMemeber = "펫"; // protected 
              this.getName = function () { return name; }
              this.setName = function (nm) { name = nm; }

              this.get = function ()
              {
                  // this._ProtectedMemeber // protected 멤버
                  return getAge(); // private 멤버, 
              }
          }

          Pet.prototype._Cry = function ()
          {
              //var age = this.getAge(); // private로 호출할수 없다.
              return "Pet._Cry" + this._ProtectedMemeber;
          }

          Pet.prototype.Cry = function ()
          {
              return this._Cry();// protected인지 Dog.Prototype에서 보자.. 
          }


          var Dog = function (name) { 
              Pet.call(this, name); 
              //Pet.apply(this, [name]);
             this._ProtectedMemeber = "멍"; 
          }
        //  Dog.prototype = inherit(Pet.prototype);// 상속!
          //  Dog.constructor = Dog;
          extend(Dog, Pet);
          Dog.prototype.WW = function ()
          { 
              var mm = this._ProtectedMemeber; 
              return this._Cry(); // 오!!!! 
          }

          var pet = new Pet("애완");
          pet.Cry(); // pet._Cry(); and pet._ProtectedMemeber 는 나타나지 않음! 
       
          var dog = new Dog("강아쥐");

          alert(dog.getName()+ " : " + dog.WW());

          // (dog is Dog)? yes
          alert(dog instanceof Dog);
          // (dog is Pet)? yes
          alert(dog instanceof Pet);
          // (dog is Object)? yes
          alert(dog instanceof Object);

 

상속을 만들었다.

inherit 과 extend function을 이용한다.

 

위 예는 Pet 을 상속구현한 Dog.

그리고 protected member 상속 여부 확인. ( _Cry() 와 _ProtectedMemeber )

 

var Dog = function (name) {
              Pet.call(this, name);
              //Pet.apply(this, [name]);
             this._ProtectedMemeber = "멍";
          }

이부분에서 Pet.call( this, name) 단일변수형태 - .call

                Pet.apply(this, [name]); 배열일때  - .apply


 

 

 

 

 

 

1
2
3
4
5
6
        // todo : 정적멤버 추가.
         var Dog = function () {
         } 
         Dog.Age = 10; // static 멤버 
         alert(Dog.Age);
         

 

정적멤버 추가...

 

Dog 타입에 Age라는 정적인 멤버를 추가하였고, 사용시 Dog.Age라고 직접 호출이 가능하다.

 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
// todo : 프로토 타입 
        var Dog = function()
        {
            
        }
         
        Dog.prototype = {
            name: "도그",
            getAlias: function () { return "꽃개";}
        };
         
        var dog = new Dog();
        alert(dog.name);
        alert(dog.getAlias());

        function Pet( name )
        {
            this._getName = function () { return name; }
        }

        Pet.prototype.getName = function ()
        {
            return this._getName();
        }

        var pet = new Pet("애완");
        alert( pet.getName() );

 

 

prototype 은 object 확장 으로 생각하면 된다.

Dog 에 public으로 name과 getAlias() 멤버를 덧붙여주었다.

 

Pet의 this._getName은 protected member로써 외부에서 접근이 불가능하다.

이는 타언어처럼 객체 내부 또는 상속받은 객체에서 접근이 가능하다.

 생성된 pet._getName은 직접 호출이 불가능하다.

그래서 Pet.prototype.getName 의 public member에서 호출하고 있다.

 

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
      // todo : 생성자 함수는 있지만 클래스는 없습니다.
        function Pet()
        { } 
        var pet = new Pet();

        // todo : 생성자..
        function Pet1(name, alias)
        {
            var Name = name;     // 이렇게하면 private , 이런 경우 이 멤버가 포함되어 정의된 함수를 이용하여야 값을 얻어갈수 있음. 
            // 이를 자바스크립트에서는 권한있는 함수라고 부른다. 
            // 프로토타입을 사용할 때도 역시 권한 있는 함수를 통해서만 접근이 가능하다.

            this.Alias = alias;  // 이렇게 this로 멤버를 만들면 public! 
            this.toString = function () // new ! 
            {
                return Name;
            }
        }
        var pet1 = new Pet1("강아지", "개");

        alert(pet1.Alias);
        alert(pet1.toString());

 

 

Pet이란 클래스 선언!

 

# function을 이용해서 만들수 있다.

 

Pet1 을 보면

 

파라미터 name, alias는 private member처럼 씌여진다.

var Name 역시 private member 이다.

 

this.Alias 와 this.toString은 public member다.

 

protected member는  this._{멤버명} 으로 정의된다.

 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
31
32
33
34
35
36
 // todo : 방법1) Function 사용..
        function func( arg1 )
        {
            alert(arg1);
        }
        // todo : 방법2) functon 사용
        
        var fn = function (arg1)
        {
            alert(arg1);
        }

        // todo : 방법3) function 사용
        var cFn = new Function("arg1", "alert(arg1);");

        func("방법1");
        fn("방법2");
        cFn("방법3"); 
        // descript : 위 세가지 역시 동일하다. 

        //todo : 익명함수 사용

        function each( arr, eachFn)
        { 
            console.log("eachFn typeof = " + typeof eachFn);
            console.log("eachFn typeof is " +( typeof eachFn === 'function'));

            if( arr )
            for (var loop = 0; loop < arr.length; loop++) {
                if (eachFn && (typeof eachFn === 'function'))
                {
                    eachFn(arr[loop]);
                }
            }
        } 
        each([1, 2, 3], fn);

 

익명함수는 매번 썼지만 ( typeof eachFn === 'function' ) 이렇게 해주는게 좋을것 같아서 해봤음.

 

 기존에 자바스크립트 관련 공부했을때 알았던 내용들이지만...

 

이번 프로젝트에서 ExtJs를 이용하게 되어 교육을 받던 중 다시 정리를 해봄.

 

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
        // todo : 방법1) 자바스크립트 오브젝트 생성 
        var obj1 = new Object();
        obj1.TestProperty = "방법1) 테스트 프로퍼티";
        alert(obj1.TestProperty);

        // todo : 방법2) 
        var obj2 = {};
        obj2["TestProperty"] = "방법2) 테스트 프로퍼티";
        alert(obj2.TestProperty);

        // todo : 방법3)
        var obj3 = { TestProperty: "방법3) 테스트 프로퍼티" };
        alert(obj3.TestProperty);

        // descript : 위 세가지 방법은 object 생성이 동일함. 

 

페이지 로딩을 표시하기 위해...

 

 

 

 

로딩중 이란 이미지... 처럼 블라인드 처리해준다.

 

샘플 : 

Jquery_block.zip

 

간단한 설명이 있으므로 따라 해보면 됨.

 

http://mytory.co.kr/archives/783 

 

 

'# 6) JavaScript > JQuery' 카테고리의 다른 글

Jquery ] 페이지 로딩중 ... 샘플  (0) 2012.09.28
JQEURY 플러그인] 로딩바. 블럭킹  (0) 2012.09.25
Jquery ~ 블로그 소개  (0) 2012.05.17