Detailed explanation of usage examples of this object in js

This object is bound based on the execution environment of the function when the function is running. This article mainly introduces a detailed analysis of the usage of this object in js. Friends who need it can learn and share it. I hope it can help everyone.

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

Specifically, 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 in the global environment Execution, that is, the global object Window calls the function. At this time, this points to the 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

The examples we have given so far 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 assign this function to cFun, and then call 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 is 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 that the two words here are usually required for the exam)

call and apply are clichés, but let’s introduce them a little bit, fearing that new students may not have been exposed to them (actually just to make up the word count), take call as an example, the grammar is like this

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

How to use this method, 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 a Object o1 calls the method of other object o2. At this time, this object points to o1

. Well, then why did we say normal 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

es6 Arrow functions are now used more frequently, 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 root cause of 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, except that the ordinary function is rewritten 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 is written just like the previous one Same as Example 3, since the function runs in the global environment, 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 that calls the function, and in the global environment when the function is executed, this object points to the Window

In 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 arrow functions, this object is equivalent to the outer code block this

Related recommendations:

Detailed examples of the difference between this and event in js

This causes bug analysis in JS

Comprehensive analysis of this in JavaScript

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