1. Class
In the javascript language, the constructor is used to generate the instance object; ES6 provides the concept of class as a template for objects. Define a class. Through the class keyword, the class of ES6 can be regarded as another way to write the constructor.
How does ES5 inherit
Instance uses properties and methods
1. Find properties or methods from the instance object itself
2. If there is no instance, find it from the prototype object of the constructor
3. If not, find it from the prototype object of the parent constructor
function Person(){} Person.prototype={}; var p1=new Person(); p1.sayName=function(){}; p1.sayName(); //p1 calls sayName. It accesses itself. It does not access the constructor prototype object. The constructor prototype object does not find the parent constructor
1. Classic inheritance
function Animal(type,age,weight,length){ this.type=type; this.age=age; this.weight=weight; this.length=length } Animal.prototype={ constructor:Animal, sayType:function(){ console.log(this.type) } } function Dog(type,age,weight,length,name,color){ // Classic inheritance is also called constructor inheritance Animal.call(this,type,age,weight,length); this.name=name; this.color=color; }
After processing the constructor, process the prototype object
2. Prototype chain inheritance
The prototype of the child constructor points to the prototype object of the parent constructor
Dog.prototype=new Animal(); Dog.prototype.constructor=Dog; Dog.prototype.sayColor=function(){ console.log(this.color) } var d1=new Dog('dog',1,'10kg','40cm','cola','white'); console.log(d1); d1.sayType(); d1.sayColor();
ES6
1. How to define a class
class Person{ constructor(name,age){ this.name=name; this.age=age } sayName(){ //Similar to existing classes in prototype objects console.log(this.name) } }
2. The constructor method is the default method of the class. It will be called automatically when an object instance is generated by the new command. A class must have a constructor method. If it is not explicitly defined, an empty constructor method will be added by default. Static attributes and static methods are defined through the static keyword.
class Person{ } => class Person{
constructor(){}
}
3. The methods defined in the class body are called instance methods. In fact, they exist in Person.prototype and can be called by all instances.
class Person{ constructor(name,age){ this.name=name; his.age=age } sayName(){ // In fact, it can be understood as existing in Person.prototype console.log(this.name) } }
4. Static method
Static attributes and static methods are defined through the static keyword. You can also add static attributes on the outside; Static attributes and static methods are defined on the class constructor, so they can be accessed directly through the class constructor. In the static method, this points to the current class [constructor]
class Person{ //Static attributes are private and not public static test=['hello'];//It can be a reference data type static test1='hello';//It can be a basic data type test3='world';---It is also a private attribute //Static method static sayName(){ return this.test1 } }
class Person{ //Constructor has one by default, which can be provided explicitly constructor(name,age){ // Private properties of the instance this.name=name; this.age=age; } // Instance private properties test=['hello'] // Method in prototype object of instance sayName(){ console.log(this.name) } // Static method static sayAge(p){ return p instanceof Person } //Static properties static gende='male' }; let p=new Person('zhangsan',12); let p2=new Person({}); p.test.push('tom') console.log(p,p2);//Maintain private properties and create different subclass constructor objects p.sayName(); console.log(Person.sayAge(p));//Static methods are called by classes console.log(p.test===p2.test);//Private properties are different console.log(p.sayName===p2.sayName)//The same method is stored in the prototype object
Where are instance methods and instance properties written
Methods and properties that instances can call
Where are static methods and static properties written
Methods and properties called by the class itself
2. Succession
class can inherit through the extends keyword. Subclasses can have no constructor, and the system will assign them by default. Subclasses that provide constructors must explicitly call super. The super function is similar to borrowing a constructor. Similar to Animal.call()
1. The subclass object points to the parent object
2. The subclass prototype object inherits the parent prototype object
class Animal{ // Static properties static animalAttr='Animal Static properties of'; constructor(name,age,weight){ this.name=name; this.age=age; this.weight=weight; } // Example method sayName(){ console.log('Example method') } // Static method static animalmethod(){ console.log('Animal Static method') } } // To implement inheritance class Dog extends Animal{ constructor(name,age,weight,color){ super(name,age,weight); this.color=color; console.log('Dog Constructor for') } } let dog=new Dog('peas',1,10,'golden'); // The prototype object that inherits the child class inherits the prototype object of the parent class dog.sayName(); // The object that inherits the subclass points to the object of the parent class Dog.animalmethod(); console.log(Dog.animalAttr); console.log(Dog.__proto__===Animal); console.log(Dog.prototype.__proto__===Animal.prototype)
3.Symbol
ES6 introduces a new primitive data type symbol, which represents unique values. The symbol function can accept parameters that represent a description of this unique value. If it belongs to the basic data type, the Symbol() function will return a value of symbol type
Create symbol value
let sy1=Symbol('hello'); let sy2=Symbol(); console.log(sy1==sy2);
1. To resolve conflicts
let obj={ name:'zhangsan', age:12 } // Add attribute modify attribute let sy3=Symbol('name'); let obj1={ ...obj, // Use square brackets when the property name is a variable name [sy3]:"myname" } console.log(obj1)
3. Global Registry
Unlike Symbol(), the symbol created with the Symbol.for() method is placed in a global symbol registry. Symbol.for() does not create a new symbol every time. It will first check whether the given key is already in the registry. If yes, the last stored one will be returned directly. Otherwise, it creates a new one.
Put the symbol in the global registry
let sy1=Symbol.for('hello');
Find the value corresponding to the key from the global registry
let sy2=Symbol.for('hello'); console.log(sy1===sy2);//true
A different Symbol value is created each time Although the descriptors are the same, the Symbol value value is different
let sy3=Symbol('hello'); let sy4=Symbol('hello'); console.log(sy3==sy4);//false