Like other object-oriented programming languages, ES6 formally defines the class class and extend inherits syntactic sugar, and supports static, derivative, abstract, iterative, singleton, etc., and has derived many interesting uses based on the new features of ES6.
1. Basic definition of class
Basically all object-oriented languages support class encapsulation and inheritance, so what is a class?
Classes are the basis of object-oriented programming, includingData encapsulation, data operations, and functions for passing messages. An instance of a class is called an object.
Previously, ES5 simulated classes through functions as follows:
// Constructorfunction Person(name) {
= name;
}
// Method on the prototype = function(){
();
};
// new onevar friend = new Person("Jenny");
(); // Jenny
(friend instanceof Person); // true
(friend instanceof Object); // true
To sum up, the idea of defining a class is as follows:
1. The constructor is required to encapsulate the data
2. Add method operation data to the prototype,
3. Create an instance through New
ES6 uses the class keyword to define a class. This class has a special method name [[Construct]] to define the constructor. [[Construct]] is called when creating an instance in new. The example is as follows:
/*ES6*/
// equivalent to let Person = class {class Person {
// Constructor constructor(name) {
= name;
}
// Equivalent to sayName() {
();
}
}
(typeof Person); // function
(typeof ); // function
let friend = new Person("Jenny");
(); // Jenny
(friend instanceof Person); // true
(friend instanceof Object); // true
In the example above, the class defined by class seems to be no different from the customized function simulation class, but there are still big differences in essence:
- Function declarations can be promoted, but class declarations are similar to let and cannot be promoted;
- The class declaration automatically runs in strict mode, "use strict";
- All methods in the class are not enumerable, enumerable is false.
2. More flexible categories
Like functions, classes are first-class citizens of JavaScript (can pass functions, return from functions, and assign values), and notice that classes and object literals have more similarities, which can extend the definition and use of classes for more flexible definition and use.
2.1 Own accessor properties
The attributes of the object include data attributes and access attributes. The accessor attributes can also be defined through the get and set keywords in the class:
class Person {
constructor(name) {
= name;
}
get value () {
return +
}
set value (num) {
= num
}
}
let friend = new Person("Jenny");
// The call is setter = 18
// Getter is called() // Jenny18
2.2 Computable member names
Similar to the calculating property name of ES6 object literal extension, the class can also use [expression] to define computable member names, including method and accessor properties in the class:
let methodName = 'sayName'
class Person {
constructor(name) {
= name;
}
[methodName + 'Default']() {
();
}
get [methodName]() {
return
}
set [methodName](str) {
= str
}
}
let friend = new Person("Jenny");
// method(); // Jenny
// Accessorial properties = 'lee'
() // leeIf you want to be familiar with the new features of the object, please refer to:【ES6】New functions and deconstruction assignment of objects
2.3 Defining the default iterator
Commonly used collection objects (arrays, Set/Map collections) and strings in ES6 are iterable objects. If the class is used to represent the values of these iterable objects, it is more useful to define a default iterator.
ES6 defines the default iterator by adding a generator to the attribute:
class Person {
constructor(name) {
= name;
}
*[]() {
for (let item of ){
yield item
}
}
}
var abbrName = new Person(new Set(['j', 'j', 'e', 'e', 'n', 'y', 'y', 'y',]))
for (let x of abbrName) {
(x); // j e n y
}
(...abbrName) // j e n y
After defining the default iterator, you can use iterative functions such as for-of loops and expansion operators (...).
For those who are confused about the above iterator content, please refer to:【ES6】Iterator and iterable object
2.4 Class as parameters
As a "first class citizen", a class can be passed into a function when the parameter is used, and of course it can also be returned from the function:
function createClass(className, val) {
return new className(val)
}
let person = createClass(Person,'Jenny')
(person) // Person { name: 'Jenny' }
(typeof person) // object
2.5 Creating a single case
Use class syntax to create singletons immediately call class expressions through new:
let singleton = new class {
constructor(name) {
= name;
}
}('Jenny')
() // Jenny
Here, create anonymous class expression first, then new calls this class expression and executes immediately through brackets. Singletons created by this class syntax will not expose the reference of the class in the scope.
III. Class inheritance
Review how to implement inheritance before ES6? Common methods are through prototype chains, constructors, and combination inheritance.
ES6 classes use the familiar extends keyword to specify the functions inherited by the class, and can access the constructor of the parent class through the surpe() method.
For example, inherit a Person class:
class Friend extends Person {
constructor(name, phone){
super(name)
= phone
}
}
let myfriend = new Friend('lee',2233)
(myfriend) // Friend { name: 'lee', phone: 2233 }
Friend inherits Person, terminology refers to Person as the base class and Friend as the derived class.
It should be noted that surpe() can only be used in derived classes, and it is responsible for initializing this, so you must use surpe() before using this in derived classes.
3.1 Inheriting built-in objects
ES6 class inheritance can inherit built-in objects (Array, Set, Map, etc.), and after inheritance, you can have all built-in functions of the base class. For example:
class MyArray extends Array {
}
let arr = new MyArray(1, 2, 3, 4),
subarr = (1, 3)
() // 4
(arr instanceof MyArray) // true
(arr instanceof Array) // true
(subarr instanceof MyArray) // true
Note that in the above example, not only arr is an instance of the derived class MyArray, but also a instance of the derived class MyArray. The practicality of built-in object inheritance is to change the type of the returned object.
Behind the browser engine is the [] attribute to implement this behavior. It is used to return the static accessor attributes of the function. The built-in object defines the [] attributes such as Array, ArrayBuffer, Set, Map, Promise, RegExp, and Typed arrays.
3.2 Classes that inherit expressions
Currently extends can inherit classes and built-in objects, but it has a more powerful function to export classes from expressions!
This expression requires that it can be parsed into a function and has the [[Construct]] attribute and prototype, as shown below:
function Sup(val) {
= val
}
= function () {
return 'hello' +
}
class Derived extends Sup {
constructor(val) {
super(val)
}
}
let der = new Derived('world')
(der) // Derived { value: 'world' }
(()) // helloworld
3.3 Abstract classes that can only be inherited
ES6 introduces meta attributes to determine whether the function is called through the new keyword. The constructor of a class can also be determined by determining how the class is called.
It can be created by creating abstract classes (classes that cannot be instantiated), for example:
class Abstract {
constructor(){
if( === Abstract) {
throw new Error('Abstract class (cannot be instantiated directly)')
}
}
}
class Instantiable extends Abstract {
constructor() {
super()
}
}
// let abs = new Abstract() // Error: Abstract class (cannot be instantiated directly) let abs = new Instantiable()
(abs instanceof Abstract) // trueAlthough instances cannot be created directly using Abstract abstract classes, other classes can be derived as base classes.
IV. Static members of the class
ES6 declares static members or methods using the static keyword. Static can be used before the class's method or accessor attribute, the only limitation is that it cannot be used in constructors.
The role of static members is to privatize certain class members and cannot be accessed in instances, and must be accessed directly in the class.
class Person {
constructor(name) {
= name;
}
static create(name) {
return new Person(name);
}
}
let beauty = ("Jenny");
// ('lee') // TypeError
If the base class has static members, these static members can also be used in derived classes.
For example, use Person in the example above as the base class, derive the Friend class and use the static method of the base class to create():
class Friend extends Person {
constructor(name){
super(name)
}
}
var friend = ('lee')
(friend instanceof Person) // true
(friend instanceof Friend) // false
It can be seen that derived classes can still use the static methods of the base class.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.