클래스가 es5인가요, 아니면 es6인가요?

class는 es6의 새로운 기능입니다. ES6에서는 클래스(class)가 객체의 템플릿으로 도입되었으며 클래스는 class 키워드를 통해 정의될 수 있습니다. 새로운 클래스 작성 방법을 사용하면 객체 지향 프로그래밍의 구문과 더 유사해 객체 프로토타입 작성이 더 명확해집니다. 이해할 수 있는. 클래스는 ECMAScript의 새로운 기본 구문 설탕 구조입니다. 비록 ES6 클래스가 공식적인 객체 지향 프로그래밍을 지원하는 것처럼 보이지만 실제로는 여전히 그 뒤에 있는 프로토타입과 생성자의 개념을 사용하므로 객체 프로토타입이 더 명확해졌습니다.

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

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

ES6에서는 전통 언어에 가까운 작성 방식을 제공합니다. 새로 도입된 클래스 키워드에는 클래스를 형식적으로 정의하는 기능이 있습니다. 클래스는 ECMAScript의 새로운 기본 구문 설탕 구조입니다. 비록 ECMAScript 6 클래스가 공식적인 객체 지향 프로그래밍을 지원하는 것처럼 보이지만 실제로는 여전히 그 뒤에 있는 프로토타입과 생성자의 개념을 사용하므로 객체 프로토타입이 더 명확하고 더 많이 작성될 수 있습니다. 객체 지향 프로그래밍의 구문과 같습니다.

1. 클래스 소개

JS는 프로토타입 기반의 객체지향 언어이고, 프로토타입 객체의 특징은 모든 속성을 새로운 객체와 공유하는 것이기 때문입니다. .

ES6에서는 클래스라는 개념을 도입했습니다. 클래스는 우리가 일반적으로 이해하는 것과 더 일치하는 객체 지향 언어입니다.

class Person{   //定义一个名为Person的类
    // 构造函数，用来接受参数
    constructor(x,y){
        this.x = x;    //this代表的是实例对象
        this.y = y;
    }
    todoSome(){  //这是个类的方法，不需要加function，有多个方法也不用逗号隔开
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;

2. 정적 메서드 및 정적 속성

정적 메서드 및 정적 속성은 정적 키워드

2.1 정적 메서드

static classMethod(){
		console.log('123456')
	}

• 정적 메서드는 하위 클래스로 분류되지 않습니다. , 서브클래스는 클래스의 인스턴스가 아닌 클래스를 가리키는 정적 메서드에서
• this를 호출할 수 없습니다. 따라서 정적 메서드는 인스턴스가 아닌 클래스 이름을 통해서만 호출할 수 있습니다

let p = new Point();
p.classMethod();  // 报错

2.2 정적 속성

static prop = 1 ;  // 静态属性

• 정적 속성은 하위 클래스에서 상속될 수 없으며 하위 클래스는 호출할 수 없습니다.
• 정적 속성은 호출만 가능합니다. 클래스의 인스턴스가 아닌 클래스 이름을 통해

3. 클래스 상속 확장

• 클래스는 확장 키워드
• ES6 상속을 사용하여 상속될 수 있으며, 하위 클래스 생성자에서 super()를 사용해야 합니다. ES6 상속은 먼저 상위 클래스 인스턴스 객체의 속성과 메서드를 여기에 추가한 다음 하위 클래스의 생성자를 호출하여 이를 수정하기 때문에 하위 클래스가 생성자 메서드를 정의하지 않으면 super()가 기본적으로 이를 추가합니다. 하위 클래스는 상위 클래스의 메서드와 속성을 상속하지만 정적 메서드와 속성은 하위 클래스

• import classtest from "./classtest";  //先引入父类
  class Man extends classtest{
      constructor(x,y){   //构造函数尽量与父类参数保持一致
          super();   //利用super()关键字，这个必须放在子类构造函数中的第一位置
          this.x = x;
          this.y = y;
      }
  }
  export default  Man;

• 4의 클래스 이름을 통해 호출해야 합니다. 클래스의 값 함수 getter와 저장 함수 setter

getter 및 setter는 값을 읽고 클래스 속성에 전달하는 데 사용됩니다. 값 함수 getter와 저장 함수 setter는 할당 및 값 동작을 사용자 정의할 수 있습니다. 속성에 getter만 있고 setter가 없는 경우 속성은 읽기 전용 속성이므로 값을 할당할 수 없으며 초기화할 수도 없습니다. 처음으로.

변수가 private으로 정의된 경우(클래스의 중괄호 외부에 정의됨) setter 없이 getter만 사용할 수 있습니다.

let data=[1,2,3,4];  //放在类外面，属于私有变量，可以只读取
class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    get x(){
        console.log('获得name');
        return this._name;    //get读取属性
    }
    set x(x){
        console.log("设置name");  
        this._name=x;   //set给属性赋值
    }
    get data(){
        return data;   //只读属性，属性返回的值只能是私有变量
    }
    todoSome(){
        alert(this.x + "的年龄是" +this.y+"岁");
    }
    static dayin(){
        alert("dayin");
    }
}
export default  Person;

사용 방법:

 var test= new this.$myutils.classtest('haha','18');
  test.x="haha3";   //改变了实例化时候的x的值
  test.todoSome();  //输出：haha3的年龄是18岁。这里就已经不是实例化时候的haha了
  console.log(test.data);   //结果：打印[1,2,3,4]

5. 참고 사항:

1 JS의 생성자는 function으로 정의되므로 클래스에서 메서드를 정의할 때 메서드에 function 키워드를 추가할 수 없습니다. 두 개가 분리되었습니다. 2. 모든 메소드를 쉼표로 구분하지 마십시오. 그렇지 않으면 오류가 보고됩니다.

【추천 학습:

javascript 고급 튜토리얼

】

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