Usage example analysis of JS function this_javascript skills

The example in this article describes the usage of JS function this. Share it with everyone 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 and a pointer, pointing to the execution environment scope, also called context.
Let’s talk about functions first. My personal understanding is that functions are code blocks that are called repeatedly in the language.
In JS, when assigning a function to a property of an object, it is called a method
Such as:

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

Is to call the function as a method of object m
In this case, this points to the object m.

Directly calling the function name is called a function:

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

In the global environment, global variables can be understood as properties of window, and global functions are methods of window
Look at the example below:

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

a.show=m.show;  先理解这句话，因为函数是个对象，
m.show=function(){
  alert(this.id)
}

This expression is equivalent to a.show and m.show simultaneously referencing

function(){
  alert(this.id)
}

is actually equivalent to

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

So when calling a.show(), this points to the a object,
Take 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(); //mmm

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

Look at the following example again. I still don’t understand it at first

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);//传进来，
}
findNode(app.paint);
alert(this.color); //red 而不是green

When function parameters are passed, parameters are passed by value, not by reference

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

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

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

About passing parameters, pass them by value

function show(a){
  alert(a)
}

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 above example is passing parameters by reference
In fact, the parameters above are still passed by value. When showProp(c) passes c into the function, c is actually equivalent to a reference. Obj.prop=false in the function 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

The incoming obj has been modified here. If parameters are passed by reference according to the function, the modifications in the function will definitely be reflected externally

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