Summarize and organize the class knowledge points in ES6

This article brings you relevant knowledge about javascript, E which mainly introduces related issues about class class. ES6 introduces the concept of class class, and classes can be defined through the class keyword , this is an object-oriented language that is more in line with what we usually understand. Let’s take a look at it. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

class introduction

Traditional JS only has the concept of objects, not classes, because JS is an object-oriented language based on prototypes, and the characteristic of prototype objects is to share all properties 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;

Static methods and static properties

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

Static method

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

• Static methods will not be inherited by subclasses, and subclasses cannot call
• This in the static method points to the class class, not Instance of class. Therefore static methods can only be called through class names, not through instances

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

static properties

static prop = 1 ;  // 静态属性

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

class Inherit extends

• class can use the extends keyword to inherit
• ES6 inheritance, and 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 to call the value function getter and

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

class The value-stored 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]

Notes:

1. When defining a method in a class, you cannot 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.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of Summarize and organize the class knowledge points in ES6. For more information, please follow other related articles on the PHP Chinese website!