JavaScript 클래스

JavaScript 클래스는 개체를 만들기 위한 Blueprint입니다.클래스는 데이터를 조작하는 데이터와 함수를 캡슐화합니다.

자바나 C#과 같은 다른 프로그래밍 언어와는 달리 JavaScript 클래스는 시제품 상속을 위한 구문설탕입니다.즉, ES6 클래스는 단지 특수 기능일 뿐입니다.

 

Classes prior to ES6 revisited

ES6 이전에 JavaScript에는 클래스 개념이 없었습니다.클래스를 모방하기 위해 다음 예시와 같이 생성자/프로토타입 패턴을 사용하는 경우가 많습니다.

function Person(name) { this.name = name; } Person.prototype.getName = function () { return this.name; }; var john = new Person("John Doe"); console.log(john.getName());

Code language: JavaScript (javascript)

출력:

John Doe

작동 방식.

첫 번째로,Person컨스트럭터 함수로서 기능하는 속성명name.그getName()함수는 에 할당되어 있습니다.prototype모든 인스턴스에서 공유할 수 있도록 하기 위해Person유형.

그런 다음 의 새 인스턴스를 만듭니다.Person를 사용하여 입력하다new교환입니다.그john따라서 오브젝트는 의 인스턴스입니다.Person그리고.Object시제품 상속을 통해서요.

다음 문장은 다음 명령어를 사용합니다.instanceof오퍼레이터가 확인하다john의 인스턴스입니다.Person그리고.Object입력:

console.log(john instanceof Person); // true console.log(john instanceof Object); // true

Code language: JavaScript (javascript)

ES6 클래스 선언

ES6에서는 다음 예시와 같이 클래스를 선언하기 위한 새로운 구문이 도입되었습니다.

class Person { constructor(name) { this.name = name; } getName() { return this.name; } }

Code language: JavaScript (javascript)

이것.Personclass는 다음과 같이 동작합니다.Person이전 예시와 같이 입력합니다.그러나 생성자/프로토타입 패턴을 사용하는 대신class키워드를 지정합니다.

에서Person클래스,constructor()인스턴스 속성을 초기화할 수 있습니다.JavaScript는 자동으로constructor()메서드를 사용하여 클래스의 개체를 인스턴스화할 수 있습니다.

다음은 새로운 생성입니다.Personobject는 자동으로 호출됩니다.constructor()의Person클래스:

let john = new Person("John Doe");

Code language: JavaScript (javascript)

그getName()의 메서드라고 불립니다.Personclass. 생성자 함수와 마찬가지로 다음 구문을 사용하여 클래스의 메서드를 호출할 수 있습니다.

objectName.methodName(args)

Code language: CSS (css)

예를 들어 다음과 같습니다.

let name = john.getName(); console.log(name); // "John Doe"

Code language: JavaScript (javascript)

클래스가 특수 함수임을 확인하려면typeof의 연산자가 의 유형을 확인합니다.Person학급.

console.log(typeof Person); // function

Code language: JavaScript (javascript)

다시 돌아오다function역시나

그john오브젝트도 의 인스턴스입니다.Person그리고.Object종류:

console.log(john instanceof Person); // true console.log(john instanceof Object); // true

Code language: JavaScript (javascript)

클래스 vs.커스텀 타입

생성자 함수를 통해 정의된 사용자 정의 유형과 클래스 간의 유사성에도 불구하고 몇 가지 중요한 차이가 있습니다.

첫째, 클래스 선언은 함수 선언과 같이 중지되지 않습니다.

예를 들어, 다음 코드를 위쪽에 배치하면Personclass declaration 섹션, 당신은 얻을 것입니다.ReferenceError.

let john = new Person("John Doe");

Code language: JavaScript (javascript)

오류:

Uncaught ReferenceError: Person is not defined

Code language: JavaScript (javascript)

다음으로 클래스 내의 모든 코드가 자동으로 엄밀한 모드로 실행됩니다.그리고 당신은 이 동작을 바꿀 수 없습니다.

셋째, 클래스 메서드는 열거할 수 없습니다.생성자/프로토타입 패턴을 사용하는 경우Object.defineProperty()속성을 열거할 수 없게 만드는 방법.

마지막으로 클래스 컨스트럭터를 호출할 때new연산자는 다음 예시와 같이 오류를 발생시킵니다.

let john = Person("John Doe");

Code language: JavaScript (javascript)

오류:

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'

Code language: JavaScript (javascript)

constructor 함수를 호출할 수 있습니다.new교환입니다.이 경우 컨스트럭터 함수는 일반 함수와 같이 동작합니다.

요약

• JavaScript 사용class키워드를 지정하면 새로운 클래스가 선언합니다.

 

https://www.javascripttutorial.net/es6/javascript-class/