Table of contents
1. What is a function
Similar to the method in Java, it is a classification of code statement block
characteristics to complete a specific task
使用更简单
不用定义属于某个类，直接调用执行
系统函数
自定义函数
1.1, common system functions
1.将字符串转换为整型数字
parseInt("字符串");
<body>
<input type="button" value="求和" onclick="qiuhe()">
</body>
<script>
var num1 = parseInt("56.64"); //返回值为56
var num2 = parseInt("123abc"); //返回值为123
var num3 = parseInt("hello999"); //返回值为NaN
console.log(num1,num2,num3);
function qiuhe(){
var n1 = prompt("请输入第一个数")
var n2 = prompt("请输入第二个数")
var num1=parseInt(n1)
var num2=parseInt(n2)
if(isNaN(num1)||isNaN(num2)){
alert("有一个不是数字");
}else{
document.write(num1+num2)
}
}
</script>
js example 1
Starting from the subscript 0, judge whether each character can be converted into a valid number in turn.
If not a valid number, return NaN, and do not continue to perform other operations
. If it is a valid number, the function will check the character whose subscript is 1. , perform the same test until characters that are not valid numbers are found or all are detected
2.将字符串转换为浮点型数字
parseFloat("字符串");
var num1 = parseFloat("3.1415926"); //返回值为3.1415926
var num2 = parseFloat("123abc"); //返回值为123
var num3 = parseFloat("hello999"); //返回值为NaN
var num4 = parseFloat("52.18.97"); //返回值为52.18 如果有两个小数点则第二个小数点无效
console.log(num1,num2,num3);
3.检查其参数是否是非数字
isNaN(x);
var num1=isNaN("20.5"); //返回值为false
var num2=isNaN("123abc"); //返回值为true
var num3=isNaN(48.98); //返回值为false
console.log(num1,num2,num3);
Usually, use the isNaN() function to detect the operation results of parseInt() and parseFloat() to determine whether they represent qualified numbers; you can also use the isNaN() function to detect whether there is an error in the operand, for example: using 0 as the
divisor Condition
1.2, function declaration
It consists of the keyword function, the function name, a set of parameters, and the JavaScript statement to be executed in parentheses
语法
// JavaScript是弱数据类型，对于函数参数没有类型检查和类型限定
function 函数名([参数1[, 参数2[, 参数3,…] ] ]) {
//JavaScript语句;
[return 返回值] // return可有可无
}
调用函数
// 一般和表单元素的事件一起使用
事件名＝“函数名([参数值1[, 参数值2[, 参数值3,…] ])";
Function declaration - calling a function without parameters
// 定义并调用无参函数，输出5次“你好”
<body>
//单击此按钮时，调用函数func1( )，执行函数体中的代码
<input type="button" value="点我执行" onclick="func1()">
</body>
<script>
function func1(){
for(var i=0;i<5;i++){
document.write("<h1>你好"+i+"</h1>")
}
}
</script>
js example 2
Function declaration - calling a function with parameters
// 键盘接受“你好”输出行数，并按指定数字输出到网页
<body>
<input type="button" value="点我执行" onclick="func1(prompt('请输入显示你好的次数：'))">
</body>
<script>
function func1(count){
for(var i=0;i<5;i++){
document.write("<h1>你好"+i+"</h1>")
}
}
</script>
js example 3
1.3, function expression
将函数赋给变量
定义函数
var 变量 = function([参数值1[, 参数值2[, 参数值3,…] ]) {
//JavaScript语句;
};
调用函数
变量([参数值1[, 参数值2[, 参数值3,…] ]);
function expression
// 使用函数声明的方式定义两个函数名都为f1()的函数
f1();
function f1(){
var num3 = 100;
console.log(num3)
}
function f1(){
console.log("今天天气很好！")
}
f1();
function f1(){
console.log("今天天气好晴天，处处好风光");
}
f1();
// 使用函数表达式方式定义两个函数名都为f2()的函数
var f2 = function(){
console.log("哇~");
}
f2();
var f2 = function(){
console.log("娃哈哈~");
}
f2();
When using function declaration to define two functions with the same name, the latter function will overwrite the previous function;
when using function expression to define functions with the same name, the code will be executed line by line from top to bottom, and the result will be output
Second, pre-analysis
As the name implies, it is to parse the code in advance
and mainly complete two tasks
其一，变量的声明会提前
其二，函数的声明也会被提前
// 预解析可以把变量的声明提前
console.log(num); //undefined
var num=10;
// 预解析可以把函数的声明提前
f1();
function f1() {
var num=100;
console.log(num); //100
}
2.1, function self-call
Classification of custom functions
命名函数
匿名函数
语法
(function() {
//函数体
})();
Characteristics of anonymous functions
函数没有名字，在声明的同时便直接调用
Benefits
同名函数之间不会有冲突
( function(){
console.log("立即执行函数");
})();
2.2, callback function
Notice
如果没有指定回调函数的名称，则称之为 匿名回调函数
function f1(fn){
console.log("f1");
fn()
};
function f2(){
console.log("f2");
return 1
};
f1(f2); // 执行命名回调函数，注意f2后面不能加()
function f1(fn){
console.log("f1");
fn()
};
f1(function(){
// 匿名函数
console.log("我没有名字!");
})
Third, the scope of variables
Classify local variables and global variables according to the scope of variables
在函数内部声明的变量（必须使用var）
只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量
在函数外声明的变量
网页的所有脚本和函数都能访问它
var x = 10;
function f1(){
var y = 5;
console.log(x); // 10
console.log(y); // 5
}
f1();
console.log(x); // 10
console.log(y); // y is not defined
The difference between local variables and global variables
| the difference | local variable | global variable |
|---|---|---|
| scope | only works in functions | apply to the entire script |
| declaration position | in function | use any previous location |
| lifetime | is deleted after the function runs | is deleted after the page is closed |
3.1, implicit global variables
If a variable is declared without the keyword var, it is called an implicit global variable
示例
var a1 = 1; //全局变量
a2 = 2; //隐式全局变量
If the keyword var is not used when declaring a variable inside a function, it is also an implicit global variable
function f1(){
var num = 100;
}
f1();
console.log(num); // 函数会报错
function f1(){
num = 100;
}
f1();
console.log(num);
与解析：
1.会把全局变量的“声明”提前
2.提前声明函数，但是函数内部的代码是不执行的
局部变量：必须在函数内部使用var/let声明，如果不使用，则称为隐式全局变量
隐式全局变量：只有在执行后使用，
全局变量和局部变量可以重名，使用就近原则
Four, scope and block scope
Scope
是变量与函数的可访问范围
控制着变量与函数的可见性和生命周期
block-level scope
由花括号“ { } ”限定
所有的变量都定义在花括号内
变量从定义开始到花括号结束的范围内可以使用
usage scenarios
正常带有大括号的语句
条件语句
循环语句
函数
正常带有大括号的语句
{
var num = 10;
}
console.log(num); // 10
// 条件语句
if(true){
var num = 20;
}
console.log(num); // 20
// 循环语句
for(var i=0;i<5; i++){
var num = 30;
}
console.log(num); // 30
// 函数
function f1(){
var num = 50;
}
f1();
console.log(num); // num is not defined
Five, the scope chain
Scope Chain
是JavaScript内部一种变量、函数查找机制
决定了变量和函数的作用范围
When executing a function, first look for local variables inside the function
如果内部找不到，则向创建函数的作用域寻找，依次向上
如果最终没有找到，通常会报错
var num = 10; // <script>里定义的变量，是0级作用域
function f1(){
var num = 20; // 1级作用域
function f2(){
var num = 30; // 2级作用域
function f3(){
var num = 50; // 3级作用域
console.log(num);
}
f3();
}
f2();
}
f1()
Six, closure
How to read the local variables in the function outside the function?
Closure
能够读取其他函数内部变量的函数
是将函数内部和函数外部链接起来的桥梁
implementation steps
在一个函数的内部，再定义一个函数
把内部的函数作为返回值
Features
函数嵌套
内部函数可以访问外部函数的变量
参数和变量不会被回收
Typical applications
实现回调函数
// 1.在函数内部定义一个函数
// 2. 把内部函数作为外部函数的返回值
// 原理：利用了内部函数可以调用外部函数的变量
function f1(){
var num = 20;
function f2(){
alert(num);
}
return f2;
}
var result = f1();
result();
Function
可以读取函数内部的变量
让这些变量的值始终保存在内存中
Disadvantage
在父函数外部，可以改变父函数内部变量的值
常驻内存，会增大内存使用量，使用不当很容易造成内存泄露