ES6 in the class is a prototype-based inheritance syntax sugar, it provides a more close to the traditional written language, the introduction of class (class) concept as a template object. By the class keyword to define the class, but the class by doing the work, es5 also can be done only through the class, we can make our work easier.
In our JavaScript language, the traditional way to generate an instance of an object by the constructor, as follows:
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2);
But when we ES6class After completing the above command into the code following this
Point {class constructor (X, Y) { the this .x = X; the this .y = Y; } toString () { return '(' + the this .x + ',' + the this .y + ')' ; } }
// equivalent to, ES5 wording
Point. = {the prototype
constructor () {},
toString () {},
}
// Note: all the methods defined in the class are the classprototypeattributes above.
The new classwording to make the wording clearer prototype objects, like object-oriented programming syntax. Also function Statement class does not enhance the function declaration.
First, create a class and instantiate
constructorIs the default class method, by newgenerating a command object instance, the method is automatically invoked. There must be a class constructormethod, if no explicit definition, an empty constructormethod will be added by default.
Star {class constructor (the uname, Age) { the this .uname = the uname; // instance this.uname point created the this .age = Age;
this.btn = document.querySelector ( 'Button');
this.btn.onclick = this.say;
// this.btn.onclick = this.say (); call immediately on behalf of
}
Say () {
the console.log (this.uname); // this point because undefined BTN.
} } Var LDH = new new Star ( 'Andy', 18 is ); the console.log (LDH);
It is worth noting that:
1. Create a class by class keyword, class name we still used to define capitalized
2. class inside the constructor function, you can accept parameters passed to it, and returns an instance of an object
3. constructor function as long as the new generation instance, will automatic call this function, if you do not write will automatically call
4. create a class, the class name back without parentheses; generating instance, add parentheses behind the class, the constructor does not need to add function
The variable class does not improve, it must define a class, the class can be instantiated by an object;
6. The common properties and methods of the class which must be added to use this
Second, adding a total class method
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
const square = new Polygon(20, 20);
const sss = new Polygon(10,250);
console.log(square._proto_ === sss._proto_); //true
console.log(square.area); //400
console.log(sss.area); //2500
It is worth noting:
1. We do not need all the functions inside the class to write function
2. The need to add more functions between commas
3. The attribute instance unless defined on itself (i.e., this object), or are defined on a prototype display.
Third, the class inheritance
Examples of the class corresponding to the prototype, all methods defined in the class, instance will be inherited. extends achieve.
The basic format of the statement:
class Father{
//...
}
class Son extends Father{
}
With a better understanding of the following simple example
// case a
class Father { constructor () { } say () { return 'I father'; } } class the extends Father Son { say () {
the console.log ( 'I am the son');
} } var Son = new new son (); son.say (); // I am the son
// Case Two super keyword to access and function calls on the parent object, you can call the parent class constructor through, you can call a normal function of the parent class
Father {class
constructor (X, Y) {
in this.x = X;
this.y from Y =
}
SUM () {
the console.log (in this.x this.y from +);
}
}
class the extends Father Son {
constructor (X, Y) {
Super (X, Y); // call the constructor of the superclass
}
}
var new new Son = Son (1,2);
son.sum ();
// Case III subclass inherits the parent class method, the method also expand their
class Father {
constructor (X, Y) {
in this.x = X;
this.y from Y =
}
SUM () {
the console.log (in this.x this.y from +);
}
}
class the extends father son {
constructor (X, Y) {
Super (X, Y); // call the constructor of the superclass
// super subclass must be called before the this
in this.x = X;
this.y from Y =;
}
Subtract () {
the console.log (in this.x - this.y from);
}
}
var new new Son = Son (5,2);
son.subtract ();
son.sum () ;
// son (5,2) first argument to the constructor subclass, get their first subtractor, and then passed through the super structure of the parent class, method inheritance
Note:
1. The subclass must call the super method in the constructor method. Otherwise it will error when creating a new instance.
2. super subclasses in the constructor, this must be placed in front of
Fourth, the class inside this points to a problem
1. In the constructor inside of this points to an instance of an object created
2. The function of this method which point the caller
Verify the following
var that;
var that2;
class Star{
constructor(uname){
that=this;
}
dance(){
that2=this;
console.log(this);
}
}
var zxy=new Star('张学友');
console.log(that ===zxy);//true
zxy.dance();
console.log(that2 ===zxy);//true