函数封装的意义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var a = 10;
var b = 20;
var c = 30;
var d = 40;
console.log(a+b)
console.log(b+c)
console.log(c+d)
console.log(a+d)
function fun1(num1,num2){
console.log(num1+num2);
}
fun1(a,b);
fun1(a,c);
fun1(a,d);
</script>
</body>
</html>
创建函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1() {
console.log('创建函数');
}
fun1();
var fun2 = function(){
console.log('匿名函数');
}
fun2();
var fun3 = new Function('num1','num2','console.log("构造函数");console.log(num1+num2);');
fun3(10,20);
(function(num1,num2){
console.log('自执行函数');
console.log(num1+num2);
})(12,13);
</script>
</body>
</html>
函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1(num1,num2){
console.log(num1*num2)
}
var rel = fun1(3,4);
console.log(rel)
function fun2(num1,num2){
return num1*num2;
}
console.log(fun2(5,6));
</script>
</body>
</html>
函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1(a,b,c){
console.log(a)
console.log(b)
console.log(c)
console.log(arguments);
console.log(arguments[6]);
console.log(arguments[10]);
console.log(arguments.length);
}
fun1(1,2,3,4,5,6,7);
</script>
</body>
</html>
函数作为参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1(){
console.log('我是函数');
}
function fun2(){
console.log('我是函数2');
}
function superfun(yyy){
yyy();
console.log('执行了');
}
superfun(fun1);
superfun(fun2);
</script>
</body>
</html>
函数作为返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun1(){
return 100;
}
console.log(fun1());
function fun2(){
var num = 100;
console.log('我是一层')
return function(){
console.log(num*2);
console.log('我是二层')
return num+2;
}
}
fun2()()
var rel = fun2()();
console.log(rel)
function fun3(){
console.log('我是函数3');
return function(){
console.log('我是函数3内层');
return 999;
}
}
fun3();
console.log(fun3());
fun3()();
console.log(fun3()());
function fun4(){
var num1 = 10;
var num2 = 20;
return (function(a,b){
console.log(a+b);
return 100;
})(num1,num2);
}
fun4()
console.log(fun4())
</script>
</body>
</html>
作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var anum = 100;
function fun1(){
var aaa = '局部变量';
console.log(aaa);
console.log(anum);
abbb = 200;
}
fun1();
function fun2(){
}
fun2();
console.log(abbb);
console.log(window);
</script>
</body>
</html>
作用域链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var a = 10;
function fun1(){
var a = 20;
function fun2(){
var a = 30;
console.log(a);
}
fun2();
}
fun1();
</script>
</body>
</html>