The concept for the class to do the background should be very familiar with, JavaScript classes for a lot of other object-oriented language differences, can only use the constructor to generate an instance object. To access the traditional language, ES6 introduced a class like this concept, defined by the class keyword category.
Class is actually a syntactic sugar, almost all functions can be achieved in other ways, just to make the code more clear, like object-oriented programming.
grammar:
class User{
constructor(){ console.log('默认调用'); } eat(){ console.log('eat方法'); } } var user = new User();//默认调用 user.eat()//eat方法 Note that class methods can not be separated by commas, or will be error between the function can not add keywords and methods. All methods are defined in the prototype class method of the class. In the instance of the class it is to call a method on the prototype method call.
class User{
eat(){} } Equivalent to:
function User() {} User.prototype.eat = function () {} Internal class defines methods are not enumerable, which is not the same with ES5.
Constructor method:
This is the default method of generating a new instance of an object when called automatically by, for each class will have, if not defined explicitly, automatically adds a null constructor. Default returns an instance of an object, which is this. You can also return the other object, which is the same as with the constructor. Class must use the new call, and we can as a constructor method called directly.
And ES5 as attribute instance unless explicitly defined in and of itself (i.e., this object is defined in a), or are defined on a prototype (i.e. defined in the class), all instances of a class share the prototype object, and therefore one instance objects through prototype proto rewrote the prototype, will change all instances of an object, not recommended for all instances of proto rewrite the prototype.
The same, getter function and a setter function can also be used in the keywords get and set inside the class:
class User{
constructor(){ this.name = 'wade'; } get eat(){ return '这是get'; } set eat(val){ console.log('set调用了'); } } var user = new User(); user.eat = 3//set调用了 console.log(user.eat);//这是get expression:
Properties can use [] expression, this is the same with objects, classes can also be directly defined by the expression:
var val = 'my'
var User = class Muser{ [val](){ } } Muser is available only within the class, class external use User. If the internal is not used, or may be omitted Muser class immediately execute:
var User = class {} var user = new class{}() To note, the default class is strict mode, but also enhance the variable does not exist, the attribute name is returned after the class name of the class keyword, you can also use Gernerator method. Internal default instance of this class methods directed class, using separate out error.
In front of the class with the static keyword method, this method can not be inherited instance, by calling the class, this method is called static method:
class User{
static eat(){ console.log('eat'); } }var user = new User(); console.log(user.eat());//报错 User.eat()//eat If the static method contains this keyword, this means that this class instead of an instance:
class User{
static eat() { this.say(); } static say() { console.log('hello'); } say() { console.log('world'); } } User.eat() // hello Static methods and non-static method can also duplicate names. Static methods can be inherited by subclasses.
In addition to defining instance properties in the constructor inside, but also directly defined at the top level:
class User1{
constructor(){ this.name = 'wade'; } } class User2{ name = 'kobe'; } console.log(new User1().name);//wade console.log(new User2().name);//kobe Class property itself is called a static class property, Class.propName, is not defined properties on an object instance of this. Internal Class static methods not only static properties, is now only one writing:
class User{};User.prop = 1;
But there is a proposal to use static definition:
class User{
static prop = 1; }; Organizational principles and declarations from the code point of view, the wording is undoubtedly better.
We all know the code package private property and private methods is very important, but ES6 the class is not being offered. Alternative solutions such as distinguishing name, module for removal method, and the like with a variable symbol. But not very good. Now there is a proposal to use # to provide private property:
class User{
#prop = 1;
#eat(){} }; Can only be used internally, externally accessible on the error. Private property can also be set getter and setter methods. Private attributes from the this reference is not limited to, as long as the interior of the class, instance can be referenced private attributes:
class User{
#prop = 1;
static eat(user){ console.log(user.#prop); } }; User.eat(new User());//1 new instance of the object is to generate a command from the constructor. ES6 introduction of a new command new.target property, which is generally used in the constructor returns the new command to the effect that the constructor. If the constructor is not a new command or by Reflect.construct () call, new.target will return undefined, so this property can be used to determine how the constructor is called:
function User() { console.log(new.target === User);//true console.log(new.target !== undefined);//true } var user = new User(); If it is not new:
function User() { console.log(new.target === User);//false console.log(new.target !== undefined);//false } User(); Class internal call new.target, returns the current Class:
class User{
constructor(){ console.log(new.target === User)//true } } new User(); When the subclass inherits the parent class, new.target will return a subclass. Using this feature, you can write can not be used independently, after class must inherit can use.