es6 클래스는 함수인가요?

es6 클래스는 함수입니다. es6에서는 클래스(class)가 객체에 대한 템플릿으로 도입되었습니다. 클래스는 class 키워드를 통해 정의할 수 있습니다. 구문은 "클래스 클래스 이름 {...}입니다. 클래스의 본질은 함수(function)입니다. 구문 설탕. 맨 아래 레이어는 "생성자"를 통해 생성됩니다.

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

클래스. 객체의 템플릿으로, 클래스는 class 키워드를 통해 정의할 수 있습니다. 클래스의 본질은 함수입니다.

구문 설탕으로 간주할 수 있으며 하위 계층은 여전히생성자를 통해 이루어집니다. . > 객체 프로토타입 작성을 보다 명확하고 객체 지향 프로그래밍의 구문과 유사하게 만들기 위해 생성되었습니다.

function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayName = function() { return this.name; } const xiaoming = new Person('小明', 18); console.log(xiaoming);

위 코드는 ES6의class를 사용하여 구현되었으며, 이는 다음과 같습니다.

class Person { constructor(name, age) { this.name = name; this.age = age; } sayName() { return this.name; } } const xiaoming = new Person('小明', 18) console.log(xiaoming); // { name: '小明', age: 18 } console.log((typeof Person)); // function console.log(Person === Person.prototype.constructor); // true

构造函数去创建的，让对象原型的写法更加清晰、更像面向对象编程的语法。

class A { constructor() {} toString() {} toValue() {} } // 等同于 function A () { // constructor }; A.prototype.toString = function() {}; A.prototype.toValue = function() {};

上面代码用ES6的class클래스의 모든 메소드는 클래스의 프로토타입 속성에 정의됩니다.

let a = new A(); a.constructor === A.prototype.constructor // true

클래스 인스턴스에서 메소드를 호출하는 것은 실제로 프로토타입에서 메소드를 호출하는 것입니다.

new A(); // ReferenceError class A {}

클래스의 인스턴스

{ let A = class {}; class B extends A {} }

class Animal {} class Cat extends Animal { };

클래스 상속은 확장 키워드를 통해 달성할 수 있습니다.

class Cat extends Animal { constructor(name, age, color) { // 调用父类的constructor(name, age) super(name, age); this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() } }

위 코드는 Cat 클래스를 정의합니다. , 확장 키워드를 통해 Animal 클래스의 모든 속성과 메서드를 상속합니다. 그러나 코드가 배포되지 않으므로 두 클래스는 정확히 동일하며 이는 Cat 클래스 내부에 코드를 추가하는 것과 같습니다. .

class Animal { /* ... */ } class Cat extends Animal { constructor() { } } let cp = new Cat(); // ReferenceError

super 키워드는 생성자 메소드와 toString 메소드 모두에 나타나며 여기서는 상위 클래스의 생성자를 나타내며 상위 클래스의 새로운 this 객체를 생성하는 데 사용됩니다.

하위 클래스는 생성자 메서드에서 슈퍼 메서드를 호출해야 합니다. 그렇지 않으면 새 인스턴스를 생성할 때 오류가 보고됩니다. 이는 하위 클래스의 this 객체가 먼저 상위 클래스의 생성자에 의해 형성되어 상위 클래스와 동일한 인스턴스 속성 및 메서드를 얻은 다음 처리되고 하위 클래스의 인스턴스 속성 및 메서드가 추가되기 때문입니다. 슈퍼 메소드가 호출되지 않으면 서브클래스는 this 객체를 얻지 못합니다.

class Cat extends Animal { } // 等同于 class Cat extends Animal { constructor(...args) { super(...args); } }

Cat은 상위 클래스 Animal을 상속하지만 생성자가 슈퍼 메서드를 호출하지 않아 새 인스턴스를 생성할 때 오류가 발생합니다.서브클래스에 생성자 메서드가 정의되어 있지 않으면 기본적으로 이 메서드가 추가됩니다. 코드는 다음과 같습니다. 즉, 명시적으로 정의되었는지 여부에 관계없이 모든 하위 클래스에는 생성자 메서드가 있습니다.

class A { constructor(x, y) { this.x = x; this.y = y; } } class B extends A { constructor(x, y, name) { this.name = name; // ReferenceError super(x, y); this.name = name; // 正确 } }

또 한 가지 주목해야 할 점은 es5 생성자는 상위 생성자를 호출하기 전에 이에 액세스할 수 있지만 es6 생성자는 상위 생성자(즉, super)를 호출하기 전에는 이에 액세스할 수 없다는 것입니다.

class A { static hello() { console.log('hello world'); } } class B extends A { } B.hello() // hello world

위 코드에서 서브클래스의 생성자 메서드는 super를 호출하기 전에 this 키워드를 사용하는데, 오류가 보고됩니다. 하지만 super 메서드 뒤에 넣는 것이 맞습니다.

상위 클래스의 정적 메서드도 하위 클래스에 상속됩니다.

【관련 추천:

,

】

위 내용은 es6 클래스는 함수인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!