Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to have an in-depth understanding of this, prototypes and closures in js. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

1. This keyword

A. An object points to an object

B. No object points to the global variable (window)

C. New points to the new object out of new.

D, bind,call&apply change the direction of this

E, setTimeout/setInterval this point to window

F, the arrow function this is determined by the definition of the function

Var adder = {base: 1, add: function (a) {var f = v = > v + this.base; return f (a)}, addThruCall: function inFun (a) {var f = v = > v + this.base; var b = {base: 2}; return f.call (b, a);}} Var obj = {I: 10, b: () = > console.log (this.i, this), c: function () {console.log (this.i, this)}} obj.b (); / / undefined window {...} prototype obj.c (); / / 10 Object {...}

2. Prototype

Prototype:

Prototype: each object initializes a property inside it: prototype

Prototype chain: when we access a property of an object, if this property does not exist inside the object, then go back to _ _ proto__ to find this property, so keep looking for it: prototype chain

The principle of instanceof is to determine whether the _ _ proto__ of the instance object and the prototype of the constructor that generated the instance are referenced to the same address.

HasOwnProperty is the only function in JavaScript that handles attributes but does not look for prototype chains.

Constructor-> prototype- > prototype object-> constructor-> constructor

Constructor-> new-> instance object

Instance object-> _ _ proto__- > prototype object-> _ _ proto__- > prototype object->-> null

Execution context:

Variable declaration and function declaration, whose scope is raised to the top of the method body

Scope:

A, javascript have no block-level scope

B, javascript in addition to the global scope, only the scope that the function can create. The scope is determined when the function is defined. It is not determined when the function is called.

Closure:

Concept: internal functions can access variables in external functions

Use: function as return value; function as parameter

Function: encapsulate variables, converge permissions

Disadvantages: memory consumption

How to create an object:

Object literal quantity

Constructor function

Execute the function immediately

Object.create ()

New object procedure:

Create a new object

This points to this new object

Execute the code

Return to this

Classes and inheritance:

Class declaration:

Function Animal () {this.name = 'name';} / / es6 class Animal2 {constructor () {this.name =' name2';}}

Inheritance:

1. Implement inheritance with the help of constructor

Function Parent () {this.name = 'parent';} function Child () {Parent.call (this); this.type =' child1';}

Disadvantages:

Partial inheritance

Cannot inherit the method on the parent prototype object; (only the properties of the parent class are mounted on the subclass, and the prototype of Child does not change to Child.prototype that cannot inherit the prototype of Parent)

two。 Prototype chain relay

Function Parent () {this.name = 'name';} function Child () {this.type =' child';} Child.prototype = new Parent ()

Cons: prototype objects are shared on the prototype chain. (the properties of the prototype are modified, and the properties of all classes inherited from the prototype are changed together.)

3. Combination mode

Function Parent () {this.name = 'parent';} function Child () {Parent.call (this); this.type =' child';} Child.prototype = new Parent ()

Disadvantages:

The parent class executes the function twice

Constructor points to the parent class

Function Parent () {this.name = 'parent';} function Child () {Parent.call (this); this.type =' child';} Child.prototype = Parent.prototype

Disadvantages:

The subclass constructor points to the parent class

Function Parent () {this.name = 'parent';} function Child () {Parent.call (this); this.type =' child';} Child.prototype = Object.create (Parent.prototype); Child.prototype.constructor = Child

Advantages:

The prototype of the subclass points to Object.create (Parent.prototype), which separates the constructor of the subclass from the parent class, but there is still no constructor of its own in the subclass.

So then the constructor of the subclass is set up, thus realizing the perfect combinatorial inheritance. (that is, write the prototype of the parent class into the prototype of the subclass, and define the constructor of the subclass)

4. Es6

Class Child extends Parent {constructor () {}} after reading the above, do you have any further understanding of how to gain an in-depth understanding of this, prototypes, and closures in js? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.