본문 바로가기

자바스크립트-스터디[2021-10-05~완료]

25장 클래스

2021-12-18 발표자

17장 생성자 함수에 의한 객체 생성(14p) : 널두

25장 클래스.1~5(17p) : 데브워니

25장 클래스.6~7(11p) : 노아

25장 클래스.8(20p) : kei

 

 

1. 클래스는 프로토타입의 문법적 설탕인가

 

자바스크립트는 프로토타입 기반의 객체 지향 언어(=클래스가 필요 없는).

자바스크립트는 강력한 객체지향 프로그래밍 능력을 가짐.

 

 

var Person = (function(){
    function Person(name){
        this.name = name;
    }//생성자 함수 end

    Person.prototype.sayHi = function(){
    console.log('안녕하세요 내 이름은 ' + this.name):
    }//프로토타입 메서드 end

    return Person;//생성자 함수 반환
}());

생성자 함수, 프로토타입 --> 객체지향 언어의 '상속'을 구현함

 

객체지향 프로그래밍에 익숙해?

ES6 클래스 기반 객체지향 <----> 프로토타입 기반 객체지향

클래스 기반 객체지향 프로토타입 기반 객체지향
자바, C# 자바스크립트
  프로토타입 기반의 객체 지향 언어(=클래스가 필요 없는).
자바스크립트는 강력한 객체지향 프로그래밍 능력을 가짐.
사실 클래스는 함수임!!!
프로토타입 기반 패턴 -> 클래스 기반 패턴
처럼 사용할 수 있도록 하는 문법적 설탕.

 

 

 

클래스 함수
== 문법적 설탕
==> 새로운 객체 생성 메커니즘
생성자 함수 == 함수 선언문
프로토타입 기반의 객체 지향 구현 프로토타입 기반의 객체 지향 구현
생성방식이 더 견고하고 명료하다  
extends, super 키워드 : 상속 관계 구현을--> 간결, 명료 extends, super 키워드  없음
new 없이 호출->  에러 new 연산자 없이 호출 -> 일반 함수로서 호출
호이스팅이 발생하지 않는 것처럼 동작. 함수 표현식으로 정의한 생성자 함수는
호이스팅 발생!
클래스내 모든 코드에는
암묵적으로 strict mode가 지정되어 실행
strict mode 해제 안됨.
strict mode 지정 안됨
constructor --> 열거되지 않는다.
프로토타입 메서드 --> 열거되지 않는다.
정적 메서드  --> 열거되지 않는다.
 

 

 

2. 클래스의 정의

class로 시작함.

표현식 --> 1) 익명 클래스 2) 기명 클래스

클래스를 표현식으로 정의 가능 클래스가 값으로 사용할수 있는 == 일급객체
  클래스는 함수
  무명의 리터럴로 생성할 수 있다. == 런타임 생성 가능
  변수, 자료구조(겍체, 배열) 저장할 수  있다
  함수의 반환 값으로 사용 가능.

클래스 == 함수

따라서 클래스는 값처럼 사용할수 있는 일급객체

 

 

1) 생성자, 2) 프로토타입 메서드, 3) 정적 메서드

class Person{//클래스 선언문
​
    //1. 생성자
    constructor(name){
        //인스턴스 생성 및 초기화
        this.name = name;//name 프로퍼티는 public하다
    }
​
    //2.프로토타입 메서드
    sayHi(){
        console.log(`안녕! 내이름은 ${this.name}`);
    }
​
    //3.정적 메서드
    static sayHello(){
    console.log('안녕~~~');
    }
}//클래스 선언문 end

const me = new Person('한정원');//인스턴스 생성
me.sayHi();//안녕! 내이름은 wonny 프ㅗ토타입 메서드 호출

 

오른쪽이 클래스 class 사용해서...

 

 

 

 

3. 클래스 호이스팅 = 클래스는 함수 선언문과 같다

클래스 선언문 정의한 클래스 ---> 함수 선언문

1. 소스코드 평가 과정 == 런타임 이전에 먼저 평가 되어 함수 객체를 생성

생성자 함수로서 호출할수 있는 함수. == constructor 함수객체로 평가됨

호이스팅이 발생하지 않는것 같지만... 아니다.

 

 

25.4 인스턴스 생성

'자바스크립트-스터디[2021-10-05~완료]' 카테고리의 다른 글

16장 프로퍼티 어트리뷰트  (0) 2021.12.31
[27장] 배열  (0) 2021.12.30
[24 클로저]  (0) 2021.12.11
[26.4~26.5장] ES6함수 추가 기능  (0) 2021.12.10
22장 this  (0) 2021.12.06