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
constructor 메서드 생성자, 이 키워드는 클래스의 데이터형이 함수이고, 클래스 자체가 생성자를 가리킨다. 쉼표로 메소드를 구분할 필요가 없습니다.
构造函数
去创建的,让对象原型的写法更加清晰、更像面向对象编程的语法。
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 {}
클래스의 인스턴스자체적으로 명시적으로 정의되지 않는 한(즉, 이 객체에 정의됨) 프로토타입에 정의됩니다(즉, 클래스에 정의됨) 참고: 1이 있습니다. 클래스에 변수 승격이 없습니다
{ let A = class {}; class B extends A {} }ES6에서는 클래스 선언이 코드의 헤드로 승격되지 않기 때문입니다. 이 규칙의 이유는 상속과 관련이 있습니다.
class Animal {} class Cat extends Animal { };B가 A를 상속하면 A가 이미 정의를 갖고 있으므로 위 코드는 오류를 보고하지 않습니다. 그러나 클래스 승격이 있는 경우 클래스가 헤드로 승격되므로 위 코드는 오류를 보고합니다. let 명령은 승격되지 않으므로 B가 A를 상속할 때 Foo는 아직 정의되지 않았습니다. 2. 그러나 기본적으로 매우 주의해야 합니다. 이 메서드를 단독으로 사용하면 오류가 보고될 수 있습니다.
클래스 상속은 확장 키워드를 통해 달성할 수 있습니다.
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 메서드 뒤에 넣는 것이 맞습니다.
상위 클래스의 정적 메서드도 하위 클래스에 상속됩니다.
rrreee【관련 추천:
javascript 비디오 튜토리얼,
web front-end】
위 내용은 es6 클래스는 함수인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!