티스토리 뷰


6.10 instanceof 키워드

1) 객체가  어떠한 생성자 함수를 통해 생성됬는지 확인할때 instanceof 키워드 사용.
2) typeof , instanceof
   typeof => 타입을 알아냄
   instanceof => 생성자함수를 알아냄

코드 6-29 instanceof 키워드

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 생성자 함수를 선언합니다.
  6.        function Student(name) { this.name = name; }
  7.               
  8.        // 생성자함수를 사용해 함수를 생성하여  변수에 담음.
  9.                // 자바스크립트는 대소문자 구분합니다.
  10.        var student = new Student('윤인성');    // Student 상속받은 student 함수 객체 생성방법    
  11.               
  12.        // instanceof는 타입을 비교하여 (true,false)를 출력합니다.
  13.        alert(student instanceof Student);              // true        
  14.                alert(student instanceof Number);               // false
  15.                alert(student instanceof String);               // false
  16.                alert(student instanceof Boolean);              // false
  17.    </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>


6.11 new 키워드
1) new키워드로 생성되지 않은 함수는 생성자 함수가 아니다. (대문자로 시작?)
2) new키워드 를 통해 함수를 호출하면 객체를 위한 공간을 만들고 this 키워드가 해당 공간을 의미하게 된다.

코드 6-30 생성자 함수에서의 속성
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 생성자 함수를 선언합니다.
  6.        function Constructor(value) {
  7.            this.value = value;
  8.        }
  9.        // 변수를 선언합니다.
  10.        var constructor = new Constructor('Hello');
  11.        // 출력합니다.
  12.        alert(constructor.value);               // 출력"Hello"
  13.        // alert(value);                                // 찾지못함
  14.    </script>
  15. </head>
  16. <body>
  17. </body>
  18. </html>



코드 6-31 함수 에서의 속성
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 생성자 함수를 선언합니다.
  6.        function Constructor(value) {
  7.            this.value = value;
  8.        }
  9.        // 변수를 선언합니다.
  10.        var constructor = Constructor('Hello');
  11.        // 출력합니다.
  12.        alert(value);                           // 출력"Hello"
  13.        //alert(constructor.value);             // 찾지못함
  14.    </script>
  15. </head>
  16. <body>
  17. </body>
  18. </html>


6.12 캡슐화
1) 잘못 사용될수 있는 객체의 즉정 부분을 사용자가 직접 사용할 수 없게 막는(숨기는) 기술    

코드 6-33 생성자 함수 rectangle 선언
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 생성자 함수를 선언합니다.
  6.        function Rectangle(width, height) {
  7.            this.width = width;
  8.            this.height = height;
  9.        }
  10.        Rectangle.prototype.getArea = function () {
  11.            return this.width * this.height;
  12.        };
  13.        // 변수를 선언합니다.
  14.        var rectangle = new Rectangle(5, 7);
  15.        rectangle.width = -2;
  16.        // 출력합니다.
  17.        alert('AREA: ' + rectangle.getArea());
  18.    </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>



코드 6-34 캡슐화를 사용한 Rectangle 생성자 함수
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 생성자 함수를 선언합니다.
  6.        function Rectangle(w, h) {
  7.            var width = w;
  8.            var height = h;
  9.            this.getWidth = function () { return width; };
  10.            this.getHeight = function () { return height; };
  11.            this.setWidth = function (value) {
  12.                if (value < 0) {
  13.                    throw '길이는 음수일 수 없습니다.';
  14.                } else {
  15.                    width = value;
  16.                }
  17.            };
  18.            this.setHeight = function (value) {
  19.                if (value < 0) {
  20.                    throw '길이는 음수일 수 없습니다.';
  21.                } else {
  22.                    height = value;
  23.                }
  24.            };
  25.        }
  26.        Rectangle.prototype.getArea = function () {
  27.            return this.getWidth() * this.getHeight();
  28.        };
  29.        // 변수를 선언합니다.
  30.        var rectangle = new Rectangle(5, 7);
  31.        rectangle.setWidth(-2);
  32.        // 출력합니다.  // 들어갈수 없는 변수는 에러
  33.        alert('AREA: ' + rectangle.getArea());          
  34.    </script>
  35. </head>
  36. <body>
  37. </body>
  38. </html>


2) get OO () 형대의 메서드는 값을 가져오는 메서드이며 게터(Getter)라부른다.
   set OO () 형대의 메서드는 값을 입력하는 메서드이며 세터( Setter)라부른다.

3) 함수내부는 호출될때 실행된다.
   함수내의 this , var 변수 테스트

코드 6-35 게터와 세터
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>6-35_function-this_var</title>
  6. </head>
  7.        <script type="text/javascript">
  8.                function Polygon(w, h) {
  9.            var width = w;
  10.            var height = h;
  11.                       
  12.                        this._width = w;
  13.                        this._height = h;
  14.            this.getWidth = function () { return width; };
  15.            this.getHeight = function () { return height; };
  16.            this.setWidth = function (value) {
  17.                if (value < 0) {
  18.                    throw '길이는 음수일 수 없습니다.';
  19.                } else {
  20.                    width = value;
  21.                }
  22.            };
  23.            this.setHeight = function (value) {
  24.                if (value < 0) {
  25.                    throw '길이는 음수일 수 없습니다.';
  26.                } else {
  27.                    height = value;
  28.                }
  29.            };
  30.        }
  31.        Polygon.prototype.getRectangleArea = function () {
  32.            return this.getWidth() * this.getHeight();
  33.        };
  34.               
  35.                Polygon.prototype.getTriangleArea = function() {                      
  36.                        return this._width * this._height / 2;
  37.                }
  38.               
  39.               
  40.        // 변수를 선언합니다.
  41.        var polygon = new Polygon(5, 7);
  42.       
  43.        // 출력합니다.
  44.        polygon.setWidth(-2);          
  45.        alert('rectangle AREA: ' + polygon.getRectangleArea());
  46.                               
  47.        polygon._width = -2;
  48.        alert('triangl  AREA: ' + polygon.getTriangleArea());
  49.               
  50.               
  51.        </script>
  52. <body>
  53. </body>
  54. </html>




6.13 상속
1) 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는것.
2) 객체의 속성메서드물려 받는것. (함수내 this, var)
3) constructor 프로퍼티 ( instanceof  비교시 constructor 를 비교함 , 생성자함수 자신을 가르킴)
    var d = new Date();
    alert( d.constructor == Date );  //true;

코드 6-38 상속의 활용
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>상속의활용</title>
  6.        <script type="text/javascript">
  7.                window.onload = function(){
  8.                        //alert("실행")
  9.                        // 생성자 함수를 선언
  10.                        function Rectangle(w,h){
  11.                                var width       = w;
  12.                                var height      = h;
  13.                               
  14.                                this.getWidth   = function() { return width; };
  15.                                this.getHeight  = function() { return height };
  16.                               
  17.                                this.setWidth = function(value){
  18.                                        if(value < 0)
  19.                                        {
  20.                                                throw 'Width는 음수일 수없습니다'
  21.                                        }else{
  22.                                                width = value;
  23.                                        }
  24.                                };
  25.                               
  26.                                this.setHeight = function(value){
  27.                                        if(value < 0)
  28.                                        {
  29.                                                throw 'Height는 음수일수없습니다';
  30.                                        }else{
  31.                                                height = value;                                
  32.                                        }
  33.                                };
  34.                               
  35.                        }
  36.                       
  37.                        // 사각형 넓이 구하기
  38.                        Rectangle.prototype.getArea = function(){
  39.                                return this.getWidth() * this.getHeight();     //
  40.                        }
  41.                                                                                               
  42.                        // 생성자 함수를 선언합니다.
  43.                        // 사각형을 상속받아 정사각형 만듬
  44.                        function Square(length){
  45.                                this.base = Rectangle;
  46.                                this.base(length , length);                            
  47.                        }
  48.                        Square.prototype = Rectangle.prototype;         // 프로토 타입으로 속성 상속 getArea
  49.                       
  50.                       
  51.                        // 변수를 선언합니다.
  52.                        var rectangle   = new Rectangle(5,7);
  53.                                rectangle.setHeight(11);                                // ? 5*11=55
  54.                               
  55.                        var square      = new Square(5);
  56.                                square.setWidth(50);                                    // ? 50*50=250
  57.                                //alert(square.constructor);
  58.                                //alert(square instanceof Rectangle)
  59.                        // 출력합니다.
  60.                        alert('AREA: ' + rectangle.getArea() + '  square: '+ square.getArea() );
  61.                };
  62.               
  63.        </script>
  64. </head>
  65. <body>
  66. </body>
  67. </html>


4) call(),apply() 메서드는 다른 객체의 메서드를 자신의 메서드처럼 사용할 수 있게 하는 메서드.
  fn.call(obj , 1,2,3)
  fn.apply(obj , [1,2,3])


6.14 ECMAScript 5 객체 속성 추가
1) defineProperty 참고 사이트:
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty


표 6-1 ECMAScript5의 객체 속성 추가 메서드
Object.defineProperty(obj, prop, descriptor)객체에 속성을 추가 합니다.
Object.defineProperties(obj, props)객체에 속성들을 추가 합니다.


표 6-2 ECMAScript 5 의 객체 속성 관련 옵션 (defineProperty)
value객체에 속성을 추가 합니다.  (get,set을 함께사용할수없음)
writeable객체에 속성을 추가 합니다.
get게터를 위미함 (valuer를 함께 사용할수 없음)
set 세터를 의미함(valuer를 함께 사용할수 없음)
configurable속성의 설정을 변경할 수 있는 지를 의미함
enumerablefor in 반복문으로 검사할 수 있는지를 의미함


2) 속성은 자동으로 false , undefined가 입력됨.
3) get , set 옵션을 사용할때 value 옵션을 함께 사용할수 없음.

코드 6-43 get옵션과 set옵션
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var object = {};
  7.        var value = 'RINTIANTTA';
  8.               
  9.        Object.defineProperty(object, 'name', {
  10.            get: function () {
  11.                alert('GETTER..!');
  12.                return value;
  13.            },
  14.            set: function (newValue) {
  15.                alert('SETTER: ' + newValue);
  16.                value = newValue;
  17.            }
  18.        });
  19.        // 출력합니다.
  20.        object.name = 'ALPHA';                          // set
  21.        alert(object.name);                             // get  ,이름값출력
  22.    </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>


6.15 ECMAScript 5 객체생성
1)  create() 메서드는 기존에 있던 객체를 복제하고 새로운 속성을 추가해 객체를 생성.

표 6-3 ECMAScript5의 객체 생성 메서드 (create)
Object.create(proto [, propertiesObject])객체를 생성함.
Object.keys(obj)객체의 속성(enumerable:true) 키를 찾음.
Object.getOwnPropertyNames(obj)객체의 속성 키를 찾음.


코드 6-46 Object.create()메서드
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var object = Object.create({}, {
  7.            name: { value: 'RintIanTta', enumerable: false },
  8.            gender: { value: 'Male', writeable:true ,enumerable: true }
  9.        });
  10.               
  11.        // 출력합니다.
  12.        alert(Object.keys(object));
  13.                //alert("obj이름 : "+object.gender ;                
  14.    </script>
  15. </head>
  16. <body>
  17. </body>
  18. </html>



2) 상속
  둘다 상속 받은 객체만 출력함. (p182)
  ◆ keys()  
  ◆ getOwnPropertyNames()  

코드 6-47 상속
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var object = Object.create({}, {
  7.            name: { value: 'RintIanTta', enumerable: false },
  8.            gender: { value: 'Male', enumerable: true }
  9.        });
  10.        var person = Object.create(object, {
  11.            region: { value: 'Seoul Korea', enumerable: false },
  12.            hobby: { value: 'Guitar', enumerable: true }
  13.        });
  14.        // 출력합니다.
  15.        alert(Object.getOwnPropertyNames(person) + '\n' + Object.keys(person));
  16.        //alert(person.name + ' : ' + person.gender);
  17.               
  18.    </script>
  19. </head>
  20. <body>
  21. </body>
  22. </html>



6.16 ECMAScript 5 동적 속성 추가 제한
1) 기존 자바스크립트의 모든 객체는 동적으로 속성 또는 메서드를 추가 삭제 할수 있으며
   ECMAScript 5부터는 이렇게 동적으로 속성을 추가하는 것을 제한하는 기능이 생겼다.

표 6-4  ECMAScript5 의 동적 속성 추가를 제한하는 메서드
Object.preventExtensions(obj)객체의 속성 추가를 제한함
Object.isExtensible(obj)객체에 속성 추가가 가능한지 확인함


코드 6-49 preventExtensions()메서드
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var object = {};
  7.        // 간단한 객체 속성 추가 방법
  8.        object.gender = 'Male';
  9.        // 복잡한 객체 속성 추가 방법
  10.        Object.defineProperty(object, 'name', {
  11.            value: 'RintIanTta',
  12.            writeable: false
  13.        });
  14.        alert(Object.isExtensible(object));             // 객체 속성 추가 가능한지 체크
  15.        Object.preventExtensions(object);               // 객체 속성 추가 제한
  16.        alert(Object.isExtensible(object));             // 객체 속성 추가 가능한지 체크
  17.        // 간단한 객체 속성 추가 방법
  18.        object.dream = '생명공학자';
  19.        // 복잡한 객체 속성 추가 방법
  20.        Object.defineProperty(object, 'showMeTheMoney', {
  21.            value: true
  22.        });
  23.    </script>
  24. </head>
  25. <body>
  26. </body>
  27. </html>



2) dream 속성은 오류는없지만 추가되지않음.
3) Object.defineProperty  추가하려하면 오류.


6.17 ECMAScript 5 동적 속성 삭제 제한
1) preventExtensions 동적으로 객체속성을 생성하는것을 제한하며
   
표 6-5~6  ECMAScript5 의 동적 속성 삭제를 제한하는 메서드
Object.seal(obj)객체의 속성 삭제를 제한함
Object.isSealed(obj)객체에 속성 삭제가 가능한지 확인함 (false:삭제 가능)
Object.freeze(obj)객체의 속성 삭제와 수정을 제한함
Object.isFrozen(obj)객체의 속성 삭제와 수정이 가응한지 확인함


코드 6-50 Object.seal() 메서드
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var person = {
  7.            name: 'RintIanTta',
  8.            gender: 'Male',
  9.            region: 'Seoul, Korea',
  10.            hobby: 'Guitar'
  11.        };
  12.               
  13.        alert("전 : " +  Object.isSealed(person));      // 삭제 할수 있는지 확인
  14.        Object.seal(person);                            // 삭제 제한
  15.        alert("후 : " +  Object.isSealed(person));      // 삭제 할수 있는지 확인
  16.        delete person.name;                             // 이름 객체속성 지워지지 않음
  17.        // 출력합니다.
  18.        alert(person.name);
  19.               
  20.    </script>
  21. </head>
  22. <body>
  23. </body>
  24. </html>



6.18 ECMAScript 5 객체 보조 메서드

표 6-7 ECMAScript 5의 객체 보조 메서드
Object.keys(obj)반복적으로 순환 가능한 ㄱ개체 자신 소유의 속성을 배열로 만듬
Object.getOwnPropertyNames(obj)모든 객체 자신 소유의 속성을 배열로 만듬
Object.getOwnPropertyDescriptor(obj)특정 속성의 옵션 객체를 추출함


1) keys , getOwnPropertyNames 차이점
  ◆ keys()  enumerable : true 객채속성을 배열로 담음
  ◆ getOwnPropertyNames() 추가된 모든 객채속성을  배열에 담음

코드 6-51 keys()메서드와 getOwnPropertyNames()메서드
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var object = { name: 'RintIanTta' , id:12345  };
  7.        // 속성을 추가합니다.
  8.        Object.defineProperty(object, 'gender', {
  9.            value: 'Male'
  10.        });
  11.        // 출력합니다.            
  12.        alert(Object.keys(object));            
  13.        alert(Object.getOwnPropertyNames(object));
  14.    </script>
  15. </head>
  16. <body>
  17. </body>
  18. </html>



2) getOwnPropertyDescriptor() 특정 속성의 옵션 객체를 추출하는 메서드

코드 6-52 Object.getOwnPropertyDescriptor() 메서드
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <script>
  5.        // 변수를 선언합니다.
  6.        var object = { name: 'RintIanTta' };                        // 생성되는 속성이 true
  7.        Object.defineProperty(object, 'gender', { value: 'Male' }); // 생성되는속성이 false
  8.        // 설정 배열을 추출합니다.
  9.        var descriptors = [];
  10.               
  11.                // 이름 관련 메소드 추출
  12.        descriptors.push(Object.getOwnPropertyDescriptor(object, 'name'));
  13.               
  14.                // 성 관련 메소드 추출
  15.        descriptors.push(Object.getOwnPropertyDescriptor(object, 'gender'));
  16.               
  17.        // 출력합니다.
  18.        var output = '';
  19.        for (var i in descriptors) {
  20.            var item = descriptors[i];
  21.            for (var key in item) {
  22.                output += key + ' : ' + item[key] + '\n';
  23.            }
  24.            output += '--------------------\n';
  25.        }
  26.        alert(output);        
  27.    </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>


댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday