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

This article mainly explains "how to understand the principle of JavaScript this". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand the principle of JavaScript this".

How to determine the direction of this?

The call to ① in the global environment points to window.

The method call of ② as an object points to that object.

The call to ③ as the constructor points to the newly created object.

④ can use apply,call,bind to change the this direction.

The this in the ⑤ arrow function is bound to the context in which it is defined and cannot be changed. The arrow function this points to the this that depends on its outer layer to find the first non-arrow function closest to it.

How to understand the principle of this?

Understanding JavaScript linguistics requires understanding the following two ways of writing

Var obj = {foo: function () {}}; var foo = obj.foo; / / write one obj.foo () / / write two Foo ()

One of the two ways of writing is a function call and the other is an object method. Although both obj.foo and foo point to a function, their execution results may not be the same. Take a look at the following code:

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

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

So how exactly do you tell where this points? Or in which environment does this run?

Var obj = {foo: 5}

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

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

How are the foo properties saved in memory?

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

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

What if the value of the property is a function?

Var obj = {foo: function () {}}

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

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

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

Var f = function () {}; var obj = {f: F}; / / execute f () alone / / obj environment executes obj.f ()

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

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

The other variable X is used in this function.

Look at the code below

Var f = function () {console.log (this.x);} var x = 1bot var obj = {f: F, x: 2,}; / / execute f () alone / / 1 / / obj environment executes 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 the x of the global environment.

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

So, at the beginning of the article, obj.foo () finds the foo through obj, so it is executed in the obj environment. Once 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 above code execution?

Thank you for your reading, the above is the content of "how to understand the principle of JavaScript this". After the study of this article, I believe you have a deeper understanding of how to understand the principle of JavaScript this, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.