You don't know the This and class

• Oh no .... My this is lost again???
• Why do I use class ' instantiate ' objects to affect each other??? # # # #这些问题都是因为JS的运行机制造成的. Everything in JS is an object, and this is a property of the object. This dynamically binds to the context when the object is called, so this is not related to the lexical scope.

First, what is this

1. This is a property of the function execution context object that exists at run time rather than defined, so it does not necessarily relate to the lexical scope.
2. To use this, the first thing to consider is the calling environment of the function instead of writing the defined environment. It does not point to the function itself, nor to the lexical scope. It is determined by the binding that occurs in the context when the function is called.
3. Use this to find the call location of the function, not the declaration position of the function. The call stack records the invocation location and order of the function. The Debug tool allows you to view the call stack and find out where the function is called. Whose context is used when the call is made, this is the point to whom. It is particularly important to note that the callback function passes a reference, so this is lost. The location where the callback function is actually executed determines the point of this.
4. Bind binds the context used to execute the hard-bound function for hard binding this. (The binding this is shown in the react component constructor to prevent the loss of the context environment). In addition, an assignment expression passes a reference to the function, and its invocation position becomes the position of the function declaration.
5. The constructor of the class object in JS is not a constructor for other object-oriented languages, it is a construction call to an existing function, and is essentially the binding of this. The new keyword looks like an instantiated object, but only generates a new function object based on an existing function and binds this to the newly created object in the call context using the New keyword. For example, VAR test =new foo (), when calling Foo (..) with new, we construct a new object and bind it to this on the Foo (..) call.
6. The arrow function itself does not have this, which, when executed, captures this of the parent function of the lexical scope in which the call resides. The binding cannot be modified again after it has been captured. () = This is related to lexical scopes. Function-defined functions are not related to lexical scopes, only to the calling environment. Http://stackoverflow.com/questions/35813344/do-es6-arrow-functions-still-close-over-this-even-if-they-dont-use-it
7. This and JS class can be associated with the use of this re-binding can be mixed with the ' parent ' zodiac and methods of the function, also implemented the hermit's quasi-class pseudo polymorphism.

The binding object of this is judged according to the following four rules.

1. Called by new? Binds to the newly created object.
2. Called by call or apply (or bind)? Binds to the specified object.
3. Called by the context object? Binds to that context object.
4. Default: Bind to undefined in strict mode, otherwise bind to global object.

Second, what is the object

1. From a data structure point of view, an object is a collection of key/value pairs. Whether string, number, function, or array, JSON, which is a collection of key/value pairs after they constitute an object.
2. A function is a subtype of an object (technically, "callable object").
3. Objects and variables are stored as binary encodings.
4. The content of an object is made up of some (any type of) values stored in a particular named location, which we call attributes. Objects are stored in memory, and the properties that make up it are stored in other locations.
5. A directly declared string type is a literal type. Just the engine automatically converts the literal into a string object.
6. Each property of an object has a property descriptor of "writable (writable), enumerable (enumerable), and configurable (configurable)", and so on. The fact that the '. Property name ' is an action that triggers a get operation.

Getter/setter: The default [[Get] and [PUT]] algorithms for objects are overwritten with values and assignment actions that define object properties.

• Both the direct access function and the property access function are Access function references.
• Each iterator that iterates through the properties of an object can receive a callback function that is applied to each property of the object. foreach iterates through each element in the array. Every is traversed until the callback function returns false,some until the callback function returns TRUE. For...of., traverse the property of an object or the value of an array directly, rather than traversing an array subscript.

Third, the nature of class

2. First of all, it is important to note that JS has no class (abstract Schema/blueprint for objects), only objects, so inheritance can only be achieved through the prototype chain. JS only objects, can be vulgar to understand that all is the object, it is really object-oriented. The purpose of the New keyword is to point the prototype chain of the newly generated object to the defined function object itself. The meaning of inheritance is the replication mechanism of other languages, but there is no real inheritance mechanism in JS, but the correlation mechanism. In JS, you create an association of two objects. constructor is not a construct, it simply points to a function that delegates the things you want to do to the associated objects on your prototype chain.
4. Class/Inheritance Describes the organizational form of a code-a method of modeling the problem domain in the real world in software. Object-oriented programming emphasizes that the behavior of data and operational data is inherently interrelated (of course, different data behaves differently), so a good design is to package (or encapsulate) the data and the behavior associated with it. "Class" is also a design pattern, design ideas. Object-oriented design patterns, such as iterator patterns, observer patterns, factory patterns, and singleton patterns. The architect designed the house in advance, but did not care where and how many were built. The relationship between architecture and blueprint is indirect. You can understand the structure of the building through blueprints, and only observe that the building itself is unable to obtain this information. But if you want to open a door, you have to touch the real building-the blueprint can only indicate where the door should be, but not the real door. A class is a blueprint. In order to get a really interactive object, we have to construct (or instantiate) a thing according to the class, which is the object, so the object is a copy of all the attributes described in the class. The inheritance and instantiation of classes in JS does not occur, so it is not a real class. It does not create replicas, but only the objects that are associated with them.
6. The constructors in standard object-oriented languages belong to classes, whereas in JS the classes are constructors. The relationship between the parent class and the subclass in JS only exists in the constructor corresponding to the. prototype, so the constructor is just a delegate relationship function and cannot produce a copy of the object. Inheritance: Essentially copying a copy of the parent class does not change the method of the parent class, but this is not the case in JS. Therefore, JS is pseudo-polymorphic, JS itself does not provide multiple inheritance mechanism. The class inheritance in JS is implemented by mixin or prototype.
8. Each JS object has a built-in prototype property that holds references to other objects. The end of all common prototype chains is Object.prototype, which has many common functions. Changes to the function prototype chain sometimes result in stealth attribute masking, which is not modified to the prototype chain. ES6 's class is a syntactic sugar that displays pseudo-polymorphic syntax, which is implemented through a prototype chain, and is commissioned by the prototype chain.
10. Because JS's prototype chain mechanism, so JS can use two design ideas, object-oriented and delegate association (different from. NET, do not misunderstand).
12. Object-oriented: The object function is called through new, and the behavior of the newly generated object is encapsulated in the new call object. Object Association (delegate): Creates an association of child object alignment based on the parent object, and then steps through the method in the parent object.
14. These are two design ideas. Class just writes down the difficulty of dynamic grammar as static syntax, although the difficulty of writing is reduced, but it is misleading to understand the engine operating mechanism at the bottom. The design idea of delegate invocation is more close to the real operation mechanism of JS than object oriented design.

Super is not dynamically bound like this. Because dynamic binding is expensive, it is statically bound at the time of declaration.

Forwarded from:: http://www.cnblogs.com/ssol/

You don't know the This and class