Knowledge Summary of es6--4

Keywords: Javascript Programming ECMAScript

ES6 classes

We often use object-oriented method to create instances in programming, but es6 encapsulates a class class class for me.
Let me introduce you below.

Ecmascript 5 method

//Everything is an object.
        //1. Classes are generalizations of objects (abstractions)
        //2. Objects are created by classes
        //3. Specific instances of objects called classes
        function Person(name,age){
            this.name=name,
            this.age=age
        }
        Person.prototype.run=function(){
            console.log(this.name+" I can run.")
        }

        var weiwei=new Person("weiwei",21);
        console.log(weiwei)
        
        function SuperMan(name,age,sex,body){
            //Person.apply(this,arguments); // inherits the attributes of the parent class
            Person.call(this,name,age,sex)//apply comes in as a collection of arrays, call comes in as an array.

            //Attributes of oneself
            this.body=body;
        }


        SuperMan.prototype=Object.create(Person.prototype);//Inheritance of the method of the parent class

        //My own method polymorphism
        SuperMan.prototype.fly=function(){
            console.log("I can fly");
        }
        var chaoren=new SuperMan("Dagang",24,"male","large")

es6 method

ES6 has class grammar. It is worth noting that the class here is not a new object inheritance model, but a grammatical sugar representation of the prototype chain.

//1.es6 provides classes to create object-oriented programming
        class Student{
            constructor(name,age){
                this.name=name;
                this.age=age;
                }
                run(){
                    console.log(this.name+" Run and run")
                }
        }
       
        class SuperMan extends Student{
            constructor(name,age,xh){
                super(name,age);  //Ibid. call
                this.xh=xh;
            }
            eat(obejectName){
                    console.log(this.name+" Like to eat"+obejectName)
                }
            get  xm(){
                return this.name
            }
            set  xm(value){
                //console.log(value) // Set xm properties
                this.name=value;
            }
            static shangxue(){
                console.log("Go to school quickly");   //Class methods (class only), static methods, object instances are not available
            }
        }   
        let student1 = new Student('Mimi',18);
        let student2 = new SuperMan("Xiao Ming",21,007)
        student2.eat("Apple");  
         //Set get method  
        console.log(student2.xm)    //Get calls methods without parentheses (); get gets
        student2.xm="Xiaohong"
        console.log(student2.xm)
       // student2.shangxue()
        SuperMan.shangxue();

Functions use static keywords to define methods and properties of constructors:
ES6 has class grammar. It is worth noting that the class here is not a new object inheritance model, but a grammatical sugar representation of the prototype chain.

Method and attributes for defining constructors using static keywords in functions

The above code first defines a "class" with class, and you can see that there is a constructor method inside, which is the construction method, and this keyword represents the instance object. Simply put, the methods and attributes defined within the constructor are the instance objects themselves, while the methods and attributes defined outside the constructor are shared by all the instance objects.

Classes can be inherited through extends keywords, which is much clearer and more convenient than ES5 through modifying the prototype chain to achieve inheritance. A Cat Class is defined above, which inherits all the properties and methods of the Animal Class through the extends keyword.

The super keyword refers to an instance of the parent class (that is, the parent's this object). The subclass must call the super method in the constructor method, otherwise an error will be reported when a new instance is created. This is because the subclass does not have its own this object, but inherits the parent's this object and processes it. If you don't call the super method, the subclass won't get this object.

Keyword class, extends, super

Posted by fangorn on Wed, 12 Jun 2019 12:25:08 -0700