Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to understand and master this in JavaScript

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces "how to understand and master this in JavaScript". In daily operation, I believe many people have doubts about how to understand and master this in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to understand and master this in JavaScript"! Next, please follow the editor to study!

Let's look at a piece of code first:

Let from = 'WuHan'; var obj = {from:' BeiJing', logFrom: function () {console.log (from);}}; let logFrom = obj.logFrom; logFrom (); obj.logFrom ()

Execute the above code, and the printed result is:

Print results are WuHan, this example is mainly confused by the following two from definitions, the first belongs to the global variable, the second belongs to the local variable, the logFrom function uses the global from or the from inside the obj object. The answer is "use global from".

What should I do if I want to use the from defined within the obj object? This needs to enter the topic we are going to discuss today, "this mechanism". What bothers readers more deeply is who this stands for. Remember the saying, "this always represents an object."

When you replace the above code with (replace the print statement console.log (from) with console.log (this.from)):

Var obj = {from: 'BeiJing', logFrom: function () {console.log (this.from);}}

When performing:

Let logFrom = obj.logFrom; logFrom ()

The result of execution is undefined.

When performing:

Obj.logFrom ()

The result of execution is BeiJing.

Why is that?

This is actually a property that is "dynamically" bound to an execution context, that is, a this property is bound when an execution context is built. There are mainly two kinds of execution context: global execution context and function execution context, so there are two kinds of this, one is this in global execution context, the other is this in function execution context.

(1) when a function is executed globally (in parentheses), this points to the global object. In the browser, if this is undefined in strict mode, this is window in non-strict mode. For example, let logFrom = obj.logFrom, when the variable logFrom is a global variable, by calling a function globally, this is window (in this case, it belongs to non-strict mode), and window has no attribute from, so the result is undefined.

Here is a question for you to think about. If you replace let in the first line of code with var, what will be the result?

(2) when a method is called through an object, this is the current object. For example, using obj to call the method logFrom,this is obj, so the printed result is BeiJing.

Using items 1 and 2 can solve most this problems, but there is one situation that needs to be noted. For example, the following code:

Let lefex = {name: 'suyan', age: 0, addAge: function () {console.log (' outer this =', this); this.age + = 2; setTimeout (function () {console.log ('inner this =', this); this.age + = 1;}}; lefex.addAge ()

The print result is (executed in non-strict mode):

It turns out that the two this are not the same, and the inner function does not inherit the this of the external function. To solve this problem, you have ugly code like let that = this.

Of course, you can use the arrow function to solve this problem:

This points to the currently created object, and this in the following code refers to suyan.

Function Person (name) {this.name = name; console.log (this);} let suyan = new Person ('suyan'); at this point, the study of "how to understand and master this in JavaScript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report