반응형
1. 객체
- 추상적인 개념이 실체화 된 것
- 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합
2. 객체 선언
- 리터널을 이용한 객체 생성
- 장점 : 객체를 빠르고 간단하게 만들 수 있음
- 단점 : 비슷한 형태의 객체가 또 필요하다면 오히려 불편함(틀이 따로 없기 때문에)
const 객체명 = {
프로퍼티1명:프로퍼티1값,
프로퍼티1명:프로퍼티1값,
...,
메소드명: function() {
},
...
}
- 객체 안에 있는 메소드 안에서 프로퍼티를 쓰기 위해서는 명시적으로 this를 써줘야 한다. 왜냐하면 프로퍼티는 변수가 아니기 때문에 this를 안 쓰면 프로퍼티와 이름이 같은 위에 선언된 변수를 쓰게 된다. 그렇기에 this를 명시적으로 적어줘야 한다.
- 생성자를 이용한 객체 생성
- 자바 스크립트에는 클래스가 따로 없고 글자로만의 클래스는 존재함
- 클래스를 써서 만들면 자동으로 생성자를 만드는 코드로 변환되어서 실행됨
- 그래서 사실 클래스라는 개념은 존재하지 않고 생성자만 있음
자바 class : 붕어빵 틀
JS 생성자 : 붕어빵 제조법
- 생성자를 위부터 차례때로 읽으면서 실행
- 그래서 객체를 만들고 프로퍼티를 만들게 된다. 안에 아무것도 없다면 프로퍼티 없이 객체만 만들어지는 것
function 생성자명(매개변수1, 매개변수2, ..) {
this.변수명 = 값1;
this.변수명 = 값2;
...
this.메소드명 = function() {};
}
- 람다식 : ()=>을 씀으로서 익명함수 선언할 때 간단하게 하는 방법
() 안에는 매개변수를 넣으면 된다.
3. 상속(inheritance)과 프로토타입
- 자바 스크립트는 객체간의 상속이 일어남
- 자바 스크립트의 모든 객체는 프로토타입이라는 객체를 상속받고 있으며, 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속 받음
- 우리가 생성자를 만들고 실행시키면 생성자에 맞는 객체가 자동으로 만들어짐 --> 이게 프로토타입
- 우리가 이제 생성자를 이용해 진짜 객체를 만들게 되면 처음에 만들어진 프로토타입을 상속해서 사용됨
const mycar = new Car();
Car.prototype --> 생성자를 만들 때 생기는 것
↓
mycar
- 프로토타입 기반 언어는 클래스라는 개념이 없고, 객체에서 객체를 바로 상속 받을 수 있음
- 따라서 자바 스크립트는 현재 존재하고 있는 객체를 프로토타입으로 사용하며 해당 객체를 복제 후 사용
객체명.prototype.프로퍼티 = "값";
- 새롭게 프로퍼티를 추가하면 상속받는 프로토타입 밑에 그 객체만의 새로운 필드가 만들어져 사용됨
생성자명.prototype.프로퍼티 = "값";
- 프로토타입에 프로퍼티가 추가되기 때문에 이 프로토타입을 상속받는 객체들에게 다 추가가 됨
- 프로토타입에 추가하는 것은 호이스팅이 되기 때문에 먼저 실행이 됨
반응형
'웹개발 > JavaScript' 카테고리의 다른 글
[JavaScript] form 태그 접근, location 객체, history 객체 (0) | 2022.05.18 |
---|---|
[JavaScript] window 객체 (0) | 2022.05.15 |
[JavaScript] 자바스크립트를 이용한 태그 객체 및 onclick (0) | 2022.05.13 |
[JavaScript] 함수(function) (0) | 2022.05.13 |
[JavaScript] 배열(Array), 빠른 for문 (0) | 2022.05.13 |