Briefly describe the direction of this in JS

This is the front-end small class of the Xiuzhen Academy. Each shared article is from

[background introduction] [knowledge analysis] [common problems] [solutions] [coding practice] [extended thinking] [more discussion] [References]

Eight aspects of in-depth analysis of front-end knowledge / skills. This article shares:

[briefly describe the direction of this in JS]

1. Background introduction

When writing code, we often hope that a function has the same behavior style in different environments, but the specific performance is different. This is needed at this time.

This is a keyword of JavaScript and a special object (or this reference) inside a function. This refers to different objects in different context execution environments, so we can use the same this code to output different results, so as to simplify the code.

1.1 characteristics of this

It will automatically change its reference object according to the code context

The point of this cannot be determined when the function is defined. Only when the function is executed can we determine who this points to. In fact, this finally points to the object that calls it.

2. Knowledge analysis

2.1 called in the global environment as a normal function

First code:

Common objects in the global environment

Here, a function is called, and the execution environment of a function is the global environment. This here also points to the global variable window.

In the global environment, this always points to the window, so when called as an ordinary function in the global environment, this also points to the window.

2.2 called as an attribute of an object

Let's summarize: if a function is used as an object's attribute method and is called, this in the attribute method points to the object. Look at the code:

However, when the function is redefined in the object method, this is window again

2.3 called as constructor

When called as a constructor, this represents the object it is about to new out; If new is not added, it means that it is called as a normal function and points to window.

2.4 call as call / apply / bind method

When called as the call / apply / bind method, it points to the value passed in.

2.5 others: this in setTimeout and setinterval; Constructor prototype attribute; Eval function; Arrow function.

3. Frequently asked questions

1. What if this encounters a return? What do you mean? Look

What do you mean?

If the return value is an object, this refers to the returned object. If the return value is not an object, this still points to the instance of the function.

2. What happens in strict mode?

In strict mode, when a function call is executed in the global environment, this does not point to window, but to undefined

3. What is strict mode?

In addition to the normal operation mode, ECMAScript 5 adds a second operation mode: (strict mode). As the name suggests, this mode enables JavaScript to run under more stringent conditions.

The purpose of establishing "strict mode" mainly includes the following:

-Eliminate some irrationality and imprecision of JavaScript syntax and reduce some strange behaviors;

-Eliminate some unsafe places in code operation and ensure the safety of code operation;

-Improve the efficiency of the compiler and increase the running speed;

-Pave the way for a new version of JavaScript in the future.

"Strict mode" reflects the development direction of JavaScript that is more reasonable, safer and more rigorous. Mainstream browsers, including ie 10, have adopted it, and many large projects have begun to embrace it.

On the other hand, the same code may have different running results in "strict mode"; Some statements that can run in normal mode will not run in strict mode. Mastering these contents will help you to have a more detailed and in-depth understanding of JavaScript and make you a better programmer.

4. Expand thinking

Q1: what is the use of the apply method? Under what circumstances can I use apply?

Apply: the method can hijack the method of another object and inherit the properties of another object, Call: it means the same as apply, but the parameter list is different.

In the case of giving object parameters, if the parameter is in the form of array, for example, the parameter arguments is passed in the apply example, and the parameter is of array type, and the parameter list is consistent when calling person (that is, the first two digits of the parameter list of person and student are consistent), apply can be adopted, If the parameter list of my person is (age, name) and the parameter list of student is (name, age, grade), it can be implemented by call, that is, directly specify the location of the corresponding value of the parameter list (person. Call (this, name, grade));

Q2: what is ES6?

ECMAScript 6 (hereinafter referred to as ES6) is the next generation standard of JavaScript language, which was officially released in June 2015.

Q3: what is bind for? When will it be used?

The simplest use of bind () is to create a function that has the same this value no matter how it is called. The scene is in binding function, partial function, setTimeout, etc

Q4: when to use apply and when to use call

Use apply when the passed parameter is in the form of array, and call on the contrary

5. References

Reference 1:

Ppt link video link