JavaScript_6
Class
ECMA6부터 적용된 문법
생성자
- 객체를 생성한다.
- 값을 초기화한다.
1. 클래스 정의
class Person{
}
var kim = new Person();
console.log(kim);
// 출력
// kim : Person {}
// 객체가 생성되었음을 알 수 있다.
클래스 안에서 메서드를 만드려면 ?
class Person{
function sum(){
}
}
// XXXXXXXX
---> 틀림
class 안에서 function
키워드를 쓰지 않음
class Person(){
sum(){
}
}
2. Constructor
객체가 만들어지기 바로 직전에 실행되는 함수 constructor
class Person(){
constructor(){
console.log('constructor');
}
}
var kim = new Person();
console.log('kim : ', kim);
// 출력
// constructor
// kim : Person{}
인자를 넣으면?
class Person(){
constructor(name, first, second){
this.name = name;
this.first = first;
this.second = second;
}
}
var kim = new Person('kim', 10,20);
console.log('kim : ', kim);
// 출력
// kim : Person { name: 'kim', first: 10, second: 20 }
3. Method
-
전통적인 방식의 메서드 구현 (
prototype
)class Person(){ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } } Person.prototype.sum() = function(){ return 'this' + (this.first + this.second); }; let kim = new Person("kim", 10, 20); console.log("kim", kim.sum()); // 출력 // kim prototype : 30
잘 나온다. 클래스는 완전히 새로운 개념이 아니라 조금 보완된것이기 때문
-
Class 안에 메서드 정의
class Person { constructor(name, first, second) { this.name = name; this.first = first; this.second = second; } sum() { return "method in Class : " + (this.first + this.second); } } let kim = new Person("kim", 10, 20); var lee = new Person("lee", 20, 23); console.log("kim", kim.sum()); console.log("lee", lee.sum()); // 출력 // kim method in Class : 30 // lee method in Class : 43
kim만 다르게 동작하는 메서드를 구현하려면 ?
kim.sum = function () { return "only kim : " + this.first * this.second; }; console.log("kim", kim.sum()); // 출력 // kim only kim : 200
상속
1. extends
모두가 사용하는 라이브러리나 최소한으로 클래스를 유지하면서 기능을 추가하기 위해 상속을 사용한다.
상속을 사용하지 않고 추가하는 방법 --> 클래스를 하나 더 만든다.
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return "prototype : " + (this.first + this.second);
}
}
class PersonPlus {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return "prototype : " + (this.first + this.second);
}
avg() {
return (this.first + this.second) / 2;
}
}
avg메서드 이전까지 모두 중복되는 코드로 비효율적임..
생산성을 높이기 위해 상속하는 의미의 extends
를 사용한다.
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return "prototype : " + (this.first + this.second);
}
}
class PersonPlus extends Person{
avg() {
return (this.first + this.second) / 2;
}
}
var kim = new Person('kim', 10,20);
var lee = new PersonPlus('lee', 30,20);
console.log('kim : ', kim.sum());
console.log('lee : ' , lee.avg());
// 출력
// kim sum() : prototype : 30
// lee sum() : 10
2. super
생성자에 인자를 하나 더 추가하고 싶을 때
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return this.first + this.second;
}
}
class PersonPlus extends Person {
avg() {
return (this.first + this.second) / 2;
}
}
-- > 부모 클래스를 건드려야 하는데... 고민임,
그럼 자식클래스에 인자를 추가한 생성자를 만들어보자
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return this.first + this.second;
}
}
class PersonPlus extends Person {
constructor(name, first, second, third) {
// this.name = name;
// this.first = first;
// this.second = second;
// this.third= third;
}
sum() {
return this.first + this.second + this.third;
}
avg() {
return (this.first + this.second + this.third) / 3;
}
}
이러면 상속의 의미가 전혀 없어진다...
이럴때 super
키워드를 활용하자
super
적용
// ECMA6부터 적용된 문법
// 상속 도입시 겪게 되는 자잘한 문제들
// 1. 생성자에 인자를 하나 더 추가하고 싶을 때
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return this.first + this.second;
}
}
class PersonPlus extends Person {
constructor(name, first, second, third) {
// 중복부분 제거하고 super()
// this.name = name; -- 제거대상
// this.first = first; -- 제거대상
// this.second = second; -- 제거대상
super(name, first, second);
//super() //괄호가 있으면 부모생성자
// 없으면 class자체를 의미
this.third = third;
}
sum() {
return super.sum() + this.third;
}
avg() {
return (super.sum() + this.third) / 3;
}
}
var kim = new PersonPlus("kim", 10, 20, 30);
console.log("kim.sum() : ", kim.sum());
console.log("kim.avg() : ", kim.avg());
// 출력
// kim.sum() : 60
// kim.avg() : 20
super()
: 괄호가 있으면 부모생성자, 없으면 class자체를 의미
Author And Source
이 문제에 관하여(JavaScript_6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aksel26/TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)