Closures, constructors, and instantiated objects, prototype objects, and prototypes of JS underlying JS

Posted by Dj_Lord on Wed, 05 Jan 2022 21:03:46 +0100

1. Closure of JS

1. Definition

A closure is a function that has access to variables in the scope of another function. Simply put, you can think of a closure as a special function that reads functions of internal variables of other functions.

2. Role

Normal functions, after execution, the variables declared in the function will be garbage collected. But closures allow variables in a function scope to remain untreated by garbage collection after execution.

3. Disadvantages

Memory leak prevents variables from being released

Chestnuts:

		function fn2() {  
            const c = 3 ;
            return function () {  
                console.log(c);
            }
        }
        // Closure: A function can access variables of another function
        // Disadvantage: Memory leak prevents variables from being released

        const res = fn2() ;
        res() ; //Print Result 3

2. Object-oriented

Programming ideas are divided into process-oriented and object-oriented:

  • Process-oriented analysis is to analyze the steps needed to solve the problem, and then use functions to implement these steps step by step, one by one when using can be called, it pays attention to problem solving, representing the language has C language.
  • Object-oriented decomposes the transaction that constitutes a problem into objects. Objects are not created to complete a single step, but to describe the behavior of an object in the whole process of solving a problem. Complete the simulation of the real world, pull out the common characteristics of an object, with the so-called'attributes'and'methods', representing the language has JAVA.

JS is not a real object-oriented language. It is simulating object-oriented.

3. Constructors and Instantiated Objects

Constructor

In the process of object creation, we find that Object is a constructor. The new keyword calls the constructor and you get an object.

	var a=new Object('666');
    console.log(typeof a); //Print result object

All instantiated objects share methods:

	var arr1 = new Array() ;
    var arr2 = new Array() ;
    console.log(arr1.forEach == arr2.forEach); // true

What did new do

  • Add a return value to the function and return an object
  • Point this to this object
  • An object was created
  • Execute the constructor (add attributes to the new object)
		function fn() {  
            console.log(this);
            console.log(666);
        }


        var res = fn() ;   // this points to window
        console.log(res);  // Function does not return undefined


        var res2 = new fn() ;   // this points to the object
        console.log(res2);   // Returned this object

Any function can be a constructor, as long as there is new
To distinguish between normal functions and constructors, js suggests that constructors be named after camels

4. Prototype Objects and Prototypes

JS generates new objects through constructors, so constructors can be treated as templates for objects. The properties and methods of the instance object can be defined inside the constructor.

		function Cat(name, color) {
            this.name = name;
            this.color = color;
            this.meow = function () {
                console.log('Miao');
            };
        }
        var cat1 = new Cat('big fat', 'white');
        var cat2 = new Cat('Two Fat', 'black');
        console.log(cat1.meow === cat2.meow); //false

In the code above, the Cat function is a constructor that defines the name and color attributes internally. All instance objects (cat1 in the example above) generate these two attributes, that is, the two attributes are defined on the instance object.
Although it is convenient to define attributes for an instance object through a constructor, it has one drawback. Attributes cannot be shared between multiple instances of the same constructor, resulting in a waste of system resources.

prototype attribute

Prototype: Any object has a prototype proto, which is this constructor;
Prototype object: Any function has a prototype object that provides common properties and methods to all instantiated objects
JavaScript specifies that all objects have their own prototype. On the one hand, any object can act as the prototype of other objects; On the other hand, since a prototype object is also an object, it also has its own prototype. Thus, a prototype chain is formed: from object to prototype, to prototype of prototype... (null at the end of the prototype chain)

		// prototype Prototype Object - Solves the problem of sharing properties and methods
 
        function person(type , age) {
            // this.species ='person'
            this.type = type 
            this.age = age 
            this.speak = function () {  
                console.log(this.age);
            }
            // this.say = function () {
            //     console.log('I'm a person');                
            // }
        }
        person.prototype.species = 'people'
        person.prototype.say = function () {
            console.log('I am a human');
        }
        var fangZong = new person('Man' , 38)
        var keZong = new person('Man' , 18)
        console.log(fangZong.say == keZong.say); // true
        console.log(fangZong.species == keZong.species); // true
 
        console.log(fangZong.constructor); //   f person
 
        var arr = new Array()
        console.log(arr.constructor); // f array

constructor property

The purpose of the constructor property is to know which constructor produces an instance object and actually returns its own instance object. Because the constructor property is defined on the prototype object, it means that it can be inherited by all instance objects.
In the code above, x is an instance of the constructor Constr, which can be called indirectly from x.constructor. This makes it possible to call its own constructor in the instance method.

5. The development process of js object-oriented

  1. Factory mode creates an object, processes it (adds properties and methods), and returns it
    Disadvantages: Created objects have nothing to do with functions and methods are not shared

  2. New (create the object, point this to this object, and return the object completed by new)
    Solve relationship problems, methods are still not shared

  3. Prototype prototype object: Provides shared properties and methods

js object-oriented simulation final

  • Own properties and methods are written in the constructor
  • Common properties and methods are written on the prototype object of the constructor
		function Fn(type) {  
            this.type = type ;
            this.age = age ;
            // this.say = function () {  
            //     console.log('Wang');
            // }
        }

        Fn.prototype.species = 'Dog' ;
        Fn.prototype.say = function () {  
            console.log('Wong');
        }

        var dog = new Fn('Dog') ;
        console.log(dog);
        var dog2 = new Fn('Koki') ;
        console.log(dog);

        dog.say()

        // Each instantiated object shares a say method
        console.log(dog.say == dog2.say);   // true

        // Console. Log (dog. u proto_u); // Point to this constructor
        // console.log(dog.constructor);  // Fn


Topics: Javascript Front-end