Advanced js summary 1

object-oriented programming
js method for creating objects
1. Create directly (new object())
Advantages: it is convenient and fast, and can be created quickly  
Disadvantages: mass production is not possible, and the code needs to be rewritten every time
 

var students=[]
        var s1={
            name:"Wang Yi",
            height:180,
            age:21,
            eat:function(){
                console.log(this.name+"I am eating")
            },
            run:function(){
                console.log(this.name+"Running")
            }
        }
        var s2={
            name:"Wang Yi",
            height:180,
            age:21,
            eat:function(){
                console.log(this.name+"I am eating")
            },
            run:function(){
                console.log(this.name+"Running")
            }
        }
        var s3......


2. Factory mode (function)
Advantages: rapid mass production  
Disadvantages: there is no way to detect the corresponding type of the created object

var students=[]
        function createStudent(name,age,height){
            var obj=new Object()
            obj.name=name
            obj.height=height
            obj.age=age
            obj.eat=function(){
                console.log(this.name+'I am eating')
            }
            return obj
        }
        //string Array number
        var s1=createStudent("Wang Yi",21,180)
        var s2=createStudent("WangTwo ",22,192)
        var s3........


instanceof is used to detect the type of corresponding data
As   a instanceof object   Return true or false
!!! In a simple data type (Boolean numeric string), it must be created through new   Can be detected, otherwise not


3. Constructor creates an object (a method that simulates a class) (usually capitalized)
Advantages: mass production   The problem of factory mode is solved, and the object type can be judged (instanceof)
Disadvantages: storage consumption (the same method will open up different storage space, resulting in a large consumption of memory)

 function Student(name,age,height){
            this.name=name
            this.age=age
            this.height=height
            this.eat=function(){
                console.log(this.name+'I am eating')
            }
        }
        var s1=new Student("Wang Yi",21,180)
        var s2=new Student("WangTwo ",55,58)


this points to the problem
The principle is who calls to whom
1. this in a normal function points to window
2. this in the object method points to the object
3. this in the constructor's method of creating an object points to the object from new
4. this in timer   Point to window
5,call   this called by apply points to the new value

Use of new in the process:
1. Create an empty object {}
2. Point this in the constructor to an empty object
3. Assign all properties and methods in the constructor to {}
4. Return the object


4. Creating objects in prototype mode
Advantages: it solves the disadvantage of creating objects by constructors, and puts the common methods into the prototype to save memory

unction Student(name,age,height){
            this.name=name
            this.age=age
            this.height=height
        }
        //Write the shared method to the prototype of the constructor  
        //prototype constructor
        //__ proto__  Prototype of instantiated object
        Student.prototype.eat=function(){
            console.log(this.name+"I am eating")
        }
        var s1=new Student("Wang Yi",21,180)
        var s2=new Student("WangTwo ",22,222)
        s1.__proto__.run=function(){
            console.log(this.name+"Running")
        }

Prototype and prototype chain
1. The prototype (_proto_) of the object created by the same new points to the common object ----- prototype
2. All objects created by new have_ proto_ Property points to the prototype object of this function
3. Of all prototype objects_ proto_ Property points to Object by default  
4. Object_ proto_ Property points to null
5. In each function prototype object, another constructor points to the function object
6. Of all Function objects_ proto_ Point to Function prototype object
7. Function prototype Object_ proto_ Point to Object prototype Object

Tags: Javascript Front-end

Posted on Sat, 04 Dec 2021 21:16:22 -0500 by tam2000k2