1, this in class

Point analysis and understanding of the above figure:

1. The this of printName in logger naturally points to the logger itself (or the memory space of its constructor itself). ?).

The essence of fetching from an object (in the form of an ES6 deconstruction or assignment) is to declare a new object of the same name in the current execution context (such as the global Window class) and pass the address of the anonymous function in the original instance object to the window object. Window is essentially an instance of a large [Window] class, since many of its properties match the properties of a single class), and the anonymous function is then mounted under the window

3, “this refers to the environment in which this method is executed “, the method is already mounted on the new instance object, and the new instance object is no longer executed with the same name

When the parent method is mounted to the new execution context, the this variable is undefined in the current execution context (e.g. the Window class), so this is undefined. If there is a class, then the whole world is in strict mode, so this refers to undefined. If there is no class, then there is no strict mode. This refers to the global object window, which has some relation to [3.2]. In addition, global in node is strictly modal, so this is undefined in global), because this in “this.A” syntax calls A variable. The difference is that in the Window global class, there is no built-in this variable, so when the main function is called, the internal this variable is not found in the current scope chain, so the result is undefined and does not exist. The “global environment” is essentially a large [window] class. In this case, the global environment actually refers to the class [Window]. Window is an instance of this class. You can add variables and attributes to the global environment by adding attributes to Window. !). . The class or function class contains a built-in “this” variable and stores its value as an instance object, whereas the Window global class does not. [3.2] shows that this exists globally, but in strict mode it is not explicitly registered (or declared), so undefined means undefined.

The global context (= global execution stack = global execution context =”window object constructor [window] internal scope “) This is the inner scope of a large constructor whose inner properties are similar to those of ordinary classes.

5. This itself is also a variable. The value of this variable is the address string of an instance of a class in memory (e.g. Ox12fe) or a basic type of data (e.g. Number, String…).

2. This in class refers to the handler fixed to the instance object

1. Bind in constructorthis:

2.

Inside the bind function, bind the function to the global fn variable and return an anonymous function that points to the calling context (window), but the actual target function, fn, points to the new instance in apply. Apply attaches the function of the same name directly to the inner scope of the current constructor, so the global destruct or assignment is to execute an externally wrapped anonymous function. But the anonymous functions performed inside is mounted on the constructor of the main function, the main function has mounted in the constructor (- > the replacement on the instance objects can amount to is defined in the class the function, reflected on the invocation chain of instance objects), so, in fact, the main function of the execution environment has entered into the constructor, Inside the constructor this is the built-in this variable, i.e., the instance itself -> If so, can we deduce that the class class is a small enclosing execution context? So this in this.a () inside the main function can be found on the scope chain, and A is also present in the current environment variable, so A can be executed smoothly

So is this essentially a substitution of execution context?

Do I need to associate it with memory? I haven’t thought of that yet

2, in the aforementioned “mount to an instance object” = > “mount to the object instance constructor’s built-in variables in this object”, and inside a function, is itself a small execution context, the execution environment, there is own scope chain, and linked with memory, a function is an object, Object inside is some statement execution, execute the statement in memory write die, only when they are pressed into the stack, can according to the scope chain to find corresponding to the value of a variable, including in the constructor methods defined in the function of this, the nature is also a symbol of code, is a variable, if it is pressed into the execution environment is not corresponding to this variable, That would be an error

3, that this way, the others are adding properties and methods to explicit object, in essence, is to add attributes to the constructor of the object method, call this property of method (obj. ABC ()), will spontaneously within the scope chain in the first place in the constructor for variables, mount method in object, although actually mount is a reference to the address, However, when executing, it still pushes the code in memory pointed to by the reference address onto the execution stack. This code should all be “real code”.

4. The object data type, though represented as a key-value pair, actually refers to the inner scope of a complete constructor. The explicit object is really just the output of the constructor, so each assignment and deconstruction assignment simply moves the memory address from one constructor to the internal scope of another.

2. Use the arrow function

Text and text analysis;

1, the function characteristics of the arrow – > “arrow function inside this always point to the definition of the object”, the meaning of this sentence is, arrow function of memory addresses only mounted in the definition of the scope, and will not be transferred, so defined, is to use arrow function to define the main function, If this is called inside the main function, the this of this.a() function can still be found. In this case, the name of the reference is the anonymous function, but it is actually the reference to obj.main, which is also executed as obj.main

3. Use proxy

2.

1. I need to add related knowledge points proxy and WeakMap

suspended

3. The object attribute refers to this on the chain

1. Only the previous or last layer is involved in the call location

2.

Foo is mounted in the constructor of obj2, and obj2 is mounted in the constructor of obj1. The this variable in the two constructors is essentially different, and its scope is somewhat isolated, so the order of “obj1.obj2.foo()” is We first point to the memory address of obj2 (inside the constructor of obj2) and then execute the foo function of obj2.

2. This procedure only mounts the memory address of obj2 to the property variable of the same name. It does not mount function foo into the constructor of obj1, so foo is still in the internal scope of the constructor of obj2

3, that whether it can be speculated that again, in the form of literal generated different literal object, should be also has its own constructor, and each one literal constructor is different, but not clear, but its performance should be in the memory and a named constructor is the same, The difference between a new object and a literal object is that the properties and methods of a new object are explicitly defined in the constructor and have additional properties and static methods and so on, whereas the methods and properties of a literal object do not have this step, but they should behave the same in memory, But the contents of the literal object’s “constructors” in memory are more lightweight, so is it possible to treat the variables generated by the literal as a kind of syntactic sugar for the constructor variables?

4. It just occurred to me that since the global scope is essentially a super large [Window] class, then

2. This is undefined globally or refers to window

Illustration:

The global Window is defined as a literal object. It is not in strict mode, so this refers to the global variable Window

Var a bar variable (equivalent to registering a global attribute in the global environment); Window.bar), and mount foo to the variable (bar = obj.foo is essentially just assigning the heap-reference address of function object foo to bar, and obj.foo itself stores the heap-reference address of function object foo). Statically executing code in foo is pushed onto the stack according to the heap reference address.)

Function foo() {foo() {bar() {foo();}} Foo or bar should only be “code” for the heap reference address of the function object. Yes, because foo is defined in the global environment, calling foo() is the same as calling foo() without changing the variable that refers to the function), so we can follow the scope chain to find this in the global environment, so this === window A is already registered in the window via var (the variable is actually a property in the window object), so this can be found, as can this.a

What’s the difference between this and “Strict mode”? The difference is that the current obj variable is generated literally. The current global environment is not in strict mode, so this refers to window instead of undefined

3. Missing bindings (default bindings)

Lost binding means that this originally refers to the constructor scope of the object that defined or when it was first assigned, and then refers to this when it was called, such as window or some other instance object, but the name of the thing is lost binding in terms of initial definition and initial assignment, The essence is that the address of the function object is mounted in another constructor scope (i.e. the code executing the function is pushed into another private scope, execution environment, execution context), which is also a case of lost binding because foo was originally mounted on obj. Then foo’s address is assigned to bar in the window, so bar can be called, and bar can be called, too. Note the word, because obj.foo() can be called again, where this refers to obj, and the output is 42

In this case, there are also “callback functions”, including the setTimeout callback function, the difference is that the former callback function may call the scope, that is, the main function is mounted in the constructor of the instance object, setTimeout callback functions directly refer to the window, Since the setTimeout function is supposed to push the callback onto the global stack when appropriate, it’s not unusual for this to end up pointing to the global

4. Priority of binding

New Bind > Show Bind (Apply, Call, Bind) > Implicit Bind > Default Bind

Is there a class [Window]?

Practice:

Generate an HTML template quickly: 1:! + TAB 2: HTML :5+ TAB

2. Write a closure

The values of this and Global in Local above are both “Window”, so I reasonably suspect that the constructor [Window] for the Global Window object is real

The statically executing code inside f Window() is not known, but the object [Window] seems to exist, and its reference address is assigned to this. This is a constructor. Window itself is an instance object of the Window class, okay?

This note is derived from the study and reflection of the following two articles:

Reference 1: es6.ruanyifeng.com/#docs/class

Reference 2: juejin.cn/post/699497…