JavaScript 객체 지향 언어(프로토타입, 상속, 생성자, 클래스)
객체 = 속성 + 기능 -> 객체 안에는 변수와 함수(메서드)로 구성되어 있음.
(Java의 클래스와 같다고 생각 -> 이역할을 JavaScript에서는 Function이 함)
- 속성 : 변수, 프로퍼티
- 기능 : 함수(메서드)
객체는 속성과 기능을 value로 담아놓고 key값으로 호출함 -> key : 속성과 기능의 이름, value : 속성과 기능
JavaScript는 클래스가 존재하지 않는 프로토타입 기반의 객체 지향 언어임.
- 프로토타입 기반 : 기존의 객체를 복사해서 새로운 객체를 생성
→ ES6에서 클래스가 생김
● 생성자 : new 키워드를 사용해 객체를 생성해 주는 함수
- this 키워드를 사용해 속성을 생성하고 지정.
- 일반 함수와 다르게 return 없음
- 장점 : 속성은 모든 객체가 다르지만 메서드는 같게 생성할 수 있음.
function Car(name) {
this.name = name; // Constructor의 속성인 value에 input 할당
}
let car = new Car('BMW'); // 생성자를 이용한 객체생성
document.write(car.name);
● 프로토타입(prototype) : 상속되는 정보를 담은 객체
- 함수를 만들면 그 함수 안에 prototype이라는 객체가 자동으로 만들어짐
- 모든 객체는 그들의 프로토타입으로부터 데이터(속성과 메서드)를 상속받음
- prototype에 메서드를 넣으면 상속받은 객체에서도 사용할 수 있음.
function Rectangle(width, height) { // 생성자
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function () { // prototype에 메서드를 넣음
return this.width * this.height;
}
let rectangle = new Rectangle(5, 7);
document.write(rectangle.getArea());
● 상속 : 프로토타입 사용
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function () {
return this.width * this.height;
}
function Square(length) {
this.width = length;
this.height = length;
}
Square.prototype = new Rectangle(); // 상속
let square = new Square();
● 클래스 : 함수의 일종 (ES6에 새로 생김)
class Person {
constructor(name) { // Person constructor
this.name = name;
}
}
class Unikys extends Person {
constructor(name) { // Unikys constructor
super(name);
}
}
- constructor() : Class의 생성자