방랑로그

[javascript] Object 본문

IT개발/HTML & JAVASCRIPT

[javascript] Object

야키다 2017. 12. 15. 16:16

[javascript] Object 



자바스크립트의 유연함을 이해해야한다 -_-; 으어~

참고: 영감탱구님의 블로그 http://blog.naver.com/woogi321/40035770908






1. 자바스크립트는 자바가 아니다




- 데이터형을 명확하게 지정하지 않는다




- 프로그램을 동적으로 인터프리터해서 실행한다




- 자바스크립트 함수는 1차 객체이다 : 자바 객체의 메소드는 해당 객체 자체에 연결돼있고, 해당 객체를 통해야만 메소드를 호출할 수 있다. 자바스크립트의 함수 역시 객체에 연결할 수 있기 때문에 자바의 메소드와 비슷하게 활용할 수 있지만, 실행중에 다른 컨텍스트에서도 해당 함수를 호출할 수 있고 다른 객체로 이동시켜 연결할 수도 있다.




- 자바스크립트의 객체는 Prototype을 기반으로 하고 있다 : 자바스크립트의 객체는 그저 객체로 위장한 연결 배열일 뿐이다. Prototype을 활용하면 자바스크립트에서도 자바와 비슷한 형태로 프로그램을 작성할 수 있지만, 그저 모양만 비슷할 뿐이다.




2. 자바스크립트의 객체




자바스크립트에서 객체의 인스턴스를 생성하는 가장 간단한 방법은 Object 클래스에 내장된 생성 메소드를 호출하는 방법이다.


   


    var myObject = new Object();




위와 같이 생성한 myObject는 기본적으로는 속성이나 함수 어느 것도 들어 있지 않은 비어있는 상태이다.




2.1. 객체 생성




   myObject.shoeSize = "12";




정상적인 객체지향 언어라면 shoeSize라는 속성을 갖고 있는 객체 클래스를 미리 정의해 둬야 하며, 정의돼있지 않은 속성을 사용하려 하면 컴파일조차 되지 않는데, 자바스크립트는 그렇지 않다.


속성과 비슷하게 새로운 함수도 객체에 언제든지 추가할 수 있다.




myObject.speakYourShowSize=function(){


   alert("shoe size : " + this.shoeSize);


}




아니면 이미 구현돼있는 함수를 가져다 쓸 수도 있다.




function sayHello(){


   alert('hello, my shoeSize is ' + this.shoeSize);


}




myObject.sayHello=sayHello;




이미 정의돼있는 함수를 가져다 사용할 때 주의할 부분이 있는데, 바로 괄호를 생략한다는 점이다. 만약 괄호를 생략하지 않고 다음과 같이 작성한다면 이미 정의돼있던 sayHello 함수를 myObject 의 sayHello 함수로 가져다 쓰는 게 아니라, sayHello() 함수를 호출해 실행한 결과값을 myObject 의 sayHello 속성의 값으로 지정하게 된다.




myObject.sayHello = sayHello();




* JSON 객체 생성 방법




자바 스크립트에는 Array라는 배열 클래스가 내장돼있으며, new 키워드를 사용해 아래와 같이 배열을 생성할 수 있다.




myLibrary.books = new Array();




myLibrary.books[4] = somePredefinitionBook;




myLibrary.books["BestSeller"] = somePredefinitionBook;




각 항목을 숫자 번호로 지정하는 배열은 대괄호 안에 각 번호에 해당하는 값을 쉼표로 구분해 순서대로 넣어주면 한번에 배열 값을 모두 설정할 수 있다.


myLibrary.books = [predefinition1, predefinition2, predefinition3];




그리고 자바스크립트 객체는 중괄호를 사용하고, 각각의 속성과 그 값을 키:값의 형태로 나열해 만들 수 있다.




myLibrary.books={


   "best Seller"   :  predefiniedBook1,


   cookbook    :  predefinedBook2,


   spaceFiller  :  predefinedBook3


};




JSON으로 객체를 생성할 때에는, 여러개의 JSON 생성 부분을 계층 구조로 연결해 복잡한 구조의 객체를 한번에 만들어 낼 수 있다.




var myLibrary={


   Location : "my house",


   keywords : ["root vegetables", "turnip", "tedium"],


   books: [


      {


           title : "Turnip Cultivatioin through the Ages",


           authors : [


              { name : "Jim Brown", age : 9 },


              { name : "Dick Turnip", age: 312}


           ],


           publicationDate : "long age"


       },


       {


           title : "Turnip Cultivation through the Ages, vol.2",


           authors : [


              { name: "Jim Brown", age : 35 }


           ],


           publicationDate : new Date(1605, 11, 05)


       }


    ]


};




<또다른 예>




var cookbook = new Object();


cookbook.pageCount=321;


cookbook.author={


   firstName: "Harry",


   secondName: "Chrismas",


   birthdate: new Date(1900, 2, 29),


   interests: ["cheese", "whistilng", "history of lighthouse keeping"]


};

'IT개발 > HTML & JAVASCRIPT' 카테고리의 다른 글

[html] HTML5 GUIDE  (0) 2017.12.15
[javascript] DOM관련  (0) 2017.12.15
[javascript] key code  (0) 2017.12.15
[html] 웹표준 DTD HTML 4.01  (0) 2017.12.15
Comments