javaScript learning notes 18 days -- object-oriented pattern

Keywords: Javascript OOP

When you need to get a certain type of object in large quantities, you can use factory mode

Factory mode

Steps:

  • Create a function
  • Returns an object in the function return {}
            //Create factory function
            //1. Create function and object attributes
            function createPerson(name,age,address,className){
                //2. Return the properties in the object
                return {
                    name,
                    age,
                    address,
                    className,
                };
                
            }
    
            //2. Defines the property value of an object's property
            let p1 = createPerson("Zhang San",18,"Xueshan cultural and creative Valley","Classroom 1");
            //3. Returns the created object
            console.log(p1)

    {name: 'Zhang San', age: 18, address: 'Xueshan cultural and creative valley', className: 'classroom 1'}

Note: it cannot accurately get the name of the factory producing the product   (the parent object is inconsistent with its own properties)   Here is an example

 //Create factory function
        //1. Create function and object attributes
        function createPerson(name,age,address,className){
            //2. Return the properties in the object
            return {
                name,
                age,
                address,
                className,
            };
            
        }

        //2. Defines the property value of an object's property
        let p1 = createPerson("Zhang San",18,"Xueshan cultural and creative Valley","Classroom 1");//people

        let m1 = createPerson("Xiaobai",1,"Douluo continent","Tencent video")//Cat
        //3. Returns the created object
        console.log(p1)
        console.log(m1)

name: 'Zhang San', age: 18, address: 'Xueshan cultural and creative valley', className: 'classroom 1'

name: 'Xiaobai', age: 1, address: 'Douluo mainland', className: 'Tencent video'

Custom constructor

let receive function variable = new function name ()   A new keyword must be called. The default return value is the value of this in the function

The specification of user-defined functions. Function names usually start with uppercase letters.

 //1. Create a function
        function Fun(){  
            console.log(this)  //this == new fun()
            return "123"
        }
        //When called without new
        console.log(Fun());  //undefind
        //2. When calling with new
        console.log(new Fun());//Returns a function fun()


       function Fun(){ 
 
            this.name = "Zhang San"
        }
       
        //When called with new
        console.log(new Fun());//fun   {name: 'Zhang San'}




  When adding a return to a function

If the value after return is the basic data type, the return value of the function is this

If the value after return is a complex data type, the return value of the function is the data after return

 function Fun(){
            this.name = "Zhang San";
            // return '123';// The default return value is this
            return [1,2,3];//Return value current data
        }
        var res = new Fun()
        console.log(res)

Fun{name: "Zhang San"}

(3) [1, 2, 3]

        function Fun(name,age,sex){
            //Add an attribute to this object. The attribute value is the value of the name variable
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        let res = new Fun("Zhang San","18","male")
        console.log(res);

Fun {name: 'Zhang San', age: '18', sex: 'male'}

Creating objects with custom functions

When a method is written in an instance object, multiple instance objects correspond to multiple same methods. The same method is constantly called by different instance objects, which will cause the same method to exist in memory for multiple instances and waste memory space.

        //create object
        function Person(name,age,sex){
            //static object
            this.n = name;
            this.a = age;
            this.s = sex;
            //Dynamic method is what you want to do?
            this.codding = function(){
                console.log(this.n + "Changing bug!!!!!")
            }
            this.say = function(){
                console.log(this.n + "Don't talk, Zhang San. He's changing bug!!!!!")
            }
        }
        //p1 assign the attribute value of name to the name of the Person function, and then assign the value to the name variable in the function through the this pointer
        let p1 = new Person("Zhang San",14,"male")
        let p2 = new Person("Wang Wu",15,"female")
        //Call the coding () function to execute the code in the function. this points to p1, and p1 will execute the code in the function
        p1.codding()//Changing bug!!!!!
        p2.codding()//Changing bug!!!!!
        p2.say()//Don't talk, Zhang San. He's fixing a bug!!!!!
        console.log(p1);
        console.log(p2);  

Note:   Calling the same method repeatedly wastes memory space

Person   {n: 'Zhang San', a: 14, s: 'male', coding: ƒ, say: ƒ}
Person   {n: 'Wang Wu', a: 15, s: 'female', coding: ƒ, say: ƒ}

Prototype object

Each function has an object by default

The instance object generated by the new constructor can access the methods on the prototype object of the constructor.

//Perdon() constructor
function Person(){}
let p1 = new Person();
console.log(p1);//The result returns a Person {} empty object

A constructor has multiple instance objects. If a method is written on an instance, there will be multiple places in memory

If there is only one prototype object for a function, if the method is written in the prototype object, there is only one in memory;

function Person(){
            Person.prototype.name="123"//[[Prototype]]: Object name: "123"
        }//p1 is the instance object
           let p1 = new Person();
        console.log(p1) //PersonĀ {}
        console.log(p1.name) //123

Generally, the attribute is in this aspect of the constructor, and the method is written on the constructor prototype object;

        function Person(name, age, sex) {
            this.n = name;
            this.a = age;
            this.s = sex;
        }
        //When the method is placed in the prototype object, because there is only one prototype object of the constructor, the method placed in the prototype object exists only once
        Person.prototype.codding = function () {
            console.log(this.n + "Wang Wu is still staying up late to change Bug")
        }

        Person.prototype.say = function () {
            console.log(this.n + "Don't make any noise. I'm still changing bug");
        }
        let p1 = new Person("Zhang San",14,"male")
        let p2 = new Person("Wang Wu",15,"female")
        console.log(p1);
        console.log(p2)
        p1.codding()  //Zhang Sanwang and Wu are still staying up late to change Bug

Write the method in the prototype object Person.prototype   Is the prototype object of the Person constructor. This method is only stored in the prototype object, not in the instance object

  Person {n: 'Zhang San', a: 14, s: 'male'}

Person   {n: 'king five', a: 15, s: 'female'}

  How do instance objects access prototype objects???

_ proto_: Each object has an attribute. The value of the attribute is an object. It is the attribute existing in the constructor, that is, the attribute existing in the instance object. The instance object in which this attribute is located points to whoever it is created (in short, it points to the prototype object of its parent class)

For example, because p1 is the instance object of Person, p1_ proto_ Point to the prototype object Person.prototype of Person;

By analogy, if the prototype object is also an object, it will also exist_ proto_ Property, then the prototype object_ proto_ Equal to object.prototype (prototype object of object)

The prototype Object is the (instantiated) Object from the Object constructor new - the instance Object,

The diagram is as follows:

Posted by jtp51 on Wed, 17 Nov 2021 05:25:19 -0800