13. 자바스크립트 객체
: 프로퍼티와 메서드로 이루어짐
프로퍼티(변수의 일종) : 프로퍼티(키)와 프로퍼티값(value)로 구성
프로퍼티키는 일반적으로 문자로 구성하고 값은 원하는 값
메서드 : 객체 안에 있는 함수를 가르킴
| HTML 태그 | 속성(attribute)과 속성값을 가진다 |
| CSS | 프로퍼티와 프로퍼티값 |
| JavaScript | 프로퍼티와 프로퍼티값, 그리고 메서드로 이루어짐 |
1) 사용자 객체
JS 객체 생성 방법
#1. 객체 리터럴 방식 : 객체 구분 기호 : {}
변수 = {
프로퍼티명 : 값,
프로퍼티명 : 값,.....
};
객체 자체의 주소값이 바뀌어야만 let으로 변수에 담고
객체 자체의 주소값은 안바뀌고 안에만 바꾼다면 const 변수에 주로 담음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script> //13 객체 리터럴 방식
const user= {name :"pika",age : 10}; // , 을 통해 객체구나 생각!
console.log(user);
console.log(user.age);
console.log(user.name);
console.log(user.test); // 없는 프로퍼티 읽으려하면 undefined 리턴함.
// 빈 객체 만들기
const obj = {};
// 자바로 치자면 class test {}
// obj = new test {}
// 프로퍼티 추가, 삭제 (자바에서 hashmap이랑 비슷함)
obj.addr = "서울시 서초구";
console.log(obj);
delete obj.addr;
console.log(obj);
// in 연산자로 프로퍼티 있는지 확인
console.log("name" in user); //true 출력
console.log("test" in user); // false 출력
console.log("toString" in user); // true 출력
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 13. 리터럴 객체 (익명함수)
let person = {
name : "pika",
age : 10,
getData : function(){
console.log("hello method");
},
test : {a: 10, b : "haha", c : [1,2,3,4], d : function(abc){}}
};
console.log(person);
console.log(person.age); //변수 출력
person.getData(); // 메서드 호출
console.log(person.test.a);
// 3 출력
console.log(person.test.c[2]);
console.log(person.test.d(10));
// 프로퍼티 (변수) 추가 : 없는 이름의 프로퍼티명에 값대입
person.height = 170;
// 메서드 추가 : 없는 이름의 프로퍼티명에 익명함수 대입
person.getSum = function(a,b){
return a + b;
};
console.log(person);
console.log(person.height);
console.log(person.getSum(10,20));
</script>
</body>
</html>
#2. new Object()로 생성하는 방식
const 변수 = new Object();
변수.age = 10;
변수.name = "hello";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script> // 13- 2 new object로 객체생성
const person = new Object();
person.name = "pikapika";
person.age = 100;
person.getNum = function(){
console.log("getNum 메서드호출");
return "haha";
};
console.log(person);
let result = person.getNum();
console.log(result);
</script>
</body>
</html>
#3. 생성자 함수로 생성하는 방식
# 생성자 정의
fuction 생성자명(){ // 생성자명은 첫글자 대문자
....
}
# 객체 생성해서 사용
const 변수 = new 생성자명();
변수.~~~~~
#4. ES6와 클래스
class 클래스명 { // 클래스명 첫글자 대문자
constructor(){// 생성자
....
}
}
const 변수 = new 클래스명();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script> // 13 -3
/* function Person(name, age){ //대문자
console.log("Person 객체생성");
this.name = name;
this.age = age;
}
const pika = new Person("pika", 10);
console.log(pika);
*/
// 13 -4
class Person{
constructor(name){
console.log("hello");
this.name = name;
}
}
class Student extends Person{
constructor(name, age){
super(name);
this.age = age;
}
}
//const p = new Person("pika");
// console.log(p);
const stu = new Student("kobugi", 100);
console.log(stu);
</script>
</body>
</html>
'P-Language > [Javascript]' 카테고리의 다른 글
| [Javascript] 15 (1) - 브라우저 객체 모델 (BOM, Browser Object Model) (window, screen, location object) (0) | 2022.06.09 |
|---|---|
| [Javascript] 14 - 내장 객체 (Built-in Object) (0) | 2022.06.09 |
| [Javascript] 12. 자바스크립트 변수 선언 방식 (0) | 2022.06.08 |
| [Javascript] 11. 함수 리터럴(function literal)과 익명 함수(anonymous function) (0) | 2022.06.08 |
| [Javascript] 10 - 함수 function (0) | 2022.06.08 |