객체

• 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";