ES6에서는 클래스를 어떻게 정의하나요?

ES6에서는 객체에 대한 템플릿으로 클래스(class)가 도입되었으며, "class" 키워드를 통해 클래스를 정의할 수 있습니다. 클래스의 본질은 함수입니다. 이는 구문 설탕으로 간주될 수 있으며 객체 프로토타입 작성을 더 명확하고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6 Class

ES6에서는 클래스(class)가 객체의 템플릿으로 도입되었으며 클래스는 "class" 키워드를 통해 정의할 수 있습니다.

수업의 본질은 기능입니다.

기본적으로 ES6 클래스는 단지 구문 설탕으로 간주될 수 있습니다. 대부분의 기능은 ES5에서 달성할 수 있습니다. 새로운 클래스 작성 방법은 객체 프로토타입의 작성 방법을 더 명확하고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다. .

기본 사용법

클래스 정의

클래스 표현식은 익명이거나 이름이 지정될 수 있습니다.

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

클래스 선언

class Example {
    constructor(a) {
        this.a = a;
    }
}

주의 사항: 반복 가능한 선언은 허용되지 않습니다.

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

주의 사항:

클래스 정의는 승격되지 않습니다. 즉, 액세스하기 전에 클래스를 정의해야 하며 그렇지 않으면 오류가 보고됩니다.

클래스의 메서드에는 function 키워드가 필요하지 않습니다.

메소드 사이에는 세미콜론이 없습니다.

new Example(); 
class Example {}

클래스 본문

Properties

prototype

ES6에서는 메소드가 클래스에서 직접 정의될 수 있지만 실제로는 프로토타입에 정의되어 있습니다. 초기화 시 메소드 재정의/메서드 추가

Example.prototype={
    //methods
}

Add 메소드

Object.assign(Example.prototype,{
    //methods
})

정적 속성

정적 속성: 클래스 자체의 속성, 즉 클래스 내부에 직접 정의된 속성(Class.propname)은 반드시 그럴 필요는 없습니다. 인스턴스화되었습니다. ES6에서는 Class 내부에 정적 메서드만 있고 정적 속성은 없다고 규정합니다.

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

공용 속성

class Example{}
Example.prototype.a = 2;

인스턴스 속성

인스턴스 속성: 인스턴스 객체(this)에 정의된 속성입니다.

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

name attribute

클래스 다음에 오는 클래스 이름을 반환합니다(존재하는 경우).

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

method

constructor method

constructor 메서드는 클래스의 기본 메서드이며 클래스의 인스턴스화된 개체를 생성할 때 호출됩니다.

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

반환 객체

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

정적 메소드

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

프로토타입 메소드

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

인스턴스 메소드

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

클래스 인스턴스화

new

클래스는 다음을 통해 인스턴스화되어야 합니다. 새로운 키워드.

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

인스턴화된 객체

공유 프로토타입 객체

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
 
// __proto__ 已废弃，不建议使用
// console.log(exam1.__proto__ == exam2.__proto__); 
 
console.log(Object.getPrototypeOf(exam1) === Object.getPrototypeOf(exam2));// true
 
Object.getPrototypeOf(exam1).sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

위 내용은 ES6에서는 클래스를 어떻게 정의하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!