The class class is es6 syntax and is a new feature of es6. In ES6, the class keyword was introduced to quickly define a "class", but the essence of a class is function; it can be regarded as a syntactic sugar, making the writing of object prototypes clearer and more like the syntax of object-oriented programming. Use class to define the class method "class Person{//class declaration}" or "const Person=class{//class expression}".

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

The class class is es6 syntax and is a new feature of es6.

In ES6, the class keyword was introduced to quickly define "classes".

In JS, the essence of "class" is function, which can be regarded as a syntactic sugar, making the writing method of object prototype more concise and clear, more like the syntax of object-oriented programming.

Understanding class definition class

We will find that creating a class according to the previous constructor form is not only too similar to writing an ordinary function , and the code is not easy to understand.

In the new standard of ES6 (ECMAScript2015), the class keyword is used to directly define the class; but the class is still essentially the syntax sugar of the constructor and prototype chain mentioned earlier. ;So learning the previous constructors and prototype chains will help us understand the concept and inheritance relationship of classes;

So, how to use class to define a class? –You can use two ways to declare a class: class declaration and class expression;

class?Person{
????//類聲明
}

const?Person=class{
????//類表達式
}

Similarities and differences between classes and constructors

Let’s Study some characteristics of the class: you will find that it is actually consistent with the characteristics of our constructor;

console.log(Person.prototype)
console.log(Person.prototype.__proto__)//Object?null?
console.log(Person.prototype.constructor)//Person
console.log(typeof?Person)?//?function

var?p?=?new?Person()
console.log(p.__proto__?===?Person.prototype)?//?true

Constructor of the class

If we want to When creating an object, you pass some parameters to the class. What should you do at this time?

• Each class can have its own constructor (method), The name of this method is a fixed constructor;
• When we operate through new symbol, when operating a class, the constructor constructor of this class will be called;
• Each class can only have one constructor, if it contains multiple constructors, an exception will be thrown ;

When we operate a class through the new keyword, this constructor function will be called and the following operations will be performed:

• 1. Create a new one in memory Object (empty object);
• 2. The [[prototype]] attribute inside this object will be assigned to the prototype attribute of the class;
• 3. This inside the constructor will point to The new object created;
• 4. Execute the internal code of the constructor (function body code);
• 5. If the constructor does not return a non-null object, the new object created is returned ;

Instance method of the class

The properties we defined above are all placed directly on this, which means that it is placed on the created In the new object:

We said before that for instance methods, we hope to put them on the prototype so that they can be shared by multiple instances; Defined in the class;

class?Person?{
??constructor(name,?age)?{
????this.name?=?name
????this.age?=?age
????this._address?=?"廣州市"
??}

??//?普通的實例方法
??//?創(chuàng)建出來的對象進行訪問
??//?var?p?=?new?Person()
??//?p.eating()
??eating()?{
????console.log(this.name?+?"?eating~")
??}

??running()?{
????console.log(this.name?+?"?running~")
??}
}

Accessor method of the class

When we talked about the property descriptor of the object before, we mentioned that the object can add setter and getter functions. Then classes are also possible:

class?Person?{
??constructor(name,?age)?{
????this.name?=?name
????this.age?=?age
????this._address?=?"廣州市"
??}

??//?類的訪問器方法
??get?address()?{
????console.log("攔截訪問操作")
????return?this._address
??}

??set?address(newAddress)?{
????console.log("攔截設置操作")
????this._address?=?newAddress
??}
}

Static methods of classes

Static methods are usually used to define methods that are executed directly using the class. There is no need for an instance of the class. Use the static keyword to define:

class?Person?{
??constructor(name,?age)?{
????this.name?=?name
????this.age?=?age
????this._address?=?"廣州市"
??}
??//?類的靜態(tài)方法(類方法)
??//?Person.createPerson()
??static?randomPerson()?{
????var?nameIndex?=?Math.floor(Math.random()?*?names.length)
????var?name?=?names[nameIndex]
????var?age?=?Math.floor(Math.random()?*?100)
????return?new?Person(name,?age)
??}
}

Inheritance of ES6 classes - extends

We have spent a lot of time discussing the implementation of inheritance in ES5. Although a relatively satisfactory inheritance mechanism was finally achieved, the process was still very cumbersome.

In ES6, the extends keyword is added, which can easily help us implement inheritance:

class?Person{
????
}

class?Student?extends?Person{
????
}

super keyword

We will find In the above code, I used a super keyword. This super keyword has different ways of use:

Note: Before using this in the constructor of a sub (derived) class or returning the default object, you must first pass super Call the constructor of the parent class!

There are three places where super can be used: constructors of subclasses, instance methods, and static methods;

##Inherit built-in classes

We can also let our classes inherit from built-in classes, such as Array:

class?HYArray?extends?Array?{
??firstItem()?{
????return?this[0]
??}

??lastItem()?{
????return?this[this.length-1]
??}
}

var?arr?=?new?HYArray(1,?2,?3)
console.log(arr.firstItem())
console.log(arr.lastItem())

Class mixin

JavaScript classes only support single inheritance: that is, there can only be one parent class

. So when we need to add more similar functions to a class during development, how should we do it? At this time we can use mixin;

JavaScript中的多態(tài)

面向?qū)ο蟮娜筇匦裕悍庋b、繼承、多態(tài)。

前面兩個我們都已經(jīng)詳細解析過了，接下來我們討論一下JavaScript的多態(tài)。JavaScript有多態(tài)嗎？

維基百科對多態(tài)的定義：多態(tài)（英語：polymorphism）指為不同數(shù)據(jù)類型的實體提供統(tǒng)一的接口，或使用一

個單一的符號來表示多個不同的類型。

非常的抽象，個人的總結(jié)：不同的數(shù)據(jù)類型進行同一個操作，表現(xiàn)出不同的行為，就是多態(tài)的體現(xiàn)。

那么從上面的定義來看，JavaScript是一定存在多態(tài)的。

//?多態(tài):?當對不同的數(shù)據(jù)類型執(zhí)行同一個操作時,?如果表現(xiàn)出來的行為(形態(tài))不一樣,?那么就是多態(tài)的體現(xiàn).
function?calcArea(foo)?{
??console.log(foo.getArea())
}

var?obj1?=?{
??name:?"why",
??getArea:?function()?{
????return?1000
??}
}

class?Person?{
??getArea()?{
????return?100
??}
}

var?p?=?new?Person()

calcArea(obj1)
calcArea(p)

//?也是多態(tài)的體現(xiàn)
function?sum(m,?n)?{
??return?m?+?n
}

sum(20,?30)
sum("abc",?"cba")

//?傳統(tǒng)的面向?qū)ο蠖鄳B(tài)是有三個前提:
//?1>?必須有繼承(是多態(tài)的前提)
//?2>?必須有重寫(子類重寫父類的方法)
//?3>?必須有父類引用指向子類對象

//?Shape形狀
class?Shape?{
??getArea()?{}
}

class?Rectangle?extends?Shape?{
??getArea()?{
????return?100
??}
}

class?Circle?extends?Shape?{
??getArea()?{
????return?200
??}
}

var?r?=?new?Rectangle()
var?c?=?new?Circle()

//?多態(tài):?當對不同的數(shù)據(jù)類型執(zhí)行同一個操作時,?如果表現(xiàn)出來的行為(形態(tài))不一樣,?那么就是多態(tài)的體現(xiàn).
function?calcArea(shape:?Shape)?{
??console.log(shape.getArea())
}

calcArea(r)
calcArea(c)

export?{}

【相關推薦：javascript視頻教程、編程視頻】

The above is the detailed content of Is the class class an es6 syntax?. For more information, please follow other related articles on the PHP Chinese website!