Shulou(Shulou.com)06/01 Report--

This article mainly introduces the ES6 class class example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Class class

Classes can be defined through class, and the new class writing only makes the object prototype more clearly written, more like the syntax of object-oriented programming.

1 class declaration class

2 constructor defines constructor initialization

3 extends inherits the parent class

4 super calls the parent constructor

5 static defines static methods and properties

6 parent class methods can be overridden

Es5's method of instantiating an object through a constructor

/ / function People (name, sex) {this.name = name; this.sex = sex;} / / this height is added to a function object, not an instance object. This attribute is called static member People.height = '180; People.prototype.height1 =' 100'. / / add method People.prototype.play = function () {console.log ('playing basketball');} let zn = new People ('zhangning',' male'); zn.play (); / / output basketball playing console.log (zn); console.log (zn.height); / / output undefined console.log (zn.height1) / / output 100, which must be added through prototype before adding to the instance object

Implemented through class

Class People {/ / static attribute static. The method annotated by static belongs to the class, not the instance object static height = '100; static change () {console.log (' I can change the world') } / / the constructor name cannot be changed (the constructor method on the instance object is automatically executed when using new People) constructor (name, sex) {this.name = name; this.sex = sex } / / add method must use this syntax, cannot use the full form of es5 (play: function () {} this form is not supported, must use play () form) / / member attribute play () {console.log ('playing basketball');}} let zn = new People ('zhangning',' male'); console.log (zn) Console.log (zn.height); / / the method annotated by undefined static belongs to the class, not to the instance object console.log (People.height); / / 100

Using the es5 constructor to implement inheritance

/ / for example, chinese inherits the People attribute function People (name, sex) {this.name = name; this.sex = sex;} People.prototype.play = function () {console.log ('hit LOL') } function Student (name, sex, like, height) {/ / change the this value through the call method. This points to this in chinese, that is, an instance object People.call (this, name, sex) of chinese; this.like = like; this.height = height;} / / sets the subset constructor prototype Student.prototype = new People / / then there will be a parent method Student.prototype.constructor = Student;// to make a correction. Without this line of code, it doesn't matter / / declare the subclass method Student.prototype.photo = function () {console.log ('go to take a picture');} / / instantiate const zn = new Student ('zhangning',' male', 'playing basketball', '187'); console.log (zn)

Using es6 class classes to implement inheritance and parent method rewriting

/ / declare parent class class People {/ / parent class constructor constructor (name, sex) {this.name = name; this.sex = sex;} / / parent class member attribute play () {console.log ('hit LOL') }} / / declare that the subclass uses extends to inherit the parent class class Student extends People {/ / constructor constructor (name, sex, like, height) {super (name, sex); / / super is the constructor constructor of the parent class, so call this.like = like; this.height = height;} photo () {console.log ('go photo') } / / A pair of play methods in the parent class are overridden. The subclass cannot call the parent class method with the same name, play () {/ / super (); no, super () cannot call the parent class method with the same name in the ordinary member method, so it will report an error and can only completely rewrite console.log ('I can play LOL and basketball') }} const zn = new Student ('zhangning',' male', 'playing basketball', '187'); console.log (zn)

Getter and setter settings in class

Class People {get like () {return 'playing basketball';} set like (newVal) {/ / change like console.log ('change like value') by passing newVal value;}} let p = new People (); console.log (p.like) / / output basketball p.like = 'LOL' / / then through the set like operation, thank you for reading this article carefully. I hope the article "sample Analysis of class classes in ES6" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.