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
-
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 -
New (create the object, point this to this object, and return the object completed by new)
Solve relationship problems, methods are still not shared -
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