Example analysis of the usage example of JS function this

This example describes the usage of JS function this. Share it for your reference. The details are as follows:

When writing functions in js, this is used a lot. What exactly is this? This is a keyword, a pointer, pointing to the scope of the execution environment, also called the context.

Let’s talk about functions first. Personally, I understand that functions are code blocks that are called repeatedly in the language.

In JS, when a function is assigned to an object's properties, it is called a method

like:

 var m={};m.title='title';m.show=function(){alert(this.title)}m.show()

It is to call the function as the method of the object m

In this case, this points to the object m.

The direct call function name is called a function:

 var a=1212;function show(){alert(a)//1212}show()// 1212

In a global environment, global variables can be understood as window properties, and global functions are window methods

See the following example:

 var m ={};m.id='mmm';m.show=function(){ alert(this.id);}var a={};a.id='aaa';a.show=m.show;a.show(); //aaaa.show=m.show; Understand this sentence first, because a function is an object, m.show=function(){ alert(this.id)}

This expression is equivalent to referring to a.show and m.show at the same time

 function(){ alert(this.id)}

Actually equivalent to

 a.show=function(){ alert(this.id)}

So when a.show() is called, this points to an object a,

Look at the following chestnut

 var m ={};m.id='mmm'm.show=function(){ alert(this.id)}var a={}a.id='aaa'a.show=function(){ m.show()};a.show(); //mmmm

So when calling a.show(), it is equivalent to calling the method of m.show(), so this. points to an m object.

Look at the following example, I still didn't understand it very much at the beginning

 var color='red';var app = {};app.color="green";app.paint=function(node){node.style.color=this.color; alert(this.color);}function findNode(callback){ var btn =document.querySelector('.btn'); callback(btn);//pass in, }findNode(app.paint); alert(this.color); //red instead of green

When a function passes argument, it passes arguments according to value, not references

So when findNode(app.paint); is transmitted, it is actually

 function(node){ node.style.color=this.color; alert(this.color);}

, because findNode is globally defined, this points to WINDOW OR UNDEFINED;

About passing parameters, passing past values

 function show(a){ alert(a)}

It is easy to understand when the parameters are basic data types

 var b=10;show(b)//alert(10);

As for the object

 var c ={};c.prop=true;var showProp=function(obj){obj.prop=false}showProp(c); //c.prop=false

Some people think that the example above is to pass parameters according to the reference

In fact, the above is still passing parameters according to the value. When showProp(c) passes c into the function, c is actually equivalent to a reference. The function has obj.prop=false, which is equivalent to changing the referenced object to {prop:false}

Look at the following example

 var c ={};c.prop=true;var showProp=function(obj){ obj = new Object(); obj.prop=false return obj;}showProp(c);alert(c.prop); //true

Here, the incoming obj has been modified. If you pass parameters according to the function by reference, the modifications inside the function will definitely be reflected outside.

I hope this article will be helpful to everyone's JavaScript programming.