1. 수업소개
객체 : 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것.
3.2- 객체와 반복문
var memberArray = ["egoing", "graph", "lee"];
console.group("array loop");
var i = 0;
while (i < memberArray.length) {
console.log(memberArray[i]);
i++;
}
console.groupEnd();
var memberObject = {
manager: "egoing",
developer: "graph",
designer: "lee",
};
console.group("object loop");
for (var name in memberObject) {
console.log(name, memberObject[name]); // name은 변수이므로 []안에 넣어야함
}
console.groupEnd();4.1 객체는 언제쓰나요?
console.log("Math.PI", Math.PI);
console.log("Math.random()", Math.random());
console.log("Math.floor(3.9)", Math.floor(3.9));
var MyMath = {
PI: Math.PI,
random: function () {
return Math.random();
},
floor: function (val) {
return Math.floor(val);
},
};
console.log("Mymath.PI", MyMath.PI);
console.log("Mymath.random()", MyMath.random());
console.log("Mymath.floor(3.9)", MyMath.floor(3.9));
// 객체를 안쓰면 각각 선언해줘야 하고 이름도 길어짐.
/* var MyMath_PI = Math.PI;
function MyMath_random() {
return Math.random();
}
function MyMath_floor(val) {
return Math.floor();
}
*/5. this
- this : 객체 내의 method에서 해당 객체의 property를 호출할 때 쓴다. 객체의 이름이 바뀌어도 원래의 로직을 유지할 수 있어서 코드의 재사용에 도움을 준다.
var kim = {
name: "kim",
first: 10,
second: 20,
sum: function () {
/* return f + s; */
return this.first + this.second;
},
};
/* console.log("kim.first, kim.second", kim.sum(kim.first, kim.second)); */
console.log("kim.sum()", kim.sum());6.1.constructor의 필요성
- constructor(생성자) : 같은 형식의 객체를 찍어내는 공장
6.2.constructor의 사례
var d1 = new Date("2022-1-30");
console.log(d1.getFullYear());
console.log(d1.getMonth());- Date는 일종의 공장, 날짜를 적으면 그 객체를 리턴해줌.
6.3. constructor 만들기
- Person은 원래 그냥 함수
- 앞에 new를 붙여서 사용하면 객체를 return함.
- 객체가 return될 때 기본적으로 Person과 동일한 property를 갖게 됨.
function Person(name, first, second, third) {
this.name = name;
this.first = first;
this.second = second;
this.third = third;
this.sum = function () {
return this.first + this.second + this.third;
};
}
var kim = new Person("kim", 10, 20, 30);
var lee = new Person("lee", 10, 10, 10);
console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());
7.2. prototype을 이용해서 재사용성을 높이기
-
프로토타입의 의미란?
- 객체들이 공통으로 사용하는 속성값이다.
-
프로토타입이 없을 떄의 비효율적인 점은 무엇인가?
- 객체를 생성할 떄마다 같은 동작을 하는 중복적인 메소드가 메모리에 계속 생긴다. => 성능 저하, 메모리 낭비 생김.
-
프로토타입을 사용하면 좋은 점은 무엇인가?
- 객체들이 공통으로 사용하는 속성값을 정의해서 객체가 생성할때 마다 같은 속성 값을 만드는 과정을 생략해, 성능 향상과 메모리를 효율적으로 이용할 수 있게 해준다.
8.2. Classes의 생성 ~ 10. 메소드 구현
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return "prototype: " + (this.first + this.second);
}
}
var kim = new Person("kim", 10, 20);
kim.sum = function () {
return "this : " + (this.first + this.second);
};
console.log(kim.sum());
var lee = new Person("lee", 10, 10, 10);
console.log(lee.sum());11. 상속 (Inheritance)
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return (this.first + this.second);
}
}
class PersonPlus extends Person {
avg() {
return (this.first + this.second) / 2;
}
}- class 자식 extends 부모 { }
- extends를 이용해 새로운 기능이 추가된 class를 만들수 있다.
- 코드의 중복을 줄일 수 있을 뿐만 아니라 부모 클래스의 수정이 필요한 경우 부모의 코드만 변경하면 되므로 유지보수가 용이하다.
12. super
- super는 두가지 용법이 있는데 각각 아래의 내용을 가져온다.
- super( ) : 부모 클래스의 생성자
- super. : 부모 클래스의 메서드
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return this.first + this.second;
}
}
class PersonPlus extends Person {
constructor(name, first, second, third) {
super(name, first, second);
this.third = third;
}
sum() {
return super.sum() + this.third;
}
avg() {
return (this.first + this.second + this.third) / 3;
}
}
var kim = new PersonPlus("kim", 10, 20, 56);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
Hi