Overview
ES6 provides a writing method that is closer to an object-oriented (note: JavaScript is essentially an object-based language) language. Class (class) is introduced as a template for objects, and classes are defined through the class keyword.
The essence of class is function.
It can be regarded as syntactic sugar, making the writing of object prototypes clearer and more like the syntax of object-oriented programming. Most of its functions can be achieved by ES5. The new class writing method only makes the writing method of object prototype clearer and more like the syntax of object-oriented programming.
Basic syntax of classes
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
// 调用方法
console.log(bobi.kill());
- The above code defines a "class", and you can see that there is a constructor method in it, which is the constructor method, and the this keyword represents the instance object. In other words, the ES5 constructor Baby corresponds to the constructor method of the ES6 Baby class.
- You can see that in addition to the construction method, the Baby class above also defines a kill method. Note that when defining the method of the class, you do not need to add the keyword function. Just put the definition in. In addition, do not add commas between methods. An error will be reported .
As you can see, the editor directly reports an error here - It should be noted that we also need to use the new method to use the class, which is different from before ES5;
var bobi = new Baby("bobi", 1);//这里正常
var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'
We need to pay attention to avoid using classes when not using the new method in the project;
4. Another thing to note is that we should not declare classes repeatedly, otherwise an error will be reported.
class MM {
}
class MM {
}
Duplicate declarations are not allowed
5. Class definitions will not be promoted, which means that the class must be defined before accessing, otherwise an error will be reported.
6. Classes are not enumerable
for (var key in Baby) {
console.log(key); // 没有任何内容打印出来
}
constructor method
The constructor method is the default method of the class and returns a reference to the array function that created this object. A class must have a constructor method. If it is not explicitly defined, an empty constructor method will be added by default.
The constructor method returns an instance object by default, but this can be changed when the constructor method returns a complex type .
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
// return 111; //返回Baby {name: "bobi", age: 1}
// return "asdfasd"; //返回Baby {name: "bobi", age: 1}
// return false; //返回Baby {name: "bobi", age: 1}
// return [1, 2] //返回[1,2]
// return {
// name: "111"
// } //返回{name:"111"}
return function fn() {
console.log(11);
} //返回函数
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
The difference between Constructor and ordinary constructor: The constructor of a class cannot be called without using new, and an error will be reported. This is a major difference from ordinary constructors, which can be executed without new.
There is a demonstration above but not here;
static keyword
Classes define static methods through the static keyword. Static methods cannot be called on instances of a class, but should be called through the class itself.
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy"
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(Baby.mama);
console.log(bobi.mama);
It can only be used when the class itself is called. The instantiated object called from new is underfined;
- A static method calls other static methods in the same class using the this keyword.
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
console.log(Baby.father);//lucy honey
- In non-static methods, you cannot directly use the this keyword to access static methods. Instead, use the class name to call;
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
console.log(Baby.mama);
console.log(this.constructor.father);
//this指向新new出来的对象 this.constructor指向类
console.log(this.constructor);
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
var boby = new Baby("boby", 1)
Summarize
This article ends here. If you have any additions, please add them in the comment area. If it is helpful, please like it~