Is the class es5 or es6?

class is a new feature of es6. In ES6, class (class) was introduced as a template for objects, and classes can be defined through the class keyword; the new class writing method makes the writing of object prototypes clearer, more like the syntax of object-oriented programming, and more understandable. Class is a new basic syntactic sugar structure in ECMAScript. Although ES6 classes appear to support formal object-oriented programming, in fact they still use the concepts of prototypes and constructors behind them, allowing object prototypes to The writing method is clearer,

#The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

class is a new feature of es6. In ES6, class (class) was introduced as a template for objects, and classes can be defined through the class keyword.

ES6 provides a writing method that is closer to traditional languages. The newly introduced class keyword has the ability to formally define classes. Class is a new basic syntactic sugar structure in ECMAScript. Although ECMAScript 6 classes appear to support formal object-oriented programming, in fact, they still use the concepts of prototypes and constructors behind them, allowing object prototypes to The writing method is clearer and more like the syntax of object-oriented programming.

1. Introduction to class

Traditional JS only has the concept of objects and does not have the concept of classes, because JS is an object-oriented language based on prototypes, prototypes The characteristic of objects is that all attributes are shared with new objects.

ES6 introduces the concept of class. Classes can be defined through the class keyword. This is an object-oriented language that is more in line with what we usually understand.

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

2. Static methods and static properties

Static methods and static properties are properties and methods that use the static keyword

2.1 Static methods

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

• Static methods will not be inherited by subclasses, and subclasses cannot call
• static methods in this points to the class, not an instance of the class. Therefore static methods can only be called through the class name, not through the instance

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

2.2 Static properties

static prop = 1 ;  // 静态属性

• Static properties cannot be inherited by subclasses, and subclasses cannot call
• Static properties can only be called through the class name, not through instances of the class

3. Class inheritance extends

• class can use the extends keyword to inherit
• ES6 inheritance, super() must be used in the subclass constructor. Because ES6 inheritance first adds the attributes and methods of the parent class instance object to this, and then calls the constructor of the subclass to modify this this
• If the subclass does not define a constructor method, super() will default Adding a
• subclass will inherit the methods and properties of the parent class, but the static methods and properties must be called through the class name of the subclass

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

4. Class The value function getter and the value storage function setter

getter and setter are used to read and transfer values ​​to the attributes of the class.

The value function getter and the storage function setter can customize the assignment and value behavior. When a property only has a getter and no setter, the property is a read-only property and cannot be assigned a value, nor can it be initialized for the first time. .

If the variable is defined as private (defined outside the curly braces of the class), you can only use the getter without the setter.

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;

How to use:

 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. Notes:

1. When defining a method in a class, do not You can add the function keyword to the method, because the constructor in JS is defined by function, separated by two.

2. Do not separate all methods with commas, otherwise an error will be reported.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of Is the class es5 or es6?. For more information, please follow other related articles on the PHP Chinese website!