Objects and methods of javascript function calls_javascript skills

If you really understand how Javascript function calls work, you can avoid some bugs;
First let us create a simple function, which will be used below. This function only returns the current value of this and Two provided parameters.

Copy code The code is as follows:

function makeArray(arg1, arg2 ){
return [ this, arg1, arg2 ];
}

Calling this function is very simple, all we need to do is:

Copy code The code is as follows:

makeArray('one', 'two');

Return value: => [ window, 'one', 'two' ]
The problem arises, how did the value of this become window? Let’s do a simple analysis:
In Javascript, there is a global object. Every line of code that seems to be scattered in your script is actually written in the context of a global object. In our example , in fact, the makeArray function can be said to be not a loose global function, but a method of the global object. Let us return to the browser. In this environment, its global object is mapped to the window object. Let us prove it :

Copy code The code is as follows:

alert( typeof window.makeArray);

Return value: => function

All of this means that the method we called makeArray before is the same as the method called below,

Copy code The code is as follows:

window.makeArray('one', 'two');

Return Value: => [ window, 'one', 'two' ]

JavaScript function calling rule 1: In a function that is called directly without an explicit owner object, such as myFunction(), this will result The value becomes the default object (the window in the browser).

Now create a simple object and use the makeArray function as one of its methods. We will use json to declare an object. We will also call this method:

Copy code The code is as follows:

var arrayMaker = {
someProperty: 'some value here',
make : makeArray
};
arrayMaker.make('one', 'two');
// Return: => [ arrayMaker, 'one', 'two' ]
arrayMaker[' make']('one', 'two');
// Return: => [ arrayMaker, 'one', 'two' ]

The value of this becomes an object arrayMaker itself. You may wonder why the original function definition has not changed, why is it not a window. Functions are objects, and you can pass them or copy them. It is as if the entire function along with the parameter list and function body are copied, and is assigned to the attribute make in arrayMaker, then it is like defining an arrayMaker like this:

Copy the code The code is as follows:

var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {return [ this, arg1, arg2 ];}
};

JavaScript function calling rule 2: When using method calling syntax, such as obj.myFunction() or obj['myFunction'](), the value of this is obj.

This is the main source of bugs in event handling code, take a look at the following example:

Copy code The code is as follows:

We know that there are no classes in Javascript, and any custom type requires an initialization function. Use the prototype object (as an attribute of the initialization function) to define your Type, let’s create a simple type

Copy the code The code is as follows:

function ArrayMaker(arg1, arg2) {
this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ];
}
//Declare instantiation method
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return this.theArray;
}
};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );
am.getArray( );
// Return value: => [ am, 'one' , 'two' ]

It is worth noting that the new operator appears in front of the function call, without it, Functions are like global functions, and the properties we create will be created on the global object (window), and you don't want that. Another topic is that because there is no return value in your constructor, if you Forgetting to use the new operator will cause some of your variables to be assigned undefined. For this reason, it is a good habit to start the constructor function with a capital letter. This can be used as a reminder so that you do not forget the previous one when calling it. new operator.

Javascript function calling rule 3: When you use a function as an initialization function, like MyFunction(), the Javascript runtime will assign the value of this to the newly created object.