What are the methods of calling functions in javascript?

The methods of calling functions in JavaScript are: 1. Use the makeArray function as one of its methods and use json to declare an object; 2. Use the [obj.myFunction()] method to call the syntax.

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

The methods of calling functions in javascript are:

JavaScript function calling rules 1

Invoking the function without clear owner object Directly called functions, such as myFunction(), will cause the value of this to become the default object (the window in the browser).

Function call

Let us create a simple object now, using the makeArray function as one of its methods. We will use json to declare an object, and we will also call this method

//creating the object
var arrayMaker = {
    someProperty: 'some value here',
    make: makeArray
};
 
//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

See the difference here, the value of this becomes the object itself. You may wonder why the original function definition has not changed, why is it not window. Well, this is the function in JSavacript In the way of passing in JavaScript, a function is a standard data type in JavaScript, an object to be exact. You can pass them or copy them. It is like the entire function with the parameter list and function body is copied and assigned to The attribute make in arrayMaker is like defining an arrayMaker like this:

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

JavaScript function calling rules 2

In a method calling syntax, like obj.myFunction( ) or obj['myFunction'](), then the value of this is obj

This is the main source of bugs in the event processing code, take a look at these examples

<input type="button" value="Button 1" id="btn1"  />
<input type="button" value="Button 2" id="btn2"  />
<input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>
 
<script type="text/javascript">
function buttonClicked(){
    var text = (this === window) ? &#39;window&#39; : this.id;
    alert( text );
}
var button1 = document.getElementById(&#39;btn1&#39;);
var button2 = document.getElementById(&#39;btn2&#39;);
 
button1.onclick = buttonClicked;
button2.onclick = function(){   buttonClicked();   };
</script>

Click the first one The button will display "btn" because it is a method call and this is the object it belongs to (the button element). Clicking the second button will display "window" because buttonClicked is called directly (unlike obj.buttonClicked().) This is the same as our third button, which puts the event handler function directly in the label. So the result of clicking the third button is the same as the second one.

Using a JS library like jQuery has This advantage is that when an event handling function is defined in jQuery, the JS library will help rewrite the value of this to ensure that it contains a reference to the current event source element,

//使用jQuery
$('#btn1').click( function() {
    alert( this.id ); // jQuery ensures 'this' will be the button
});

related Free learning recommendations: javascript video tutorial

The above is the detailed content of What are the methods of calling functions in javascript?. For more information, please follow other related articles on the PHP Chinese website!