객체
- JS의 객체는 property와 method로 이루어져 있다.
- python의 객체는 attribute와 method로 이루어져있다.
- CSS는 property로 이루어져 있다.
- HTML은 attribute와 attribute value를 가질 수 있다고 함.
🤷♂️ then, what is difference among property, attribute, field value, Member variable?
이름 : 값
쌍들이 모여 property를 이루며 property들이 모여 객체를 이루게 됨
하지만 메소드도 property 일종으로도 볼 수 있다.
단, property 값이 처리할 대상을 담은 함수이면 이는 결국 메소드가 된다.
※ 일반적으로, property와 method를 동의어로 사용하지만,
- 프로퍼티 (Property)는,
이름 : 값
쌍의 실체로써, 동적으로 조작 가능함을 주로 의미하며,
- 어트리뷰트 (Attribute)는, 프로퍼티들을 그룹지을 수 있는/연관시키는 정적인 속성을 의미한다.
- 웹문서의 DOM 모델 상에서 볼 때, 이 둘을 구분하며,
- 어트리뷰트는, HTML 요소에 소속된/고정된 일부로써 보고 HTML 요소 내에 붙박이로써 존재하고, 처음에 주어진 값이 변하지 않는다.
<a href=''>
=> href, <img src=''>
=> src 등
- 프로퍼티는, DOM 트리 내 객체의 속성을 나타내며,
이름 : 값
쌍으로 표현됨
. DOM 트리 내에 필요시 넣고 뺄 수 있고, 동적으로 변할 수 있음
JS객체의 property와 method
- property : key는 보통 문자열 또는 Symbol값으로 구성
- method는 일반 function과 구분하여 객체가 가지고있는 function을 method라 함
객체 생성 방법
- JS는 클래스기반 객체지향언어가 아니고 프로토타입 기반 객체지향언어이다.
클래스 기반 객체지향과 프로토타입 기반 객체지향의 차이
1. literal
- JSON, python dictionary, java hashmap 과 유사한 측면이 있음
- 객체 이름 선언 시
const
따라서 다른 객체로 재할당되지 않음
- property 값을 수정 가능하고 추후 필요시 method도 같이 추가가 된다.
- 또한 2차원으로 객체 안의 또 JSON형태의 객체를 생성하여 사용할 수 있다.
const user = {
age: 20,
get_thr: () => 1 + 3
};
console.log(user.get_thr());
this
- 객체 안에서 객체의 property를 참조해야할 경우 this 프로퍼티를 사용하면 된다.
그런데 또 arrow function안에 this값은 매핑되지 않아서 화살표 함수 안에서는 this를 사용할 수 없다....
getter, setter
- 객체안에 method를 따로 구현을 해줘야함...
get get_property(){
return this.property;
}
set set_property(1개 변수){
this.property = 1개 변수;
}
2. new Object()
const 객체명 = new Object();
객체명.property명 = value;
3. 생성자 함수로 생성
function 클래스명(변수1, 변수2){
this.property1 = 변수1;
this.property2 = 변수2;
}
const 객체명 = new 클래스명(변수1, 변수2);
prototype
- 생성자 함수에 property 또는 method 정의 가능
객체명.prototype.property명 = value(property, method 모두 가능);
4. (ES6!!) 클래스 기반 객체 생성
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const 정우 = new User("강정우", 28);
상속
- extends를 사용하여 상속가능
- 자식 클래스에서는 super()를 constructor메서드 안에서 호출해야함!
class Animal {
constructor(name) {
this.name = name;
}
}
class User extends Animal {
constructor(name, brand) {
super(name);
this.brand = brand;
}
}
overide
- java와는 다르게 상속받은 method여도 매개변수의 개수가 다르다면 다른 method로 인식하지만!
JS는 무조껀 이름만 보고 같다면 덮어 씌워버린다.
hasOwnProperty()
- 앞에 언급했듯
클래스명.prototype.property = value
로 클래스 외부에서도 property추가가 가능했는데 이는 클래스 property 생성을 외부냐 내부냐를 판단할 수 있는 메서드임.
- 결과값은 boolean type으로 나옴.
(ES7!!!) properties와 method initallize
class Animal{
name = "name",
method = () => {
};
};
- 마치 java, python처럼 field(property) 값 초기화가 가능하다.
- consturtor method가 없어짐으로써 상속받는 객체에서 super() method를 사용할 필요가 없어졌다.
Spread Operator (...) 말줄임표로 상속받기
const person = {
name : "ales"
};
const newPerson = {
...person
age : 28
};
Spread Operator (...) 말줄임표로 새로운 객체 만들기
const person = {
name : "Alex";
};
const newPerson = {
...person
};
person.name = "Mark";