-
[javascript] 11. 객체(Objects) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 14:29JavaScript Objects
1. Real Life Objects, Properties, and Methods
현실세계에서, 차는 객체(Object)입니다.차는 중량, 색깔과 같은 속성을 가지고 있고, 시동걸기, 출발, 브레이크 등의 메소드(Method)를 가지고 있습니다.
Object Properties Methods
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) 쌍으로 작성됩니다.
123var car = {type:"Fiat", model:500, color:"white"};cs 3. Objects Properties
이름:값 쌍은 속성(Properties)이라 부릅니다.
12var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};cs Property Property Value firstName John lastName Doe age 50 eyeColor blue [ 출처: W3Schools ]
4. Object Methods
메소드(Method)는 객체가 수행할 행위입니다.
메소드는 함수 선언의 형태로 속성(Properties)에 저장됩니다.
Property Property Value firstName John lastName Doe age 50 eyeColor blue fullName function() {return this.firstName + " " + this.lastName;} [ 출처: W3Schools ]
5. Accessing Object Properties
객체 속성에 대한 접근 방식은 다음과 같습니다.
1objectName.propertyNamecs 12objectName[propertyName]cs 객체 속성 접근 예제.
123456789101112131415161718192021222324252627282930<!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
객체 메소드 접근 방법은 아래와 같습니다.
12objectName.methodName()cs 12345678910111213141516171819202122232425<!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"를 통해 선언 할 수 있는데, 변수는 객체로 생성이 됩니다.
1234var x = new String(); // Declares x as a String objectvar y = new Number(); // Declares y as a Number objectvar z = new Boolean(); // Declares z as a Boolean objectcs 문자열, 숫자, 불리언(Boolean) 객체 생성을 피하세요. 코드를 복잡하게 하고 실행 속도를 느리게 합니다.
'Web > JavaScript' 카테고리의 다른 글
[javascript] 14. 문자열(Strings) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 13. 이벤트(Events) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 12. 범위(Scope) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 10. 함수(Functions) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 9. 데이터 타입(Data Types) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 8. 연산자(Operators) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
