ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [javascript] 11. 객체(Objects) - 자바스크립트 강좌 JS / CSE
    Web/JavaScript 2015. 6. 13. 14:29
    JavaScript Objects




    1. Real Life Objects, Properties, and Methods

     현실세계에서, 차는 객체(Object)입니다.


     차는 중량, 색깔과 같은 속성을 가지고 있고, 시동걸기, 출발, 브레이크 등의 메소드(Method)를 가지고 있습니다.


     



     

    ObjectPropertiesMethods
     



    car.name = Fiat

    car.model = 500

    car.weight = 850kg

    car.color = white

    car.start()

    car.drive()

    car.brake()

    car.stop()


    [ 출처: W3Schools ]



     모든 차는 같은 속성을 가지고 있지만, 속성 값은 각각 다릅니다.

     

     또한, 같은 메소드(Method)를 갖지만, 수행하는 방식은 각기 다릅니다.






    2. JavaScript Objects

     객체의 값(Value)는 이름: 값(name: value) 쌍으로 작성됩니다.


     

    1
    2
    3
     
    var car = {type:"Fiat", model:500, color:"white"};
     
    cs



     



    3. Objects Properties

     이름:값 쌍은 속성(Properties)이라 부릅니다.



     

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



     

    PropertyProperty Value
    firstNameJohn
    lastNameDoe
    age50
    eyeColorblue

    [ 출처: W3Schools ]





    4. Object Methods

     메소드(Method)는 객체가 수행할 행위입니다.


     메소드는 함수 선언의 형태로 속성(Properties)에 저장됩니다.


     

     

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

    [ 출처: W3Schools ]






    5. Accessing Object Properties

     객체 속성에 대한 접근 방식은 다음과 같습니다.


     

    1
    objectName.propertyName
    cs

     


     

    1
    2
    objectName[propertyName]
     
    cs




     객체 속성 접근 예제.




     

    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
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>
        There are two different ways to access an object property: 
        </p>
        <p>You can use person.property or person["property"].</p>
     
        <p id="demo"></p>
        <p id="demo2"></p>
    <script>
    var person = {
    firstName: "John",
    lastName : "Doe",
    id       :  5566
    };
    document.getElementById("demo").innerHTML =
    person.firstName + " " + person.lastName;
     
    document.getElementById("demo2").innerHTML =
    person["firstName"] + " " + person["lastName"];
     
    </script>
        </body>
    </html>
     
     
     
    cs

     






     











    6. Accessing Object Methods

     객체 메소드 접근 방법은 아래와 같습니다.


     

    1
    2
     
    objectName.methodName()
    cs




     

    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
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>Creating and using an object method.</p>
     
        <p>An object method is a function definition, stored as a property value.</p>
     
        <p id="demo"></p>
     
    <script>
    var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function(c) {
       return this.firstName + " " + this.lastName;
    }
    };
     
    document.getElementById("demo").innerHTML = person.fullName();
    </script>
        </body>
    </html>
     
    cs




     






    7. Do Not Declare Strings, Numbers, and Booleans as Objects!

     자바스크립트 변수는 키워드 "new"를 통해 선언 할 수 있는데, 변수는 객체로 생성이 됩니다.


     

    1
    2
    3
    4
     
    var x = new String();        // Declares x as a String object
    var y = new Number();        // Declares y as a Number object
    var z = new Boolean();       //    Declares z as a Boolean object
    cs



     문자열, 숫자, 불리언(Boolean) 객체 생성을 피하세요. 코드를 복잡하게 하고 실행 속도를 느리게 합니다.





    댓글

Designed by Tistory.