In-depth understanding of this in JavaScript

In-depth understanding of this in Js

JavaScript scope is static scope scope, but this in Js is an exception. The pointing problem of this is similar to dynamic scope. It does not care how and where functions and scopes are declared, but only cares where they are called from. The pointing of this cannot be determined when the function is defined. Only when the function is executed can it be determined who this actually points to. Of course, in fact, this ultimately points to the object that calls it.

Scope

Let's first understand the scope of JavaScript in order to understand why this is more like a dynamic scope. Generally speaking, the names used in a piece of program code are not always valid or available, and the scope of code that limits the availability of this name is the scope of this name. When a method or member is declared, it has the current execution context . In the context with a specific value, the expression is visible and can be referenced. If a variable or other expression is not in the current scope, it will not be available. Scopes can also be hierarchical so that child scopes can access parent scopes, usually by following a chain of scopes, but variables and references in child scopes cannot be referenced from parent scopes.
JavaScript scope is static scope , which can also be called lexical scope scope. Its main feature is that when a function scope encounters a local variable that is neither a parameter nor defined inside a function, it searches in the context of the function definition. In contrast, dynamic scope is different. When a function scope encounters a local variable that is neither a parameter nor defined inside a function, it searches in the context of the function call.

var a = 1;
var s = function(){
 console.log(a);
};
(function(){
 var a = 2;
 s(); // 1
})();

When s() is called, a is printed as 1. This is a static scope, that is, the scope is specified when it is declared. If it is a dynamic scope, 2 will be printed here. Most languages ​​now use static scope, such as C , C++ , Java , PHP , Python , etc. Languages ​​with dynamic scope include Emacs Lisp , Common Lisp , Perl , etc.

Global Scope

Variables or methods declared directly at the top level run in the global scope. Use the [[Scopes]] property of the function to view the scope. [[Scopes]] is an object that stores the function's scope chain. It is an internal property of the function that cannot be directly accessed but can be printed for viewing.

function s(){}
console.dir(s);
/*
 ...
 [[Scopes]]: Scopes[1]
 0: Global ...
*/
// You can see that the declared s function runs in the global scope.

Function Scope

When a function is declared, the operating environment of the methods or members declared inside the function is the function scope of the function.

(function localContext(){
 var a = 1;
 function s(){ return a; }
 console.dir(s);
})();
/*
 ...
 [[Scopes]]: Scopes[2]
 0: Closure (localContext) {a: 1}
 1: Global ...
*/
// You can see that the context in which the declared s function runs is the scope of the function localContext, which can also be called the local scope

Block scope

If there is let or const in a code block, the code block will form a closed scope for the variables declared by these commands from the beginning of the block.

{
 let a = 1;
 function s(){return a;}
 console.dir(s);
 /*
 ...
 [[Scopes]]: Scopes[2]
 0: Block {a: 1}
 1: Global ...
 */
}
// You can see that the declared s function runs in the Block scope, which is also the local scope.

analyze

Before we use this it is necessary to understand why this is designed in JavaScript . Before that, let's take a small example. Usually, the typical problem we may encounter when using this is similar to the following. Although we are running the same function, the execution results may be different.

var obj = {
 name: 1,
 say: function() {
 return this.name;
 }
};
window.name = 2;
window.say = obj.say;

console.log(obj.say()); // 1
console.log(window.say()); // 2

The reason for this result is the use of the this keyword. As mentioned earlier, this must be determined at runtime. Here, for obj.say() , the environment in which say() runs is obj object, and for window.say() , the environment in which say() runs is the window object, so the results of the two operations are different.
Now let's understand why JavaScript has such a design as this . Let's first understand the stack in JavaScript 's memory structure. The heap is dynamically allocated memory with an uncertain size and will not be automatically released. The stack is automatically allocated memory space and is automatically released during code execution. JavaScript provides an environment for Js code execution in the stack memory. All scope and function calls are executed in the stack memory. The basic data types in Js , String , Number , Boolean , Null , Undefined , and Symbol , occupy a small space and have a fixed size. The values ​​are directly stored in the stack memory and are accessed by value. For Object reference type, its pointer is placed in the stack memory, pointing to the actual address of the heap memory, and is accessed by reference.
Now let's take a look at the example above. In memory, the obj object is stored in the heap memory. If the attribute value in the object is a basic data type, it will be stored in the same memory area as the object, but this attribute value may also be a reference type, so the say function also exists in the heap memory. In fact, here we can understand it as the actual definition of this function in a memory area (existing in the form of an anonymous function), and the obj object is also in another memory area. obj points to the memory address of this anonymous function through say attribute, obj --say--> funtion , so now the problem comes. Due to this memory structure, we can make any variable object point to this function, so in JavaScript functions, we need to be allowed to obtain the value of the running environment for use. We must have a mechanism to obtain the current running environment context within the function body, so this appears. Its design purpose is to refer to the current running environment of the function within the function body.

use

We need to remember that this is bound at runtime, not at definition time. Its context depends on various conditions when the function is called. Simply put, the binding of this has nothing to do with the location of the function declaration, but only depends on how the function is called. Simply put, this always points to the caller, except for arrow functions. Next, we will introduce five uses of this .

Default Binding

The most commonly used function call type is the independent function call, which is also the one with the lowest priority. At this time, this points to the global object. Note that if strict mode is used, the global object will not be able to use the default binding, so this will become undefined .

var a = 1; // variable declaration in the global object function f1() {
 return this.a;
}

function f2() {
 "use strict";
 return this;
}

console.log(f1()); // 1 // Actually calls window.f1() and this always points to the caller, i.e. window
console.log(f2()); // undefined // Actually it calls window.f2(). At this time, due to the strict mode use strict, this inside the function is undefined

Implicit Binding

Only the top or last layer in the object property reference chain will affect this . Similarly, this always points to the caller. Specifically, it should point to the most recent caller, except for arrow functions. In addition, we may intentionally or unintentionally create indirect references. In this case, this also applies to the caller. The example used in the above analysis belongs to the case of indirect reference.

function f() {
 console.log(this.a);
}
var obj1 = {
 a: 1,
 f: f
};
var obj2 = {
 a: 11,
 obj1: obj1
};
obj2.obj1.f(); // 1 // The last layer of callers is obj1

function f() {
 console.log(this.a);
}
var obj1 = {
 a: 1,
 f: f
};
var obj2 = {
 a: 11,
};
obj2.f = obj1.f; // indirect reference obj2.f(); // 11 // the caller is obj2

Display Binding

If we want to force a function to a certain environment, that is, an object, we can use apply , call , and bind to bind this for execution. Each Function object has apply() , call() , and bind() methods, which can call the function in a specific scope, which is equivalent to setting the value of this object in the function body to expand the scope in which the function runs. In addition, it should be noted that the priority of using bind to bind this is greater than apply and call , that is, after using bind to bind this , using apply and call cannot change the point of this .

window.name = "A"; // name mounted to the window object
document.name = "B"; // name mounted to the document object
var s = { // Customize an object s
 name: "C"
}

var rollCall = {
 name: "Teacher",
 sayName: function(){
 console.log(this.name);
 }
}
rollCall.sayName(); // Teacher

// apply
rollCall.sayName.apply(); // A // No parameters are passed and the default window is bound
rollCall.sayName.apply(window); // A // Bind window object rollCall.sayName.apply(document); // B // Bind document object rollCall.sayName.apply(s); // C // Bind custom object // call
rollCall.sayName.call(); // A // No parameters are passed and the default window is bound
rollCall.sayName.call(window); // A // Bind to window object rollCall.sayName.call(document); // B // Bind to document object rollCall.sayName.call(s); // C // Bind to custom object // bind // The last () is for execution rollCall.sayName.bind()(); //A // Default binding to window without passing parameters
rollCall.sayName.bind(window)(); //A // Bind window object rollCall.sayName.bind(document)(); //B // Bind document object rollCall.sayName.bind(s)(); // C // Bind custom object

New Binding

In JavaScript , new is a syntax sugar that simplifies code writing and can create object instances in batches. The following operations are actually performed in the new process.

Creates an empty plain JavaScript object i.e. {} . Links this object (that is, sets the object's constructor) to another object. Use the object created in step 1 as context of this . If the function does not return an object, then the object created in step 1 is returned.

function _new(base,...args){
 var obj = {};
 obj.__proto__ = base.prototype;
 base.apply(obj, args);
 return obj;
}

function Funct(a) {
 this.a = a;
}
var f1 = new Funct(1);
console.log(f1.a); // 1

var f2 = _new(Funct, 1);
console.log(f2.a); // 1

Arrow Functions

Arrow functions do not have a separate this . When this is used in the body of an arrow function, this in the context environment is obtained. When an arrow function is called, it does not generate this in its own scope. It only inherits this from the previous level of its scope chain. Since the arrow function does not have its own this pointer, using apply , call , and bind can only pass parameters but cannot dynamically change this pointer of the arrow function. In addition, the arrow function cannot be used as a constructor, and an exception will be thrown when instantiated using new .

window.name = 1;
var obj = {
 name: 11,
 say: function(){
 const f1 = () => {
 return this.name;
 }
 console.log(f1()); // 11 // The direct caller is window, but because the arrow function does not bind this, the this in the context is obtained, that is, the obj object const f2 = function(){
 return this.name;
 }
 console.log(f2()); // 1 // The direct caller is window, a normal function, so return this.name;
 }
}

console.log(obj.say()); // 11 // The direct caller is obj. The this of the context in the function during execution is the obj object

Example

function s(){
 console.log(this);
}

// Call directly in window // Non-use strict
s(); // Window // Equivalent to window.s(), the caller is window
// window is an instance of Window // window instanceof Window //true

// Create a new object s1
var s1 = {
 t1: function(){ // Test that this points to the caller console.log(this); // s1
 s(); // Window // This call is still equivalent to window.s(), the caller is window
 },
 t2: () => { // Test arrow function, this does not point to the caller console.log(this);
 },
 t3: { // Object in the test object tt1: function() {
 console.log(this);
 } 
 },
 t4: { // Test arrow function and non-function call this does not point to the caller tt1: () => {
 console.log(this);
 } 
 },
 t5: function(){ // When testing a function call, the arrow function's this points to the caller of the previous object. return {
 tt1: () => {
 console.log(this);
 }
 }
 }
}
s1.t1(); // s1 object // The caller here is s1, so the printed object is s1
s1.t2(); // Window
s1.t3.tt1(); // s1.t3 object s1.t4.tt1(); // Window
s1.t5().tt1(); // s1 object

This is the end of this article about in-depth understanding of this in Js. For more relevant content about in-depth understanding of this in Js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!