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()// 1212In 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(); //mmmmSo 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 greenWhen 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=falseSome 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); //trueHere, 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.