JavaScript function calls

The function body code will be executed when the function is called.

Javascript functions have 4 calling methods:

Ordinary function call

Method call

Constructor call

By call( ) and apply() indirect calls

##1. Ordinary function calls

The most commonly used function calling methods, such as:

alert("hello");

##var result = add(1, 2);

2. Method call

//Define a function

function hello(name) {

alert('hello,' + name) ;

};

var user = {};

// Assigned to user’s sayHi attribute
##user.sayHi = hello;

//Method call

user.sayHi('Zhang San');

One difference between ordinary function calls and method calls: in "ordinary In the "function call" method, the calling context of the function (the value of this) is the global object (non-strict mode) or undefined (strict mode). In the "method call" method, this points to the current object. Using this feature, we can directly return this when the method does not require a clear return value, thereby realizing "method chaining".

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>
</body>
</html>

This in nested functions: In nested functions, the inner function will not inherit the this of the outer function, that is, when the inner function is called as a method, the this of the inner function points to the current calling object. ;When the inner function is called as a function, the value of this is the global object (non-strict mode) or undefined (strict mode). How to access this of the outer function in the inner function? This is usually saved in a local variable and accessed through variables:

var obj = {

f : function() {

var self = this;

console.log(this === obj);//true, this points to the current object

F1 ();

This

# console.log(this === obj);//false, this is a global object or undefined

## console.log(self === obj);// true, self points to the outer this, that is, the current object

}

} ;

3. Constructor call

When you use the new keyword to create an object, the constructor is called. If the constructor has no formal parameters, you can omit the parentheses:

var obj = new Object();

//Equivalent to

var obj = new Object;

Call the constructor and create a new object. This new object will become the calling context of the constructor (the value of this):

function User(name) {

this.name=name;

console.debug(this);

##}

var user = new User('Zhang San');

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>
</body>
</html>

4. Through call() and apply( ) Indirect call

Functions in Javascript are also objects and have methods. Among them, call() and apply() can be used to call functions indirectly. The first parameter of call() is used to specify the calling context (that is, the value of this), and the subsequent parameters are the actual parameters passed into the calling function.

var name = 'A';

var user = {

name : 'B'

};

function showName() {

# # alert(this.name);

}

##showName();//A, this is a global object

showName.call(user);//B, this is the user object

apply() is similar to call(), but the difference The problem is that the subsequent actual parameters need to be passed in the form of an array (the arguments array of the current function can be passed in directly).

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function sum(x,y){ return x+y; } result = sum(2,3); document.write( result ); </script> </head> <body> </body> </html>

submit Reset Code

Automatic operation

JavaScript function calls

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]