프로그래밍/자바스크립트

Javascript - 객체

가카리 2015. 1. 23. 20:43
반응형

1.   객체의 정의



2.   생성자 객체를 정의하는 방법







생성자에 대해




3.   new 연산자, 생성자 함수, 그리고 this



05-01.html


<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="utf-8" />

    <title>05-01</title>

  </head>

  <body>

    <script type="text/javascript">

          // 생성자 함수: 객체를 정의하는 방법

      

      // 함수는 Rectangle 생성자 함수로 설계되었습니다.

      function Rectangle(x, y, w, h) {

        // this 키워드는 생성자 함수에 의해 생성되는 객체를 나타냅니다.

        // 따라서 다음의 구문은 pointX, pointY, width, height 프로퍼티를 생성자 함수에 의해

        // 생성되는 객체에 추가하고  매개변수 x, y, w, h 전달된 값을 pointX, pointY, width, height

        // 프로퍼티에 대입하는 문장이 됩니다.

        this.pointX = x;

        this.pointY = y;  

        this.width = w;

        this.height = h;

        this.toString = function() {//this 써서 접근한다.

          return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY

                 + ', width : ' + this.width + ', height : ' + this.height + ' }';

        };

        

        // 생성자 함수는 return 문을 만들지 않습니다.

      }

      

      // new 연산자는  아무런 프로퍼티도 정의되어 있지 않은 비어있는 객체를 생성합니다.

      // 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고

      // 방금 생성돤 새로운 객체에 대한 참조를 생성자 함수 내의 this 키워드를 통해 전달합니다.

      // 생성자 함수는 this 키워드와 전달된 인자 값들을 사용하여 새로운 객체를 초기화합니다.

      var rect1 = new Rectangle(100, 120, 20, 30);

      var rect2 = new Rectangle(250, 300, 30, 50);

      

      document.writeln(rect1 + '<br/>');

      document.writeln(rect2 + '<br/>');

      document.writeln('<br/>');

    </script>

  </body>

</html>



출력화면



4.   객체의 멤버




이렇기때문에 객체의 프로토타입에 메소드를 생성하게된다.


멤버 접근 방법


다음은 생성자 함수를 통해서 접근되는 메소드를 만드는 방법에 관한 예제입니다.


05-02.html


<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="utf-8" />

    <title>05-02</title>

  </head>

  <body>

    <script type="text/javascript">

      // 생성자 함수의 프로퍼티와 메소드

      

      function Area() { }

      

      // Area 생성자 함수에 삼각형의 넓이를 계산하는 메소드를 추가합니다.

      // Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.

      Area.triangle = function(base, height) {

        return base * height / 2;

      };

      

      // Area 생성자 함수에 사각형의 넓이를 계산하는 메소드를 추가합니다.

      // Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.

      Area.rectangle = function(width, height) {

        return width * height;

      };

      

      // Area 생성자 함수에 원의 넓이를 계산하는 메소드를 추가합니다.

      // Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.

      Area.circle = function(radius) {

        return Math.PI * Math.pow(radius, 2);

      };

      

      document.writeln('Area.triangle(10, 6): ' + Area.triangle(10, 6) + '<br/>');

      document.writeln('Area.rectangle(10, 6): ' + Area.rectangle(3, 20) + '<br/>');

      document.writeln('Area.circle(5): ' + Area.circle(5).toFixed(2) + '<br/>');

      document.writeln('<br/>');

    </script>

  </body>

</html>



출력화면







5.   프로토타입 객체





05-03.html


<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="utf-8" />

    <title>05-03</title>

  </head>

  <body>

    <script type="text/javascript">

      // 프로토타입 객체와 prototype 프로퍼티

      

      function Rectangle(x, y, w, h) {

        this.pointX = x;

        this.pointY = y;  

        this.width = w;

        this.height = h;

      }

      

      // 모든 함수가 가지고 있는 prototype 프로퍼티는 프로토타입 객체에 대한 연결을 가집니다.

      // Rectangle 생성자 함수의 prototype 프로퍼티가 참조하는 객체에 toString 이란

      // 이름의 프로퍼티를 추가하는데 값으로 함수 리터럴을 대입하여 메소드를 추가합니다.

      // 메소드는  Rectangle 생성자 함수를 통해 생성되는 객체에 상속될 것입니다.

      Rectangle.prototype.toString = function() {

        return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY

               + ', width : ' + this.width + ', height : ' + this.height + ' }';

      };

      

      // 위의 toString() 메소드와 마찬가지로 Rectangle 생성자 함수의 prototype 프로퍼티가

      // 참조하는 객체에 area() 메소드를 추가하여, Rectangle 생성자 함수를 통해 생성되는

      // 객체에 상속될 것입니다.

      Rectangle.prototype.area = function() {

        return this.width * this.height;

      };

      

      var rect1 = new Rectangle(100, 120, 20, 30);

      var rect2 = new Rectangle(250, 300, 30, 50);

      

      document.writeln('rect1: ' + rect1 + '<br/>');

      document.writeln('rect1.area(): ' + rect1.area() + '<br/>');

      

      document.writeln('rect2: ' + rect2 + '<br/>');

      document.writeln('rect2.area(): ' + rect2.area() + '<br/>');

      

      document.writeln('<br/>');

    </script>

  </body>

</html>


출력화면



6.   constructor 속성



05-04.html


<!DOCTYPE html>

<html lang="ko">

  <head>

    <meta charset="utf-8" />

    <title>05-04</title>

  </head>

  <body>

    <script type="text/javascript">

      // consturctor 프로퍼티

      

      function Rectangle(x, y, w, h) {

        this.pointX = x;

        this.pointY = y;  

        this.width = w;

        this.height = h;

      }

      

      Rectangle.prototype.toString = function() {

        return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY

               + ', width : ' + this.width + ', height : ' + this.height + ' }';

      };

      

      Rectangle.prototype.area = function() {

        return this.width * this.height;

      };

      

      var rect1 = new Rectangle(100, 120, 20, 30);

      

      if (rect1.constructor == Rectangle)

        document.writeln('rect1 객체의 생성자 함수는 Rectangle입니다.<br/>');

      

      if (rect1.constructor.prototype == Rectangle.prototype)

        document.writeln('rect1 객체의 생성자 함수의 프로토타입 객체는 Rectangle 생성자함수의 프로토타입 객체와 동일합니다.<br/>');

      

      var rect2 = new rect1.constructor(250, 300, 30, 50);

      document.writeln('rect2: ' + rect2 + '<br/>');

      document.writeln('<br/>');

    </script>

  </body>

</html>




출력화면




7.   네임스페이스


FQN#은 FULL NAME임


반응형