es6 class inherits symbol

  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


 

Keywords: Javascript html5 html

Added by godster on Fri, 01 Oct 2021 23:25:40 +0300