JS function usage example analysis _ javascript skills

This article mainly introduces the usage of the JS function this. the example analyzes the functions, definitions, and related usage skills of this in javascript, for more information about how to use the JS function this, see the example in this article. Share it with you for your reference. The details are as follows:

When writing a function in js, many users use this. this is exactly what it is. this is a keyword, a pointer, pointing to the execution environment scope, also known as context.
Let's talk about functions first. in my personal understanding, a function is a code block that is repeatedly called in a language.
In JS, when a function is assigned to an object's attribute, it is called a method.
For example:

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

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

Directly call several functions:

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

In the global environment, global variables can be understood as window attributes, and global functions are window methods.
See the following example:

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

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

function(){  alert(this.id)}

Actually equivalent

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

Therefore, when calling a. show (), this points to object,
Let's look at the next 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

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

Let's look at the next example. I still don't understand it very well 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); // passed in,} findNode (app. paint); alert (this. color); // red instead of green

When a function transmits a parameter, it transmits the parameter by value instead of referencing the parameter.

So the findNode (app. paint) is actually

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

Because findNode is globally defined, this points to window or undefined;

For parameter passing, passing by value

function show(a){  alert(a)}

It is easy to understand when the parameter is of the basic data type

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

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 by reference.
In fact, when showProp (c) transfers c to the function, c is actually equivalent to a reference. prop = false, equivalent to changing the referenced object to {prop: false}

Let's 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 is modified here. if parameters are passed by reference according to the function, the changes in the function will certainly be reflected in the external

I hope this article will help you design javascript programs.