직업훈련/새싹(SeSAC)

[새싹(SeSAC) 프론트엔드] day18 221109

뉼👩🏻‍💻 2022. 11. 9. 20:59
728x90
반응형
SMALL

 

객체(object) 

: 실생활에 존재하는 실제적인 물건 또는 개념

 

속성(attribute)

: 객체가 가지고 있는 특성

 

메서드(method)

: 객체가 동작(행동)할 수 있도록 하는 함수 

 

 

클래스

: 객체가 가져야 할 기본적인 정보를 당은 코드 / 일종의 템플릿 

- 객체를 효율저으로 생성하기 위해 만들어진 구문 

 

생성자 함수 클래스
new 키워드가 생략되면 일반 함수로 호출됨 new 키워드 생략 시, 타입 에러 발생
function 키워드로 정의  class 키워드로 정의
let 객체이름 = new 생성자함수(); let 객체이름 = new 클래스이름();
  ES6에서 등장

 

 

클래스 생성시 new를 생략하면 타입 에러 발생

let rec = Rectangle();

 

 

-클래스 선언 및 객체 생성

class Rectangle {}

//붕어빵 1번
let rec1 = new Rectangle();

//붕어빵 2번
let rec2 = new Rectangle();

 

 

- 클래스 내부 함수 

1. 생성자 메서드 - constructor()

: 객체를 생성하고 초기화하는 메서드 

 

- 클래스 내에 최대 1개만 존재 

 

- 생략 가능 : 생략 시 빈 생성자가 만들어짐 

: new 클래스명 을 선언하는 순간에 생성자 메서드가 실행됨 

 

-return 문을 생략함 

: new 연산자가 return을 포함하고 있기 때문에 new가 클래스와 함께 호출되면 암묵적으로 객체를 반환해줌 

 

class Rectangle {
  constructor(w, h) {
    this.width = w;
    this.height = h;
    return {};
  }

 

class Rectangle {
  constructor(w, h) {
    this.width = w;
    this.height = h;
    return "soo";
  }
}

- return에 값을 넣어도 무시하고 실행되지 않음 

 

- 클래스로 객체 생성하기 

let rec1 = new Rectangle(100, 200);
console.log(rec1);

//붕어빵 2번
let rec2 = new Rectangle(300, 500);
console.log(rec2);

 

 

- 객체 값 사용하기 

console.log(rec1.width);

 

 

 

 

 

 

 

2. 프로토타입 메서드

: 클래스 내부에서 명시적으로 정의한 메서드 

-> 개발자가 직접 정의한 함수 

- function 키워드를 붙이지 않음

 

(*)실습

[코드]

class Rectangle {
  constructor(w, h) {
    this.width = w;
    this.height = h;
  }

  area() {
    console.log("사각형의 넓이를 구합니다");
  }

  area2 = () => {
    console.log("사격형의 넓이를 구할까요");
  };
}

console.log(rec1.area());
console.log(rec1.area2());

 

[결과]

생성자 함수처럼 내부에 정의된 함수이며 실행되기 위해서는 함수를 '호출'하는 단계가 필요하다 

 

 

 

3. 정적 메서드 

: 정적 프로퍼티 또는 정적 메소드 

- 객체를 생성하지 않아도 호출 가능 

: 따라서 객체가 호출하지 않고, 클래스로 호출해야 접근할 수 있음 

 

객체의 고유한 속성을 가져다 쓰는 this를 사용할 필요가 없을 때 만드는 것이 '정적'의 영역

구분 정적 메서드 프로토타입 메서드
프로토타입 체인 클래스 인스턴스
호출방식 클래스로 호출 인스턴스로 호출
인스턴스 프로퍼티 
참조 가능 여부		 불가능 가능 

 

 

 

클래스 접근 제어(캡슐화)

*캡슐화(Encapsulation)

 : 클래스 내부의 특정 프로퍼티나 메소드를 외부에서 참조하지 못하도로고 숨기는 것 

- 그럼 누가 접근?

: 내부에 들어가는 권한이 있는 사람만 데이터를 건들 수 있도록 하는 것

 

 

외부 내부
제한된 접근 권한을 제공 원하지 않는 외부의 접근에 대해 내부를 보호 

* 방법 : 캡슐화를 원하는 프로퍼티나 메서드 앞에 #기호를 붙임 

 

 

 

 

접근자 프로퍼티 (=함수)

 

- 데이터 프로퍼티 

:키와 값으로 구성된 일반적인 프로퍼티

 

- 접근자 프로퍼티

: 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티 

 

get(호출 및 반환) set (저장 및 변경)
- 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수
- getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환		 - 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수 
- setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장

** get 사용시 프로퍼티 처럼 사용하므로 뒤어 소괄호가 없음 

ex. rect1.display

 

: 캡슐화된 정보에 접귾나기 위해서 사용하는 것이 get/set 

 

 

 

 

상속 

: 한 클래스가 다른 클래스에서 정의된 속성 및 함수를 물려 받아 그대로 사용 

➡️ 부모것을 받고 거기에 내것을 추가하는 것.

class 자식클래스이름 extends 부모클래스이름 { 
    // 클래스 구현 
}

- 상속 받아 만들어진 클래스의 특징 

: 물려받은 기능에 필요한 기능을 추가하여 정의할 수 있음 

 

 

(*) 실습

[코드]

class Animal {
  constructor(legs, color) {
    this.legs = legs;
    this.color = color;
  }

  speak() {
    console.log("짓는다");
  }
  sleep() {
    console.log("꿀잠잔다");
  }
}

let animal = new Animal(4, "brown");
console.log(animal);

class Dog extends Animal {
  constructor(legs, color, ownerName) {
    // this.legs = legs;
    // this.color = color;
    super(legs, color);
    this.ownerName = ownerName;
  }
  // speak() {
  //   console.log("짓는다");
  // }
  play() {
    console.log("재밌게 논다");
  }
  sleep() {
    super.sleep();
    console.log("아주 꿀잠잔다");
  }
}

let dog = new Dog(4, "brown", "john");
console.log(dog);
dog.sleep();
dog.play();
//super로 가져오지 않았음
dog.speak();

[결과]

 

 

오버라이딩 (overriding)

: 부모 클래스로부터 상속받은 메서드를 자식 클래스에서 재정의 

- 상속받은 메서드를 자식이 조금 바꿔서 사용하는 것 

➡️ 껍데기만 가져오고 안의 내용을 다 바꿀 수 도 있음 ; 이렇게는 상속한 의미가 없으므로 이렇게는 잘 하지 않음 

 

 

** 오버로딩

: 함수이름이 똑같음 

똑같은 함수를 또다시 구현

똑같은 함수를 구현하는데 매개변수의 개수에서 차이가 있는 것 

 

 

instanceof 

: 객체가 특정 클래스에 속하는지 아닌지를 확인해 주는 연산자 

- 해당하면 : true

- 해당하지 않으면 : false 

 

 

 

(+) 클래스도 생성자 함수처럼 첫글자는 대문자로 사용(관례)

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅(수)

 

728x90
반응형