ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [javascript] 48. 객체 프로토타입(Object prototype) - 자바스크립트 강좌 JS / CSE
      Web/JavaScript 2015. 6. 13. 15:32
      JavaScript Object Prototypes

       모든 자바스크립트 객체는 프로토타입을 갖습니다. 프로토타입 또한 객체 입니다.


       모든 자바스크립트 객체는 그들만의 프로토타입으로 부터 속성과 메소드를 물려 받습니다.



      1. Creating a Prototype

       프로토타입 객체를 생성하는 일반적인 방법은 객체 생성자 함수를 사용하는 것입니다:


       생성자 함수와  함께, new 키워드를 통해서 같은 프로토타입 객체를 생성할 수 있습니다:


       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <!DOCTYPE html>
      <html>
          <body>
       
          <p id="demo"></p>
       
      <script>
      function person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eye;
      }
       
      var myFather = new person("John", "Doe", 50, "blue");
      var myMother = new person("Sally", "Rally", 48, "green");
       
      document.getElementById("demo").innerHTML =
      "My father is " + myFather.age + ". My mother is " + myMother.age; 
      </script>
       
          </body>
      </html>
       
      		cs




       

       






      2. Adding a Property to an Object

       객체에 새로운 속성를 주는 방법은 다음과 같습니다:


       

      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
       
      <!DOCTYPE html>
      <html>
          <body>
       
          <p id="demo"></p>
       
      <script>
      function person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eye;
      }
       
      var myFather = new person("John", "Doe", 50, "blue");
      var myMother = new person("Sally", "Rally", 48, "green");
       
      myFather.nationality = "English";
       
      document.getElementById("demo").innerHTML =
      "My father is " + myFather.nationality; 
      </script>
       
          </body>
      </html>
       
      		cs









      3. Adding a Method to an Object

       객체에 새로운 메소드를 추가하는 방법은 아래와 같습니다:


       

      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
       
      <!DOCTYPE html>
      <html>
          <body>
       
          <p id="demo"></p>
       
      <script>
      function person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eye;
      }
       
      var myFather = new person("John", "Doe", 50, "blue");
      var myMother = new person("Sally", "Rally", 48, "green");
       
      myFather.name = function() {
      return this.firstName + " " + this.lastName;
      };
       
      document.getElementById("demo").innerHTML =
      "My father is " + myFather.name(); 
      </script>
       
          </body>
      </html>
       
      		cs







        











      4. Adding Properties to a Prototype

       프로토 타입은 존재하는 객체가 아니기 때문에, 새로운 속성을 프로토타입에 추가 할 수 없습니다.


       생성자에 새로운 속성을 추가하려고 한다면, 생성자 함수를 통하여 추가해야 합니다:


       

      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
       
      <!DOCTYPE html>
      <html>
          <body>
       
          <p id="demo"></p>
       
      <script>
      function person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eye;
      this.nationality = "English";
      }
       
      var myFather = new person("John", "Doe", 50, "blue");
      var myMother = new person("Sally", "Rally", 48, "green");
       
      document.getElementById("demo").innerHTML =
      "My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
      </script>
       
          </body>
      </html>
       
      		cs



       






      5. Adding Methods to a Prototype

       생성자 함수에 또한 메소드를 선언 할 수 있습니다:


       

      1
      2
      3
      4
      5
      6
      7
      8
       
      function person(first, last, age, eyecolor) {
          this.firstName = first;
          this.lastName = last;
          this.age = age;
          this.eyeColor = eyecolor;
          this.name = function() {return this.firstName + " " + this.lastName;};
      }
      		cs




      6. Using the prototype Property

       자바스크립트 프로토타입 속성은 존재하는 프로토타입에 새로운 속성을 추가하는 것을 허용합니다:


       

      1
      2
      3
      4
      5
      6
      7
      function person(first, last, age, eyecolor) {
          this.firstName = first;
          this.lastName = last;
          this.age = age;
          this.eyeColor = eyecolor;
      }
      person.prototype.nationality = "English";
      		cs


       자바스크립트 프로토타입 속성은 존재하는 프로토타입에 새로운 메소드을 추가하는 것을 허용합니다:


       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      function person(first, last, age, eyecolor) {
          this.firstName = first;
          this.lastName = last;
          this.age = age;
          this.eyeColor = eyecolor;
      }
      person.prototype.name = function() {
          return this.firstName + " " + this.lastName;
      };
      		cs




      저작자표시

      'Web > JavaScript' 카테고리의 다른 글

      [javascript] 51. 함수 호출(function invocation) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 50. 함수 매개변수(function parameters) - 자바스크립트 강좌  (0) 2015.06.13
      [javascript] 49. 함수 선언(function definitions) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 47. 객체 메소드(Object methods) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 46. 객체 속성(Object properties) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 45. 객체 선언(Object defination) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바