Does javascript have no classes?

Before the ECMAScript6 specification, JavaScript did not have the concept of a class. It only allowed classes to be simulated through constructors and inheritance through prototypes. After ECMAScript 6, you can use the class keyword to define a class. The writing method of using the class keyword to define a class is clearer and more like object-oriented syntax.

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

JavaScript is an object-based, but not entirely object-oriented programming language. In the JS object-oriented programming model, there are two core concepts: objects and classes. Before the ECMAScript6 specification, JavaScript had no concept of classes and only allowed classes to be simulated through constructors and inheritance through prototypes.

The class keyword is added in ES6 to define classes. The way to define a class using the class keyword is clearer and more like object-oriented syntax. But it can be regarded as syntactic sugar, because it is also the concept of constructor and prototype.

1 Class declaration

There are 2 ways to define a class, class declaration and class expression:

// 类声明
class Student {}
// 类表达式
const Student = class {}

2 Why is it said Syntax sugar

Because a class is actually a function. The difference is that the constructor is a function scope, and the class is a block-level scope. The methods in the class are all defined on the prototype of the class. So at the beginning of the article, it is said that it is still the concept of constructor and prototype:

class Student {
	take() {}
}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

// 同等于
function Student() {}
Student.prototype.take = function() {}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

3 Properties and methods contained in a class

A class can containconstructor methods and instances Methods, getters, setters, and static class methods, but these are not required. Empty class definitions are still valid.

class Student {
	// 实例属性 也可以放在这
	// b = 1
	// 静态属性
	static a = 1
	// 构造函数
	constructor() {
		// 实例属性 - 也可以放在类的最顶层
		this.b = 1
	}
	// 获取函数
	get myName() {}
	// 设置函数
	set myName() {}
	// 静态方法 不会被实例继承
	static show() {}
	// 方法
	take() {}
	// 私有方法
	_take() {}
}

3.1 Class constructor

The constructor keyword of a class is constructor, which is equivalent to prototype.constructor in the prototype.
If no constructor function is written, there will be an empty constructor function by default.

class A {
	constructor() {
		this.name = '小明'
	}
}
const b = new A()
b.constructor === A.prototype.constructor // true

When using the new operator to create an instance, the constructor constructor will be called.

3.2 Class methods

class Student {
	// 方法
	take() {}
}

3.3 Class static methods

The same as the method of the class, except that the static keyword is added in front.
Static methods are not inherited by instances.
Static methods of parent classes can be inherited by subclasses.

class A {
	// 静态方法
	static show() {
		console.log('hi')
	}
}
class B extends A {}
const c = new A()
c.show() // c.show is not a function
B.show() // hi

3.4 Private methods of classes

This method is not provided in es6, but it is usually represented by an underscore in front of the method.

class A {
	// 私有方法
	_show() {
    	console.log('hi')
  	}
}

3.5 Value function (getter) and value storage function (setter)

There are set and get keywords in the class, you can Set value storage and retrieval functions for a property to intercept its access behavior.

class A {
  constructor () {
    this.name = '小米'
  }
  get name () {
    return 'get'
  }
  set name (val) {
    console.log('set' + val)
  }
}
const b = new A()
b.name // get
b.name = 123 // set123

4 Inheritance of classes

4.1 Inheritance through extends

Inheritance of classes through extends keyword.

class A {
	// 静态方法
	static show() {
    console.log('hi')
  }
}
class B extends A {}

4.2 super method

Note that if the subclass does not write a constructor constructor, it will have a constructor constructor and a super method by default. But if the constructor is explicitly written, then the super method must be added to the constructor of the subclass. After adding it, the constructor of the parent class will be called and the attributes and methods of the parent class will be obtained. If the super method is not added, a report will be reported. ReferenceError.

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
  	super() // 如果不写super，则会报ReferenceError错误
  }
}
const c = new B()

You can also pass parameters in the super method

class A {
  constructor (name) {
    this.name = name
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super('小红')
  }
}
const c = new B()
c.name // 小红

5 Others

5.1 This in the method points to

If there is this in a class method, it points to an instance of the class. But if you use it alone, an error will be reported.

class A {
  constructor () {
    this.name = '小米'
  }
  show () {
    console.log(this.name)
  }
}
const b = new A()
b.show() // 小米
const { show } = b // Cannot read property 'name' of undefined

There are two solutions:

1. Bind this in the constructor

class A {
  constructor () {
    this.name = '小米'
    this.show = this.show.bind(this)
  }
  show () {
    console.log(this.name)
  }
}

2. Use the arrow function

class A {
  constructor () {
    this.name = '小米'
    this.show = () => this
  }
  show () {
    console.log(this.name)
  }
}

5.2 Distinguish whether this class is inherited

Use the Object.getPrototypeOf function to distinguish whether this class is inherited.

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super()
  }
}
class C {}
Object.getPrototypeOf(B) === A // true 是继承的A类
Object.getPrototypeOf(B) === C // false 没有继承C类

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of Does javascript have no classes?. For more information, please follow other related articles on the PHP Chinese website!