Detailed introduction to the usage of this object in js

This article mainly introduces the detailed analysis of the usage of this object in js. Friends who need it can learn and share it.

This object is bound based on the execution environment of the function when the function is running.

In fact, the essence of this sentence is that whoever calls the function, this will point to him

Specifically speaking, there are usually the following situations:

Global function

In the global environment, this points to Window

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

The above example is very simple. Function A is executed in the global environment, that is, the global object Window calls the function. At this time, this points to Window

Object method

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

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

What we have mentioned here The examples are relatively simple and easy to understand. Next is an interesting one:

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

This example is different from the previous one. When running c.getFunc(), an anonymous function is first returned. We will Assigned to cFun, and then called cFun() in the global environment, so this still points to Window at this time.

What if we must return a c object here? We said at the beginning that the this object is determined when the function is executed. In Example 3, when c.getFunc() is executed, the this object still points to c, so we only need to keep this this. For the above The code has been slightly changed:

//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

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

call and apply

At this time, the this object usually points to the this value specified in the function (note the usual 2 words here, which will be tested in the exam)

call and apply are clichés, but I’ll give them a brief introduction in case new students may not have been exposed to them (actually just to make up some words). Take call as an example, the syntax is as follows

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

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

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

Here we can see the meaning of the call function: specify an object o1 to call the method of other object o2, at this time this object points to o1

Okay, then why did we say usually before? Because thisArg here can be specified as null and undefined. Please see:

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

This at this time points to the global object Window

Arrow function

The arrow function in es6 is also used more frequently now. But one thing to note is:

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

In fact, the fundamental reason for this situation is: the arrow function does not have this object, so the this of the arrow function is the this of the outer code

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

This example is basically the same as the previous example 2 , just rewrite the ordinary function into an arrow function, but at this time 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:

//例子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, g’s getThis writing method is the same as the previous example 3. Since the function is in the global environment Running in, so this points to Window at this time; h's getThis uses the arrow function, so this points to this of the outer code block. Therefore, this points to h at this time.

Summary

Generally, this object points to the object of the calling function. In the global environment, the execution function this object points to the Window

In the call and apply functions This points to the specified object. If the specified pair is undefined or null, then this object points to Window

. In the arrow function, this object is equivalent to this

of the outer code block and then still It ends the same every time. If there are any errors in the content, please point it out. If it is helpful to you, please like and save it. Thank you for supporting Script House.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How express multer implements the image upload function

How to implement table header and first column fixation in Vue

How to use the picture annotation component in jquery.picsign

The above is the detailed content of Detailed introduction to the usage of this object in js. For more information, please follow other related articles on the PHP Chinese website!