JavaScript(5)

Minji Lee·2023년 10월 12일

js 클래스

javascript

목록 보기

5/11

Ch05 클래스

Prototype

: 하나의 배열 데이터에서 사용할 수 있는 메서드

Array클래스를 통해 만들어진 인스턴스(배열 데이터)에서 사용할 수 있는 메서드

→ prototype에서 메서드는 반드시 일반 함수로 작성해야 함!(화살표 함수 안됨)

Array.prototype.heropy = function () {
  console.log(this);
};

fruits.heropy(); // (3) ["apple", "banana", "orange", heropy: ƒ] -> heropy 함수가 추가됨

배열 생성 방법

배열 리터럴

const fruits = ["apple", "banana", "orange"];

생성자 함수 이용

인스턴스(instance): 생성자 함수를 통해 만들어진 객체

const fruits = new Array("apple", "banana", "orange");

length, includes 등 → 프로토타입 속성, 메서드(배열 데이터에서 사용)

const fruits = new Array("apple", "banana", "orange"); // 생성자 함수

console.log(fruits); // (3) ["apple", "banana", "orange"]
console.log(fruits.length); // 3
console.log(fruits.includes("apple")); // true -> 배열안에 해당 원소가 있는지 확인
console.log(fruits.includes("cherry")); // false

다른 객체에 있는 메서드 이용하기

call 메서드 이용

→ 타객체.메서드.call(본인객체)

const heropy = {
  firstName: "Heropy",
  lastName: "Park",
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
const neo = {
  firstName: "Neo",
  lastName: "Anderson",
};

console.log(heropy.getFullName()); // Heropy Park
console.log(heropy.getFullName.call(neo)); // Neo Anderson

prototype으로 메서드 등록하기 → ES6(2015)에서는 class로 메서드 등록 가능

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};
const heropy = new User("Heropy", "Park"); // 생성자 함수를 통해 객체 생성
const neo = new User("Neo", "Anderson");

console.log(heropy);
console.log(neo);
console.log(heropy.getFullName()); // Heropy Park
console.log(noe.getFullName()); // Neo Anderson

ES6 Class 기본 문법

JS가 가지고 있는 프로토타입 방식을 내장한 새로운 문법

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const heropy = new User("Heropy", "Park");
const neo = new User("Neo", "Smith");

console.log(heropy.getFullName());
console.log(neo.getFullName());

constructor → 생성자(함수 부분의 역할)
new로 생성된 것은 객체, 함수, 클래스라고 불린다.

Getter, Setter

`Getter`: 값을 얻는 용도의 메서드

`Setter`: 값을 설정하는 용도의 메서드

매개변수를 이용하여 데이터 추출하는 방법

생성자에 입력

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
    this.fullName = `${first} ${last}`; 
  }
}

const heropy = new User("Heropy", "Park"); // 생성자 함수

console.log(heropy); 
// User {firstName: "Heropy", lastName: "Park", fullName: "Heropy Park"}

heropy.firstName = "Neo";

console.log(heropy);
// User {firstName: "Neo", lastName: "Park", fullName: "Heropy Park"}

→ 생성자가 처음 호출된 시점의 값을 기준으로 계산
그 이후 firstName과 lastName이 변경되어도 반영안되는 문제발생

메서드 생성

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const heropy = new User("Heropy", "Park"); // 생성자 함수

console.log(heropy.getFullName()); // Heropy Park

heropy.firstName = "Neo";

console.log(heropy.getFullName()); // Neo Park

→ 메서드를 호출해야하는 문제점 발생

getter, setter 이용

get은 함수데이터(즉, 메서드)에 붙여서 사용하는 키워드
set은 어떠한 값을 할당하는 용도로 사용하는 키워드

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
	// getter
  get fullName() {
    console.log("Getting full name");
    return `${this.firstName} ${this.lastName}`;
  }
  // setter
  set fullName(value) {
    console.log(value);
    [this.firstName, this.lastName] = value.split(" ");
  }
}
const heropy = new User("Heropy", "Park"); // 생성자 함수

console.log(heropy.fullName); // getter 호출

heropy.firstName = "Neo";

console.log(heropy.fullName); // getter 호출

heropy.fullName = "Neo Anderson"; // setter 호출
console.log(heropy);

정적 메소드(Static Method)

프로토타입 속성없이 정의된 메서드 → `Array.isArray()`와 같이 객체를 생성하지 않고 사용 가능

isArray(): 전달된 인수가 배열이면 true, 아니면 false를 반환

정적 메서드 특징

메서드 앞에 static을 붙임
클래스 자체에서 바로 호출 가능
인스턴스에서 호출 불가능

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  // 일반 메서드, 프로토타입 메서드
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  static isUser(user) {
    if (user.firstName && user.lastName) {
      return true;
    }
    return false;
  }
}

// 생성자 함수를 통해 만들어진 객체 = 인스턴스
const heropy = new User("Heropy", "Park");
const neo = new User("Neo", "Smith");
const lewis = {
  name: "Lewis Yang",
  age: 85,
};

console.log(heropy.getFullName()); // Heropy Park
console.log(neo.getFullName()); // Neo Smith
console.log(User.getFullName()); // TypeError: User.getFullName is not a function
// 클래스 자체에서 바로 호출
console.log(User.isUser(heropy)); // true
console.log(User.isUser(neo)); // true
console.log(User.isUser(lewis)); // false
// 인스턴스에서는 호출 불가능
console.log(heropy.isUser()); // TypeError: heropy.isUser is not a function

상속(Inheritance)과 instanceof

부모의 속성과 메서드를 자식이 물려받음 → `class 자식클래스명 extends 부모클래스명`

부모의 메서드 재정의 가능 → 오버라이딩
부모클래스가 가지고 있는 메서드 호출 → super()
A instanceof B: A의 데이터가 B의 인스턴스로 만들어 있는지 확인

// 운송 수단
class Vehicle {
  constructor(acceleration = 1) {
    this.speed = 0;
    this.acceleration = acceleration;
  }
  acceleration() {
    this.speed += this.acceleration;
  }
  deceleration() {
    if (this.speed <= 0) {
      console.log("정지");
      return;
    }
    this.speed -= this.acceleration;
  }
}

// 자전거
class Bicycle extends Vehicle {
  constructor(price = 100, acceleration) {
		// super()를 통해 부모클래스인 Vehicle()이 가지고 있는 메서드를 호출
    super(acceleration);
    this.price = price;
    this.wheel = 2;
  }
}

const bicycle = new Bicycle(300, 2); // 생성자 함수 호출
console.log(bicycle); // Bicycle { speed: 0, acceleration: 2, price: 300, wheel: 2 }
// Bicycle에서 선언하지 않은 변수인 speed와 acceleration은 부모클래스인 Vehicle()에서 상속받음
bicycle.acceleration();
console.log(bicycle); // Bicycle { speed: 2, acceleration: 2, price: 300, wheel: 2 }
const bicycle2 = new Bicycle(300);
console.log(bicycle2); // Bicycle { speed: 0, acceleration: 1, price: 300, wheel: 2 }
console.log(bicycle instanceof Bicycle); // true
console.log(bicycle instanceof Vehicle); // true -> Bicycle은 Vehicle의 인스턴스로 만들어짐

// 자동차
class Car extends Bicycle {
  constructor(license, price, acceleration) {
    super(price, acceleration);
    this.license = license;
    this.wheel = 4;
  }
	// acceleration() 메서드 재정의(오버라이딩)
  acceleration() {
    if (!this.license) {
      console.error("무면허!");
      return;
    }
    this.speed += this.acceleration;
    console.log("가속!", this.speed);
  }
}

const carA = new Car(true, 7000, 10);
const carB = new Car(false, 4000, 6);
console.log(carA); // Car { speed: 0, acceleration: 10, price: 7000, wheel: 4, license: true }
console.log(carB); // Car { speed: 0, acceleration: 6, price: 4000, wheel: 4, license: false }
console.log(carA instanceof Car); // true
console.log(carB instanceof Car); // true
console.log(carA instanceof Bicycle); // true

carA.acceleration();
console.log(carA); // Car { speed: 10, acceleration: 10, price: 7000, wheel: 4, license: true }
carB.acceleration(); // 무면허!

// 보트
class Boat extends Vehicle {
  constructor(price, acceleration) {
    super(acceleration);
    this.price = price;
    this.motor = 1;
  }
}

const boat = new Boat(10000, 5);
console.log(boat); // Boat { speed: 0, acceleration: 5, price: 10000, motor: 1 }
console.log(boat instanceof Boat); // true
console.log(boat instanceof Vehicle); // true
console.log(boar instanceof Bicycle); // false

instanceof와 constructor

instanceof

class A {
  constructor() {}
}
class B extends A {
  constructor() {
    super();
  }
}
class C extends B {
  constructor() {
    super();
  }
}

const a = new A(); // a: 인스턴스, new A(): 생성자함수
const b = new B();
const c = new C();

console.log(a instanceof A); // true
console.log(b instanceof B); // true
console.log(a instanceof B); // false

constructor

인스턴스가 가지고 있는 constructor 프로퍼티는 생성자 함수를 가리킨다.

console.log(c.constructor === A); // false
console.log(c.constructor === B); // false
console.log(c.constructor === C); // true

배열, 객체 등에서도 사용 가능

const fruits = ["apple", "banana", "orange"];
console.log(fruits.constructor === Array); // true
console.log(fruits instanceof Array); // true

Minji Lee

이전 포스트

JavaScript(4)

다음 포스트

JavaScript(5)

javascript

Ch05 클래스

Prototype

배열 생성 방법

다른 객체에 있는 메서드 이용하기

ES6 Class 기본 문법

JS가 가지고 있는 프로토타입 방식을 내장한 새로운 문법

Getter, Setter

`Getter`: 값을 얻는 용도의 메서드

`Setter`: 값을 설정하는 용도의 메서드

매개변수를 이용하여 데이터 추출하는 방법

정적 메소드(Static Method)

프로토타입 속성없이 정의된 메서드 → `Array.isArray()`와 같이 객체를 생성하지 않고 사용 가능

정적 메서드 특징

상속(Inheritance)과 instanceof

부모의 속성과 메서드를 자식이 물려받음 → `class 자식클래스명 extends 부모클래스명`

instanceof와 constructor

instanceof

constructor

JavaScript(4)

JavaScript(6)-1

0개의 댓글

JavaScript(5)

javascript

Ch05 클래스

Prototype

배열 생성 방법

다른 객체에 있는 메서드 이용하기

ES6 Class 기본 문법

JS가 가지고 있는 프로토타입 방식을 내장한 새로운 문법

Getter, Setter

Getter: 값을 얻는 용도의 메서드

Setter: 값을 설정하는 용도의 메서드

매개변수를 이용하여 데이터 추출하는 방법

정적 메소드(Static Method)

프로토타입 속성없이 정의된 메서드 → Array.isArray()와 같이 객체를 생성하지 않고 사용 가능

정적 메서드 특징

상속(Inheritance)과 instanceof

부모의 속성과 메서드를 자식이 물려받음 → class 자식클래스명 extends 부모클래스명

instanceof와 constructor

instanceof

constructor

JavaScript(4)

JavaScript(6)-1

0개의 댓글

`Getter`: 값을 얻는 용도의 메서드

`Setter`: 값을 설정하는 용도의 메서드

프로토타입 속성없이 정의된 메서드 → `Array.isArray()`와 같이 객체를 생성하지 않고 사용 가능

부모의 속성과 메서드를 자식이 물려받음 → `class 자식클래스명 extends 부모클래스명`