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

This article is about how to solve the problem of this pointing in js. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

The problem of this pointing in JS

Believe me, as long as you remember the seven-step tips in this article, you can thoroughly grasp the this directions in JS.

Read the formula first: arrow function, new, bind, apply and call, Obi (obj.), direct call, not in the function.

According to the order of the formula, as long as the previous scenario is satisfied, you can determine that the this is pointing.

Next, we will explain them in detail according to the order of the formula, and the sample code in this paper is run in the Console console of Chrome.

At the end of the article, there are well-prepared exercises to test the learning achievements, don't forget to try.

1. Arrowhead function

The arrowhead function ranks first because its this will not be changed, so as long as the current function is an arrowhead function, you don't have to look at other rules.

The this of the arrow function is the point of the outer this when it was created. There are two key points here:

1. When you create the arrow function, you have already determined its this point.

2. The this in the arrow function points to the outer this.

So if you want to know the this of the arrow function, you need to know the direction of the outer this, and you need to continue to apply the seven-step formula to the outer layer.

2. New

When a function is called with the new keyword, the this in the function must be a new object created by JS.

Readers may wonder, "if you use the new key to call the arrow function, will the this of the arrow function be modified?" .

Let's try it on the console.

Func = () = > {} new func () / / throw error

As you can see from the console, the arrow function cannot be used as a constructor, so it cannot be executed with new.

3. Bind

Bind refers to Function.prototype.bind () detailed address: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Only the value of the first bind is recognized for multiple bind

Error-prone point

Function func () {console.log (this)} func.bind (1) .bind (2) () / 1 the this in the arrow function will not be modified func = () = > {/ / here the this direction depends on the outer this, refer to formula 7 "not in the function" console.log (this)} func.bind (1) () / / Window, formula 1 gives priority to bind and new

Error-prone point

Function func () {console.log (this, this.__proto__ = func.prototype)} boundFunc = func.bind (1) new boundFunc () / / Object true, formula 2 gives priority to 4. Apply and call

The first argument to both apply () and call () is this, except that arguments are placed in an array when called through apply, while arguments are comma-separated when called through call.

The this in the arrow function will not be modified

Error-prone point

Func = () = > {/ / here the this direction depends on the outer this. Refer to formula 7 "not in the function" console.log (this)} func.apply (1) / / Window. Formula 1: this in the priority bind function will not be modified.

Error-prone point

Function func () {console.log (this)} boundFunc = func.bind (1) boundFunc.apply (2) / / 1, formula 3 gives priority to 5. Obj.) function func () {console.log (this.x)} obj = {x: 1} obj.func = funcobj.func () / / 1

There is no need for code examples to illustrate the higher priority of the arrow function and the bind function, so you can try it yourself if you are interested.

6. Call directly

When the function does not satisfy the previous scenario and is called directly, this will point to the global object. The global object is Window in the browser environment and Global in the Node.js environment.

Let's start with a simple example.

Function func () {console.log (this)} func () / / Window

To take a complex example, the outer outerFunc serves as a confusing purpose.

Function outerFunc () {console.log (this) / / {x: 1} function func () {console.log (this) / / Window} func ()} outerFunc.bind ({x: 1}) () 7. Not in the function

Scenarios that are not in the function can be divided into browser tags or Node.js module files.

1. In the tag, this points to Window.

2. In the module file of Node.js, this points to the default export object of Module, namely module.exports.

Non-strict mode

The strict model is proposed in ES5. Before the ES5 specification, that is, in non-strict mode, this could not be undefined or null. So * * in non-strict mode, through the above seven steps, if it is concluded that the this points to undefined or null, then the this will point to the global object. * * the global object is Window in the browser environment and Global in the Node.js environment.

For example, in the following code, in non-strict mode, this points to the global object.

Function a () {console.log ("function a:", this); () = > {console.log ("arrow function:", this)}) ()} a () a.bind (null) () a.bind (undefined) () a.bind () .bind (2) () a.apply ()

The result of execution in non-strict mode is:

In strict mode, execute the same code for comparison. Remember to copy and paste all the code into the console at once to run in strict mode (because the first line of "use strict" will only take effect on the later code).

"use strict" function a () {console.log ("function a:", this); () = > {console.log ("arrow function:", this)}) ()} a () a.bind (null) () a.bind (undefined) () a.bind () .bind (2) () a.apply ()

The result of execution in strict mode is:

The seven-step formula is complete in both strict mode and non-strict mode, except that null or undefined will be converted to global objects in non-strict mode. So I didn't include this in my formula.

Do exercises and review

Recite the formula before you do the question, "Arrow function, new, bind, apply and call, Obi (obj.), directly called, not in the function."

1. What is the func.count value after the following code is executed?

Function func (num) {this.count++} func.count = 0func (1)

Answer

Func.count value is 0.

According to the formula, when func () is called, it belongs to type 6 "direct call". In non-strict mode, the this points to the global object. This has nothing to do with func, so func.count remains the same so easy.

two。 Who does this point to in the following arrow function? Obj = {func () {const arrowFunc = () = > {console.log (this._name)} return arrowFunc}, _ name: "obj" } obj.func () () func = obj.funcfunc () () obj.func.bind ({_ name: "newObj"}) () () obj.func.bind () obj.func.bind ({_ name: "bindObj"}) .apply ({_ name: "applyObj"}) ()

/ / obj// undefined// newObj// undefined// bindObj

Isn't it easy? have you failed?

The above is how to solve the problem of this pointing in js. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.