자바스크립트에서 객체 선언 및 호출방법은 중괄호를 사용하거나 Object 생성자 함수를 사용한다.
객체의 모든 속성에는 모든 자료형이 올 수 있다.
객체 선언 및 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
background-color: skyblue;
height: 200px;
border: 1px solid;
}
</style>
<body>
<h2>객체 선언 및 호출</h2>
<div id="object-note"></div>
<script>
//리터럴 방식으로 객체 선언
let obj = {
title: '객체 선언',
type: '리터럴',
array: ['A', 'B', 'C'],
'cate-count': 2
}
let obj2 = new Object();
obj2.title ='객체 선언2';
obj2.type='new Object()';
obj2.array=['A','B','C'];
//객체 호출
document.querySelector('#object-note').addEventListener('click', () => {
document.querySelector('#object-note').innerHTML += `title : ${obj['title']}+<br>`
document.querySelector('#object-note').innerHTML += `type : ${obj['type']}+<br>`
document.querySelector('#object-note').innerHTML += `array[0] : ${obj.array[0]}+<br>`
document.querySelector('#object-note').innerHTML += `cate-count : ${obj["cate-count"]}+<hr>`
document.querySelector('#object-note').innerHTML += `title : ${obj2['title']}+<br>`
document.querySelector('#object-note').innerHTML += `type : ${obj2['type']}+<br>`
document.querySelector('#object-note').innerHTML += `array[0] : ${obj2.array[0]}+<br>`
document.querySelector('#object-note').innerHTML += `cate-count : ${obj2["cate-count"]}+<hr>`
});
</script>
객체의 메서드 속성
객체의 속성 중 함수 자료형인 속성을 메서드라고 부른다.
<h2>객체의 메서드 속성</h2>
<div id="method-note"></div>
<script>
let dog = {
name: '복실이',
eat: function (food) {
console.dir(this) // ->Object
//화살표 함수는 this, arguments를 바인딩하지 않는다.
//메서드를 만들 때는 화살표 함수를 사용하면 안된다.
document.querySelector('#method-note').innerHTML += `${this.name}가 ${food}를 먹고 있다.<br><hr>`
},
eat2 : (food)=>{
console.dir(this) // -> Window
document.querySelector('#method-note').innerHTML += `${this.name}가 ${food}를 먹고 있다.`
}
}
dog.eat('사료');
//결과값 : 복실이가 사료를 먹고 있다.
dog.eat2('사료');
//결과값 : 가 사료를 먹고 있다.
</script>
객체와 반복문
for - in문을 사용해 객체의 프로퍼티의 이름을 String 타입의 변수로 가져올 수 있다.
<h2>객체와 반복문</h2>
<div id="for-in-note"></div>
<script>
let game={
title:'football manager',
price:'55000',
language:'한글',
supportOS : 'window'
}
document.querySelector('#for-in-note').addEventListener('click',()=>{
for(key in game){
document.querySelector('#for-in-note').innerHTML+=`${key} : ${game[key]}<br>`
}
});
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| 자바스크립트 상속 (1) | 2021.01.01 |
|---|---|
| 자바스크립트 ProtoType (0) | 2020.12.30 |
| 자바스크립트의 객체2 (0) | 2020.12.30 |
