Chapter IX JavaScript in class
Near class structure in Section 1 ES5
ES5 and earlier versions is no concept of class, so used a similar ideas to create a custom type: first create a constructor and then define another method and assigned to the prototype constructor. E.g:
1 function PersonType(name) 2 { 3 this.name = name; 4 } 5 6 PersonType.prototype.sayName = function() { 7 console.log(this.name); 8 } 9 10 var person = new PersonType("zxx"); 11 person.sayName(); // "zxx" 12 13 console.log(person instanceof PersonType); //true 14 console.log(person instanceof Object); //true
The first two classes of statement
1. In ES6, you should declare a class, to write the class keyword, then the keyword class . E.g:
1 class PersonClass { 2 //等价于PersonType构造函数 3 constructor(name) { 4 this.name = name; 5 } 6 7 //等价于PersonType.prototype.sayName 8 sayName() { 9 console.log(this.name); 10 } 11 } 12 13 let person = new PersonClass("zxx"); 14 person.sayName(); //"zxx" 15 16 console.log(person instanceof PersonClass); //true 17 console.log(person instanceof Object); //true 18 console.log( typeof PersonClass); //"function" 19 console.log( typeof PersonClass.prototype.sayName); //"function"
2. Own property
Is its own property attribute instance, do not appear on the prototype, or can only be created in the constructor for class in this example is a name of its own property.
3. class with custom type differences:
1) can be lifted function declaration, Class declarations and let the similar, can not be lifted;
2) all the code in the class declaration under stringent operating mode;
3) in the class, all the methods are not enumerated;
Internal method 4) for each class, there is a named [[Construct]] by keyword new call to those without [[Construct]] method causes the program back to throw an error;
Constructors 5) using means other than new class call causes the program to throw an error;
6) In the class, the class name to modify the program will lead to error.
The first three classes expression
: Classes and functions have two forms exist declaration forms and forms of expression . Declaratively functions and classes defined by the keyword (respectively function, class), immediately followed by an identifier. Expression and function of the form class is similar, but do not need the added keyword identifier. For example:
1 let PersonClass = class { 2 //等价于PersonType构造函数 3 constructor(name) { 4 this.name = name; 5 } 6 7 //等价于PersonType.prototype.sayName 8 sayName() { 9 console.log(this.name); 10 } 11 } 12 13 let person = new PersonClass("zxx"); 14 person.sayName(); //"zxx" 15 16 console.log(person instanceof PersonClass); //true 17 console.log(person instanceof Object); //true 18 console.log( typeof PersonClass); //"function" 19 console.log( typeof PersonClass.prototype.sayName); //"function"
Section 4 as first-class citizens of the class
1. What is the first-class citizens?
Refers to a first-class citizen can pass function can return from the function, and can be assigned to the variable.
2. JavaScript in functions, classes are first-class citizens .
Section 5 Access Properties
Although you should create your own property in class constructor, but the class also supports access to properties defined directly on the prototype. When you create a getter, followed by a space and require corresponding identifier after the keyword get; when you create a setter, just need to get getter keyword is set to replace.
Section 6 computable member name
1. Access class methods and properties support the use of the name may be calculated. Enclosed in square brackets with an expression that can be calculated using the name . E.g:
1 let methodName = "sayName"; 2 3 class PersonClass { 4 constructor(name) { 5 this.name = name; 6 } 7 8 [methodName]() { 9 console.log(this.name); 10 } 11 }; 12 13 let me = new PersonClass("zxx"); 14 me.sayName(); // "zxx"
2. Similarly, access properties can also be calculated using the name. E.g:
1 let propertyName = "html"; 2 3 class CustomHTMLElement { 4 constructor(element) { 5 this.element = element; 6 } 7 8 get [propertyName]() { 9 return this.element.innerHTML; 10 } 11 12 set [propertyName]() { 13 this.element.innerHTML = value; 14 } 15 }
Method generator section 7
In a class, it may be replaced with "*" to define the generator. If the class is used to represent a set of values, then it is defined as a default iterator would be more useful.
Section 8 static member
ES5, ES6 grammar in both static members. Here to talk about them separately:
1. ES5 by directly adding the class constructor method to simulate static members. E.g:
1 function PersonType(name) { 2 this.name = name; 3 } 4 5 //静态方法 6 PersonType.create = function(name) { 7 return new PersonType(name); 8 }; 9 10 //实例方法 11 PersonType.prototype.sayName = function() { 12 console.log(this.name); 13 }; 14 15 var person = PersonType.create("zxx");
2. In the ES6, simplifying the creation of static members syntax. Using static formal comments (static) before you can access the methods or properties names. E.g:
. 1 class PersonClass { 2 // equivalent PersonType constructor . 3 constructor (name) { . 4 the this .name = name; . 5 } . 6 . 7 // equivalent to PerosonType.prototype.sayName . 8 sayName () { . 9 the console.log ( the this .name); 10 } . 11 12 is // equivalent PersonType.create () 13 is static Create (name) { 14 return new new PersonClass (name); 15 } 16 } . 17 18 is let person = PersonClass.create("zxx");
3. Note:
1) All access methods and properties can be used class keyword static class definition, the only limitation is not used to define the static constructor method.
2) can not access the static member in the instance, static members must be accessed directly in the class.
Section 9 of inheritance and derived classes
1. Basic Concepts
1) Use the extends keyword to specify the class inherits function.
2) () constructor method to access the base class by super.
3) the class inherits from another class is called a derived class.
4) If you do not use a constructor, then when you create a new instance of the class will automatically call super () and pass all the parameters.
5) Use super () Note:
a. can be used only in a constructor of a derived class super ()
b. In the constructor, before this visit be sure to call super (), which is responsible for initializing this
c. If you do not want to call super (), the only way is to make the class constructor returns an object.
2. Class Method shield
The method of the derived class always override methods in the base class of the same name. If you still want to use the method in the base class, it can be implemented by the super keyword.
3. static members inherited
After a derived class inherits the base class, the base class's static members can also be used directly in a derived class.
4. derived from the expression of class
1) As long as the expression it can be resolved to a function, and having a [[Construct]] property and prototype, it can be derived using extends.
2) extends the powerful features make class can inherit from any type of expression, and may be more than one expression, so you can dynamically determine the inheritance of the target class, create different inherited methods. For example:
1 function Rectangle(length, width) 2 { 3 this.length = length; 4 this.width = width; 5 } 6 7 Rectangle.prototype.getArea = function() { 8 return this.length * this.width; 9 } 10 11 function getBase() 12 { 13 return Rectangle; 14 } 15 16 class Square extends getBase() { 17 constructor(length) { 18 super(length * length); 19 } 20 } 21 22 var x = new Square(3); 23 24 console.log(x.getArea()); //9 25 console.log(x instanceof Rectangle); //true
5. Built-inheritance object.
In ES5, you can not create an array of their own special way through inheritance. The ES6 class syntax goal is to support inheritance of built-in objects. Specifically: the value of this first by creating a base class (Array), and the derived class's constructor (MyArray) this value is modified. For example:
1 class MyArray extends Array { 2 //空 3 } 4 5 var colors = new MyArray(); 6 colors[0] = "red"; 7 8 console.log(colors.length); //1 9 10 colors.length = 0; 11 console.log(colors[0]) // undefined
6. Symbol.species property
Inherited built-in objects is that of a utility, the original built-in objects are returned in the instance of the method itself will automatically return instances of derived classes.
Symbol.species may be defined as when the type of the derived class to return instance, should the value returned by.
Section 10 used new.target class constructor
Class constructor must be called with the new keyword, so always defined new.target property in the constructor class. But sometimes a little bit different. Each constructor can change their behavior according to their own way is called. For example, you can create an abstract base class (can not be directly instantiated) by new.target, like this:
1 // abstract base class 2 class {the Shape . 3 constructor () { . 4 IF ( new new .target === the Shape) { . 5 the throw new new Error ( "This class can not be directly instantiated" ); 6 } 7 } 8 } 9 10 class the extends the Shape {the Rectangle . 11 constructor (length, width) { 12 is Super (); 13 is the this .length = length; 14 the this .width = width; 15 } 16 } . 17 18 is var X = new new the Shape (); // throw errors . 19 20 is var Y = new new the Rectangle (3,4-); // no error 21 is the console.log (Y the instanceof the Shape); // to true
(End of this section)