JavaScript ES6의 CLASS 사용에 대한 자세한 설명

머리말

자바스크립트에서 클래스는 선택적(필수는 아님) 디자인 패턴이고, 자바스크립트처럼 [[Prototype]] 언어로 클래스를 구현하는 것은 매우 구식이다.

이런 답답한 느낌은 문법에서만 나오는 게 아닙니다. 문법이 아주 중요한 이유이긴 하지만요. js에는 많은 문법적 단점이 있습니다: 번거롭고 지저분한 .prototype 참조, 프로토타입 체인의 상위 수준에서 동일한 이름의 함수를 호출하려고 할 때 명시적인 의사 다형성, 신뢰할 수 없고 보기 흉하며 쉽게 오해되는 .constructor "건설자".

게다가 실제로 수업 설계에는 더 많은 문제가 있습니다. 전통적인 클래스 지향 언어에서는 실제로 상위 클래스와 하위 클래스, 하위 클래스와 인스턴스 간에 복사 작업이 있지만 [[Prototype]]에는 복사가 없습니다.

객체 연관 코드와 동작 위임은 [[Prototype]]을 숨기지 않고 사용합니다. 단순함에 비해 클래스는 JavaScript에 적합하지 않음을 알 수 있습니다.

ES6의 CLASS 사용

JavaScript의 전통적인 방식은 객체 인스턴스 생성 시 생성자를 정의한 후 new를 통해 완성하는 것입니다.

function StdInfo(){
  this.name = "job";     
  this.age = 30;     
}
 
StdInfo.prototype.getNames = function (){
  console.log("name："+this.name);       
}
//得到一个学员信息对象
var p = new StdInfo()

자바스크립트에는 클래스가 아닌 객체만 있습니다. 프로토타입 기반 언어입니다. 프로토타입 개체는 새 개체의 템플릿이며 새 개체와 자체 속성을 공유합니다. 이러한 작성 방식은 전통적인 객체 지향 언어와 매우 다르며 초보자가 쉽게 혼동할 수 있습니다.

클래스 정의

ES6에서는 클래스가 객체의 템플릿으로 추가되었습니다. 클래스를 통해 클래스 정의하기:

//定义类
class StdInfo {
  constructor(){
    this.name = "job";     
    this.age = 30;  
  }
  //定义在类中的方法不需要添加function
  getNames(){
    console.log("name："+this.name);  
  }
}
//使用new的方式得到一个实例对象
var p = new StdInfo();

위의 글이 더 명확하고 객체 지향 프로그래밍의 구문에 더 가깝고 이해하기 더 쉬운 것 같습니다.

에 의해 정의된 클래스는 단지 구문 설탕일 뿐입니다. 그 목적은 더 간결하고 명확한 구문으로 객체를 생성하고 관련 상속을 처리할 수 있도록 하는 것입니다.

//定义类
class StdInfo {
  //...
}
console.log(typeof StdInfo); //function
 
console.log(StdInfo === StdInfo.prototype.constructor); //true

위 테스트에서 알 수 있듯이 클래스의 타입은 함수, 즉 생성자를 가리키는 "특수 함수"이다.

함수를 정의하는 방법에는 함수 선언과 함수 표현식이 있습니다. 클래스를 정의하는 방법에도 클래스 선언과 클래스 표현식이 있습니다.

클래스 선언

클래스 선언은 클래스 키워드, 클래스 이름, 중괄호 쌍을 사용하여 클래스를 정의하는 방법입니다. 정의해야 하는 메소드를 중괄호 안에 넣으세요.

//定义类，可以省略constructor
class StdInfo {
  getNames(){
    console.log("name："+this.name);
  }
}
// -------------------------------------
//定义类，加上constructor
class StdInfo {
  //使用new定义实例对象时，自动调用这个函数，传入参数
  constructor(name,age){
    this.name = name;     
    this.age = age;  
  }
   
  getNames(){
    console.log("name："+this.name);  
  }
}
//定义实例对象时，传入参数
var p = new StdInfo("job",30)

new를 사용하여 인스턴스 객체를 정의하면 생성자 함수가 자동으로 실행되고 필수 매개변수가 전달됩니다. 그러면 생성자가 실행됩니다. 그러면 인스턴스 객체가 자동으로 반환됩니다.

클래스에는 생성자 함수가 하나만 있을 수 있습니다. 생성자를 여러 개 정의하면 오류가 보고됩니다.

생성자에서 새로 생성된 인스턴스 개체를 가리키는 이 항목은 새로 생성된 인스턴스 개체에 대한 속성을 확장하는 데 사용됩니다.

인스턴스 객체를 정의할 때 초기화 단계에서 아무것도 할 필요가 없습니다. 생성자 함수를 표시하지 않고 작성할 수 있습니다. 명시적으로 정의되지 않은 경우 기본적으로 빈 생성자 메서드가 추가됩니다. constructor(){}

클래스 표현식

클래스 표현식은 함수 표현식과 유사하게 클래스를 정의하는 또 다른 형태입니다. 변수에 대한 값으로서의 함수. 정의된 클래스를 변수에 할당할 수 있습니다. 이 경우 변수는 클래스 이름입니다. class 키워드 뒤의 클래스 이름은 선택 사항입니다. 존재하는 경우 클래스 내에서만 사용할 수 있습니다.

정의 클래스 뒤에 클래스 이름이 있습니다.

const People = class StdInfo {
  constructor(){
    console.log(StdInfo); //可以打印出值，是一个函数
  }
}
 
new People();
new StdInfo(); //报错，StdInfo is not defined；

정의 클래스 뒤에 클래스 이름이 없습니다.

const People = class {
  constructor(){
 
  }
}
 
new People();

즉시 실행 클래스 :

const p = new class {
  constructor(name,age){
    console.log(name,age);
  }
}("job",30)

즉시 실행 클래스를 추가하기 전에 반드시 추가해야 함 새로운 수업. p는 클래스의 인스턴스 객체입니다.

변수 승격 없음

정의된 클래스에는 변수 승격이 없습니다. 클래스를 먼저 정의한 후 사용할 수 있으며 이는 함수 선언과 다릅니다.

//-----函数声明-------
//定义前可以先使用，因为函数声明提升的缘故，调用合法。
func();
function func(){}
 
//-----定义类---------------
new StdInfo(); //报错，StdInfo is not defined
class StdInfo{}

EXTENDS 상속

extends 키워드를 사용하여 클래스 간 상속을 구현합니다. 이는 ES5에서 상속을 사용하는 것보다 훨씬 편리합니다.

//定义类父类
class Parent {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
 
  speakSometing(){
    console.log("I can speek chinese");
  }
}
//定义子类，继承父类
class Child extends Parent {
  coding(){
    console.log("coding javascript");
  }
}
 
var c = new Child();
 
//可以调用父类的方法
c.speakSometing(); // I can speek chinese

상속을 사용하면 하위 클래스가 상위 클래스의 메서드를 갖습니다.

하위 클래스에 생성자 생성자가 있는 경우 super를 사용해야 합니다.

//定义类父类
class Parent {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
 
  speakSometing(){
    console.log("I can speek chinese");
  }
}
//定义子类，继承父类
class Child extends Parent {
  constructor(name,age){
    //不调super()，则会报错 this is not defined
 
    //必须调用super
    super(name,age);
  }
 
  coding(){
    console.log("coding javascript");
  }
}
 
var c = new Child("job",30);
 
//可以调用父类的方法
c.speakSometing(); // I can speek chinese

하위 클래스는 생성자 메서드에서 슈퍼 메서드를 호출해야 합니다. 그렇지 않으면 새 인스턴스를 생성할 때 오류(정의되지 않음)가 보고됩니다. . 하위 클래스에는 자체 this 객체가 없지만 상위 클래스의 this 객체를 상속받아 처리하기 때문입니다. 슈퍼 메소드가 호출되지 않으면 서브클래스는 이 객체를 가져오지 않습니다.