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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!