The Principle and Direction of JavaScript this

  • 2021-11-29 06:01:11
  • OfStack

How to judge the direction of this?

Calls in the global environment point to window. ② The method call as an object points to the object. Calling as a constructor points to the newly created object. ④ apply, call and bind can be used to change the direction of this. ⑤ this in the arrow function is bound to the context in which it was defined and cannot be changed. The arrow function this points to this, which depends on the nearest first non-arrow function found by its outer layer.

How to understand this principle?

To understand JavaScript linguistics, you need to understand the following two ways of writing


var obj = {
  foo: function () {}
};
 
var foo = obj.foo;
 
//  Writing style 1
obj.foo()
 
//  Writing style 2
foo()

In these two ways, one is a function call and the other is an object method. Although obj. foo and foo both point to a function, the results they execute may not be 1. Look at the following code:


var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};
 
var foo = obj.foo;
var bar = 2;
 
obj.foo() // 1
foo() // 2

Why is the running result different? Because the function key body uses the this keyword, many teaching materials and materials will tell you that this refers to the environment in which the function runs. For obj. foo (), foo runs in obj environment, so this points to obj; For foo (), foo runs in the global environment, so this points to the global environment. Therefore, the running results of the two are different.

So how do you judge where this points? Or what environment does this run in?


var obj = { foo: 5 };

The above code assigns an object to the variable obj, then the engine of JavaScript will first generate the object {foo: 5} in memory, and then assign the address of this object to obj.

obj is also a variable address. Reading obj. foo will first get the memory address from obj, then read the original object from this address and return the foo attribute.

How are foo attributes stored in memory?


{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

The value of the foo attribute is stored in the value attribute of the attribute description object

What if the value of the property is 1 function?


var obj = { foo: function () {} };

At this point, the JavaScript engine saves the function separately in memory, and then assigns the address of the function to the value property of the foo property.


{
  foo: {
    [[value]]:  The address of the function 
    ...
  }
}

Just because the function is stored separately in memory, it can be executed in different environments (contexts).


var f = function () {};
var obj = { f: f };
 
//  Execute separately 
f()
 
// obj  Environmental execution 
obj.f()

JavaScript allows other variables of the current environment to be referenced inside the function body.


var f = function () {
  console.log(x);
};

Other variables X are used in this function.

Look at the code below


var f = function () {
  console.log(this.x);
}
 
var x = 1;
var obj = {
  f: f,
  x: 2,
};
 
//  Execute separately 
f() // 1
 
// obj  Environmental execution 
obj.f() // 2

You can see that the result of the function running is different. The function f is executed globally. What about its this? this. x points to x for the global environment.

As for obj. f executed in obj environment, its this is obviously in obj environment, so this points to obj. x in obj environment.

Therefore, at the beginning of the article, obj. foo () found foo through obj, so it is executed in obj environment. 1 When var foo = obj. foo, the variable foo points directly to the function itself, and the function itself foo () is in the global environment, so foo () becomes executed in the global environment.


function foo() {
    console.log(this.name);
}
 
function Foo(fn) {
    fn();
}
 
var obj = {
    name: 'zl',
    foo,
}
 
var name = "Heternally";
Foo(obj.foo);

So what is the result of the execution of the above code?


Related articles: