Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use this objects in JavaScript". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope this article "how to use this objects in JavaScript" can help you solve the problem.

The this object is bound based on the execution environment of the function while the function is running.

In fact, the essence of this sentence is that this points to whoever calls the function.

Specifically, there are usually the following situations:

Global function

In the global environment, this points to Window

/ / example 1 function A () {console.log (this)} A (); / / Window

The above example is very simple, function An is executed in the global environment, that is, the global object Window calls the function. Now this points to Window

Object method

When called as an object method, this points to the object that called the method

/ / example 2var b = {getThis:function () {console.log (this)}} b.getThis () / / b

All the examples we have given here are easy to understand, so here's an interesting one:

/ / example 3 var c = {getFunc:function () {return function () {console.log (this)} var cFun = c.getFunc () cFun () / / Window

This example is different from the previous example, when you run c.getFunc (), you first return an anonymous function, we assign this function to cFun, and then you call cFun () in the global environment, so this points to Window at this time.

What if we have to return a c object here? As we said at the beginning, the this object is determined when the function is executed, and in example 3, when c.getFunc () is executed, the this object points to c, so we just have to keep the this and make minor changes to the above code:

/ / example 4 var c = {getFunc:function () {var that = this / / keep this return function () {console.log (that)} var cFun = c.getFunc () cFun () / / c here

This is why we can often see var self = this or var that = this in some code.

Call and apply

At this point, the this object usually points to the value of this specified in the function (note that there are usually 2 words here, for the exam)

Call and apply are platitudes, but I would like to introduce them a little bit, afraid that the new students may not have come into contact with them (in fact, in order to count the words). Take call as an example, the grammar is like this.

Fun.call (thisArg, arg1, arg2,...)

How to use this method, take a look at the following example:

/ / example 5var d = {getThis:function () {console.log (this)}} var e = {name:'e'// (write e a `name` attribute just because you think it's too ugly to be alone ~)} d.getThis.call (e) / / e

Here we can see the meaning of the call function: specify an object o1 to call the methods of other objects o2, and the this object points to o1.

Okay, so why did we say usually? Because the thisArg here can be specified as null and undefined. Please look at:

/ / example 6var d = {getThis:function () {console.log (this)}} d.getThis.call (null) / / Window d.getThis.call (undefined) / / Window

The this at this time points to the global object Window

Arrowhead function

The arrow function in es6 is also used more frequently now, but there is one thing to note:

The this object in the body of the function is the object in which it is defined, not the object in which it is used.

In fact, the root cause of this situation is that the arrow function does not have a this object, so the this of the arrow function is the this of the outer code.

/ / example 7 var f = {getThis: () = > {console.log (this)}} f.getThis () / / Window

This example is basically the same as the previous example 2, except that the ordinary function is rewritten into an arrow function, but at this point the this object already points to the outer Window.

Considering that this may not be easy to understand, let's look at a few more examples:

/ / example 8 var g = {getThis:function () {return function () {console.log (this)} var h = {getThis:function () {return () = > console.log (this)}} g.getThis () () / / Window h.getThis () () / / h

In this example, the getThis of g is the same as the previous example 3. Because the function runs in the global environment, the getThis of this pointing to Window;h uses the arrow function, so this points to the this of the outer code block, so this points to h at this time.

This is the end of the introduction to "how to use this objects in JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.