ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [javascript] 45. 객체 선언(Object defination) - 자바스크립트 강좌 JS / CSE
      Web/JavaScript 2015. 6. 13. 15:30

      JavaScript Objects




      1. JavaScript Objects

       자바스크립트에서, 거의 모든 것은 객체입니다.

        - 불리언, 숫자, 문자열, 날짜, 수학(Math), 정규 표현식, 배열, 함수, 객체


       자바스크립트에서, 모든 값(except primitive values)은 객체입니다.



      2. Objects are Variables Containing Variables

       변수는 단일 값을 포함 할 수 있습니다:


       

      1
      var person = "John Doe";
      		cs

       





       객체 또한 변수 입니다. 그러나 객체는 여러 값을 포함 할 수 있습니다.


       값은 이름 : 값 쌍으로 작성되어 집니다.



      1
      var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
      		cs








       

      3. Object Properties

       자바스크립트 객체에서 이름의 값(named value)를 속성(Properties)이라고 부릅니다.


       

      PropertyValue
      firstNameJohn
      lastNameDoe
      age50
      eyeColorblue

       




      4. Object Methods

       메소드는 객체가 수행되어질 액션(action)입니다.

       

       객체 속성은 원시 값, 다른 객체, 함수가 될 수 있습니다.


       객체 메소드(object method)는 함수 선언을 포함하는 객체 속성입니다.



       

      PropertyValue
      firstNameJohn
      lastNameDoe
      age50
      eyeColorblue
      fullNamefunction() {return this.firstName + " " + this.lastName;}








      5. Using an Object Literal

       객체를 만드는 가장 쉬운 방법입니다.


       

      1
      var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
      		cs

       




       공백과 라인 개행은 중요하지 않습니다. 객체 선언은 여러 라인을 사용 하여 작성 할 수 있습니다:



      1
      2
      3
      4
      5
      6
      var person = {
          firstName:"John",
          lastName:"Doe",
          age:50,
          eyeColor:"blue"
      };
      		cs






      6. Using the JavaScript Keyword new

       아래 예제 또한 새로운 객체를 위의 예제처럼 만들어 냅니다:

       

       
      1
      2
      3
      4
      5
      var person = new Object();
      person.firstName = "John";
      person.lastName = "Doe";
      person.age = 50;
      person.eyeColor = "blue";
      		cs

       





       그러나, 가독성과 실행 속도를 위해서, 위의 new 키워드를 통한 생성은 피합니다.









      7. Using an Object Constructor

       위의 단일 객체를 만들때는 간단하고 편리하지만, 여러 객체를 만들 때, 생성자를 이용하여 생성하는 것이 좋은 방법입니다:


       

      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

       




       



       





      8. Built-in JavaScript Constructors

       


      1
      2
      3
      4
      5
      6
      7
      8
      9
       
      var x1 = new Object();    // A new Object object
      var x2 = new String();    // A new String object
      var x3 = new Number();    // A new Number object
      var x4 = new Boolean()    // A new Boolean object
      var x5 = new Array();     // A new Array object
      var    x6 = new RegExp();    // A new RegExp object
      var x7 = new Function();  // A new Function object
      var x8 = new Date();      // A new Date object
      		cs







       그러나 위의 방식은 추천되지 않는 방식입니다. 아래처럼 작성하여 사용하십시오:


      1
      2
      3
      4
      5
      6
      7
      var x1 = {};            // new object
      var x2 = "";            // new primitive string
      var x3 = 0;             // new primitive number
      var x4 = false;         // new primitive boolean
      var x5 = [];            // new array    object
      var    x6 = /()/           // new regexp object
      var x7 = function(){};  // new function object
      		cs








      9. JavaScript Objects are Mutable

       객체는 변할 수 있습니다.

       

       y가 객체일 때, 아래 구문은 y의 복사본을 생성하지 않습니다.


       var x = y;  // This will not create a copy of y.


       

       객체 x는 y의 복사본이 아닙니다. x와 y의 가리키는 점이 같은 객체입니다.


       y에 대한 어떠한 변경은 x 또한 변경됩니다. 


       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html>
          <body>
       
          <p>JavaScript objects are mutable.</p>
          <p>Any changes to a copy of an object will also change the original.</p>
       
          <p id="demo"></p>
       
      <script>
      var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
       
      var x = person;
      x.age = 10;
       
      document.getElementById("demo").innerHTML =
      person.firstName + " is " + person.age + " years old.";
      </script>
       
          </body>
      </html>
       
      		cs





       


      저작자표시

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

      [javascript] 48. 객체 프로토타입(Object prototype) - 자바스크립트 강좌 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] 44. 서식 API(Forms API) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 43. 서식 검사(Forms validation) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 42. JSON - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바