(1) Function declaration function call
Function is to encapsulate (package) multi line function, and element function is to run multi line code encapsulated by function
- Function declarations and calls
- Object. alert is a method of the window object
- Declaration of functions and variables in advance
- Function expression
(1) Declaration and call of functions
- Declare function fuction xxx() {}
- Call the function xxx(), and the function body (code inside the function) will run only when the function is called
- js code runs in two steps:
- Parse the code first
- Run code
- Functions and variables are declared in advance
- Function is a "first-class citizen". When the program runs, no matter where the function is defined, the declaration will be executed first, so the function can be called anywhere
- Variables will also be declared as soon as they run, and they can not be assigned until the code runs to the sentence of variable declaration
<script>
// Call function
sum();
console.log('ghkjhkhk');
// Declarative function
function sum() {
var count=0;
for(var i=0;i<100;i++) {
count+=i;
}
console.log('count',count);
}
// Call function
sum();
</script>
<script>
console.log('str',str); // No error will be reported and undefined will be output
var str = 'hello';
console.log('str',str); // hello
</script>
(2) Methods in objects
The function defined in the object is the method of the object. The following say function is a method of the obj object
Alert, console and prompt are all methods of window objects
<script>
var obj = {
name: 'zhangsan',
age: 18,
say: function() {
console.log('It's Zhang San');
}
}
obj.say();
</script>
(3) Function expression (understand first)
When using a function expression to create a function, the calling function must be placed after the function
<script>
// When using a function expression, say has not been assigned here, so its value is undefined, so it cannot be called
console.log('say',say);
var say = function () {
console.log('It can talk')
};
// It must be called after the assignment (that is, after the expression)
say();
</script>(2) Function call mode
(1) Manual call
(2) Bind an event to trigger the operation of the function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="say()">Button</button>
<script>
function say(){
console.log('Ha ha ha ha ha ha ha');
}
// Call function
say();
</script>
</body>
</html>(3) Function transfer parameters (important)
- The calling function can pass in any type of parameter through (), and the called function receives the parameter (demo1) through ()
- The function receives whatever data is passed in during the call
- The parameters passed in can be of any type
- The parameters passed in are called arguments, and the parameters received are called formal parameters. The positions of formal parameters and arguments correspond to each other one by one
- Differences between basic data type and reference data type parameters (first understand)
<!-- demo1 -->
<!DOCTYPE html>
<html lang="en">
<body>
<script>
function say(a) {
console.log(a);
}
say(100);
say('abcd');
say({name:'zhangsan',age: 100});
</script>
</body>
</html>
<!-- demo2 -->
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var a = 100;
var b = 200;
say(a,b);
function say(x,y) {
console.log(x,y);
}
</script>
</body>
</html> (4) Function return value
4.1 use return to return the calculated result (whether you need to return depends on your own needs) 4.2 if you don't write return, it returns undefined by default
<script>
function add(a,b) {
var sum = a+b;
return sum;
}
var sum = add(10,20);
console.log('Call result',sum);
</script>
<script>
function add(a,b) {
var sum = a+b;
console.log(sum);
}
var sum = add(10,20);
console.log('Call result',sum); // undefined
</script> (5) Scope
What is scope?
A: the scope of a variable refers to the scope of the variable
- Scope and variables
- Scope access rules
(1) Scope and variables
-
Global scope and global variables: the global scope is window, and the variables defined under window are global variables
var num = 100; // The global variable num will automatically become an attribute of window window.num2 = 200; console.log(window.num2); consoel.log(num2); // Global variables can be accessed directly, omitting window
-
When a function runs, a local scope is formed inside the function, and the variables declared inside the function are local variables
Local variables exist when the function runs and are destroyed when the function runs
ps: the standard to distinguish between global and local variables is to see whether the variable is declared in the function
<script>
// num is a global variable
var num = 100;
// Sum, a and B are local variables because they are all in the function add
function add(a, b) {
var sum = a + b;
return sum;
}
</script>
-
js does not have a block level scope (the background language has a block level scope, which is distinguished by {})
Explanation: the scope of js takes the function as the distinguishing standard, not {}
<script> for(var i=0;i<5;i++) { console.log(2222); } console.log(i); </script>
(4) Scope rule
-
Variables outside the function can be accessed inside the function
-
Variables inside a function cannot be accessed outside a function
<script> var x = 100; function aa() { var y = 200; console.log(x); // The inside can access the outside } aa(); console.log(y); // You can't access it from the outside </script> -
Multiple nested scopes form a scope chain
When accessing a variable, search from the nearest scope. If not, search up to the next level of scope until the global scope. If found, return. If not found, an error "xxx is not defined" will be reported
<script> var x = 100; function aa() { var a = 10; function bb() { var b = 20; function cc() { var c = 30; console.log(x); console.log(y); } cc(); } bb(); } aa(); </script>