class
After ES6, the concept of classes was introduced. It’s written in a way that’s very similar to Java object-oriented. Make the front end better at writing object-oriented code. When we were writing before, we had to write it in the form of a prototype chain, but there’s no such thing as a class. But classes are actually implemented in the form of prototype chains. No more nonsense, let’s go to write, you know about it.
Class
class Person {
say () {
console.log('speak')}}let person = new Person()
person.__proto__ // {constructor: ƒ, say: ƒ}
Copy the code
We write a class with a say method in it, and we instantiate that method, and then we use that instantiated object to find its prototype object. Discover that its prototype object is the Person class.
extend
Class can be inherited through the extend keyword, which is much more intuitive than the way we used the prototype chain.
class Parent {
constructor () {
console.log('Parent')}}class Child extends Parent{
constructor () {
super(a)console.log('Child')}}let child = new Child()
// Parent
// Child
Object.is(Child.__proto__, Parent) // true
Copy the code
There’s one thing to note here. After inheriting Parent, you must write super() inside constructor to call the constructor of the Parent class, otherwise an error will be reported. Object.is(child-.__proto__, Parent) returns true, which proves that the class inheritance is the same as that of the prototype chain. Class is just a grammatical sugar.
static
Class uses static to describe static properties, just like in any other language. The specific use
class Scholl {
constructor (schollName) {
this.schollName = schollName
}
static createScholl (schollName) {
let scholl = new Scholl(schollName)
return scholl
}
static grade1 = 'First grade'
static grade2 = 'Second grade'
static grade3 = 'Third grade'
static grade4 = 'Fourth grade'
static grade5 = 'Fifth grade'
static grade6 = 'Sixth form'
static grade7 = 'Seventh grade'
static grade8 = 'Eighth grade'
static grade9 = 'Grade nine'
}
Scholl.createScholl('Beijing No.1 Middle School')
Scholl.grade1 / / in grade one
Copy the code
We could write a school class that has one static method and nine static properties. Static is called static because it doesn’t need to be instantiated, it can be called by the class name. For example, if we don’t want to create a new object every time we create an instance, we can write a method called createScholl in the class to create the instance for us. Static methods are usually Helper methods that allow us to do something that we repeatedly need to do to ease operations. Static properties are variables that can be shared. For example, in grade1, all Chinese schools have nine-year compulsory education. That’s what we can write in the static properties.
get&set
It is used to get and set the value of the property, equivalent to a memory property, to provide a convenient way to read and write the internal property. The specific use
class Person {
constructor (name, age) {
this._age = age
this._name = name
}
get age () {
if (this._age >= 18) {
alert('Adult')}else {
alert('Minor')}return this._age
}
set age (val) {
this._age = val
}
}
let person = new Person('little red'.18)
person.age // 18, alert(' adult ')
person.age = 16
person._age / / 16
person.age // 16, alert(' minor ')
Copy the code
We can assign and read values when we instantiate an object to read/write as usual. Write a method in the class using get and set plus the property name, and operate on the values to be read/written in the body of the method. And if you’re familiar with vue, I think you can think of it as the computational properties in vue.
conclusion
Just to review, we’ve been reviewing Class today, what it looks like, how it relates to the prototype chain, how we can inherit classes, how we can write static properties and methods, how we can use static properties and methods, and finally, how we can use get and set in classes. So see you tomorrow!