객체는 한꺼번에 여러 값을 담을 수 있는 통(container)과 같은 자료구조(data structure)이다.
객체 안에는 이름 - 값 쌍(name-value pair)이 저장되는데 이를 객체의 속성(property)라고 한다.
person 변수에 할당된 객체는 총 4개의 속성을 가지고있다.
'한국 나이'에 들어간 공백 같은 식별자에 허용되지 않은 문자가 들어간 속성 이름을 정의 할 때는 반드시 문자열 표기를 사용 해야 한다.
-점 표기법-
아래와 같은 속성 접근자(property accessor)를 이용해 이미 생성된 객체의 속성을 지정 해 줄 수도 있다.
객체 리터럴을 이용해 빈 객체를 생성 해 준뒤 점 표기법을 통해 속성을 지정 할 수 있다.
JavaScript에서 식별자로 허용되지 않는 문자가 들어간 속성 명칭을 사용 해야 하는 경우에는 대괄호 표기법을 사용 해야 한다.
-객체 다루기-
속성 접근자, delete 연산자, in연산자
- 메소드(Method) -
객체의 속성 값으로 함수를 지정 할 수도 있다.
위와 같이 어떤 객체의 속성으로 접근해서 사용하는 함수를 메소드(method)라고 부른다.
아래와 같이, 객체 리터럴 안에서 특별한 표기법을 사용해 메소드를 정의할 수도 있다.
- this -
this 키워드 사용시 메소드 호출 시에 해당 메소드를 갖고있는 객체에 접근 할 수 있다.
메소드를 사용시 데이터와, 그 데이터와 관련된 동작을 객체라는 하나의 단위로 묶어서 다룰 수 있다.
-프로토타입 (Prototype)-
특정 객체에 프로토타입 지정시 프로토타입의 속성을 해당 객체에서 재사용 할 수 있다.
프로토타입을 지정 하는 방법에는 여러 가지가 있는데, 가장 쉬운 방법은 Object.create 함수를 이용 하는 것이다.
이렇게 프로토타입 기능을 이용해 한 객체에서 다른 객체의 기능을 가져와 사용 하는것을 프로토타입 상속(prototype inheritance) 라고 한다.
-프로토타입 읽고 쓰기-
어떤 객체의 해당하는 프로토타입을 읽어오기위해 Object.getPrototypeOf 함수를 사용할 수 있다.
또한 Object.setPrototypeOf 함수를 통해 이미 생성된 객체의 프로토타입을 변경할 수 있다.
객체가 생성된 이후에 프로토타입을 변경하는 작업은 굉장히 느리므로 Object.setPrototypeOf 함수의 사용은 피하는 것이 좋다.
-속성 가리기(Property Shadowing)-
parent에 같은 이름의 속성값이 있음에도 불구하고 child.prop 속성에 접근 하게 되면 프로토타입 체인에서 가장 먼저 만나는 값이 불러와진다.
프로토타입 체인의 상위에 있는 속성이 하위속성에 의해 가려지는 현상을 속성 가리기(property shadowing) 이라고 한다.
- 생성자(Constructor) -
객체를 생성하기 위해 객체 리터럴 또는 Object.create 함수를 사용 하게되었다.
new 키워드를 이용시 객체 생성이 가능하다.
-생성자 정의 방법
function 구문을 통해 Person 생성자를 정의 한 후, this 키워드를 사용 하여 새로 생성되는 객체의 속성을 지정되었다.
new 키워드를 사용 하여 객체를 생성 하는 순간 생성자 안에 있는 코드가 실행되어 객체의 속성이 지정된다.
- 인스턴스(Instance) -
생성자를 통해 생성된 객체를 그 생성자의 인스턴스(instance) 라고 한다.
instanceof 연산 자를 사용하여 객체가 특정 생성자의 객체가 특정 생성자의 인스턴스가 맞는지 확인 할 수 있다.
- 생성자와 프로토타입 -
생성자를 통해 만들어낸 객체의 프로토타입에는 생성자의 prototype 속성에 저장되어 있는 객체가 자동으로 지정된다.
function 구문을 통해 함수를 정의 할 때 함수의 prototype 속성에 객체가 자동으로 생성되어 저장된다.
- constructor -
생성자의 prototype 속성에 자동 생성되는 객체에는 constructor 라는 특별한 속성이 들어있다.
이 속성에는 생성자 자신이 저장된다.
- 정적 메소드(Static Method) -
생성자의 속성에 직접 지정된 메소드를 가지고 정적 메소드(Static Method) 라고 한다.
다음과 같이 정적 메소드를 정의 할수있다.
'Vue' 카테고리의 다른 글
Vue.js - Computed 속성 (0) | 2021.12.06 |
---|---|
Vue.js 폼 입력 바인딩 (0) | 2021.12.06 |
Vue.js 이벤트(Event) (0) | 2021.12.06 |
input 태그 데이터 바인딩 (0) | 2021.12.05 |
Vue.js - for in(반복문) (0) | 2021.11.27 |