JavaScript基础第四天-02
程序员文章站
2022-05-29 16:46:38
...
一、函数作为参数使用
10函数作为参数使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10函数作为参数使用</title>
<script>
//函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数
//只要是看到一个函数作为参数使用了,那就是回调函数
function sayHi(fn) {
console.log("您好啊");
fn();//fn此时应该是一个函数
}
function suSay() {
console.log("哈哈哈哈哈哈哈,小苏说");
}
sayHi(suSay);
// function f1(x,y) {
// console.log(x+y);
// }
// f1(10,20);
// function f2(x,y) {
// console.log(x+y);
// }
// f2("小苏","猥琐");
// function f3(x) {
// console.log(x);
// }
// f3(true);
//函数声明,fn是变量,fn是参数,
// function f1(fn) {
// fn();//函数调用---说明fn这个变量中存储的是一个函数
// }
//
// function f2() {
// console.log("哦,这也可以");
// }
// f1(f2);
// var f1=function () {
// console.log("哈哈");
// };
</script>
</head>
<body>
</body>
</html>
二、函数作为返回值使用
11函数作为返回值使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11函数作为返回值使用</title>
<script>
//结论:函数是可以作为返回值使用的:
function f1() {
console.log("f1函数调用了");
return function () {
console.log("这是一个函数");
};
}
var ff=f1();//调用
//ff就是一个函数了
ff();
</script>
</head>
<body>
</body>
</html>
三、作用域
12作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12作用域</title>
<script>
//作用域:使用范围
/*
*
* 全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
* 除了函数以外,其他的任何位置定义的变量都是全局变量
* 局部变量:在函数内部定义的变量,是局部变量,外面不能使用
* 全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存
*
* 全局作用域:全局变量的使用范围
* 局部作用域:局部变量的使用范围
*
* 块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;
* 说明:js没有块级作用域,只有函数除外
*
* 隐式全局变量:声明的变量没有var,就叫隐式全局变量
* 全局变量是不能被删除的,隐式全局变量是可以被删除的
* 定义变量使用var是不会被删除的,没有var是可以删除的
*
*
* */
// function f1() {
// number=1000;//是隐式全局变量
// }
// f1();
// console.log(number);
// var num1=10;
// num2=20;
// delete num1;//把num1删除了
// delete num2;//把num2删除了
// console.log(typeof num1);
// console.log(num1+10);
// console.log(typeof num2);
// num=100;
// console.log(num);
//扩展:隐式
// function f1() {
// var num=100;
// num+=10;
// }
// f1();//这个函数结束之后
// {
// var num=10;
// console.log(num);//10
// }
// console.log(num);//10
// if(true){
// var num=10;
// }
// console.log(num);
// for(var i=0;i<5;i++){
// var number=20;
// }
// console.log(number); 20
// var i=0;
// while (i<5){
// var num=100;
// i++;
// }
// console.log(num);
// function f1() {
// var num=10;
// }
// f1();
// console.log(num);
// var num=10;
// console.log(num);//10
</script>
<script>
//console.log(num);
</script>
</head>
<body>
</body>
</html>
四、作用域链
13作用域链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13作用域链</title>
<script>
// 从里往外一级一级找的
var num=10;
function f1() {
var num=20;
function f2() {
var num=30;
function f3() {
var num=50;
console.log(num);
}
f3();
}
f2();
}
f1();
</script>
</head>
<body>
</body>
</html>
五、预解析
14预解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14预解析</title>
<script>
//预解析:提前解析代码
/*
*
* 预解析:就是在解析代码之前
* 预解析做什么事?
* 把变量的声明提前了----提前到当前所在的作用域的最上面
* 函数的声明也会被提前---提前到当前所在的作用域的最上面
*
*
* */
//函数调用的时候,把会函数的声明提升到作用域的上面 提升到调用之前
// f1();//调用
// var num=20;//这个变量的声明会提升到变量使用之前
// function f1() {
// console.log(num);
// //var num=10;
// }
// function f1() {
// console.log("哈哈哈哈");
// }
// f1();
// function f1() {
// console.log("哈哈哈哈啦啦啦啦");
// }
// f1();
//把变量的声明提前了
// var num;
// console.log(num);
// num=10;
// function f1() {
// console.log("哈哈哈哈哈哈");
// }
//f1();//在函数前面 不报错
</script>
</head>
<body>
</body>
</html>
六、预解析案例
15预解析分段的问题的局部作用域的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15预解析分段的问题的局部作用域的问题</title>
<script>
//预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面
//函数中的变量只会提前到函数的作用域中的最前面,不会出去
//预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)
// function f1() {
//
// console.log(num);//undefined
// var num=10;
// }
// f1();
// console.log(num);//
function f1() {
console.log("哈哈");
}
</script>
<script>
f1();
function f1() {
console.log("嘎嘎");
}
</script>
</head>
<body>
</body>
</html>
16快速识别预解析的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16快速识别预解析的结果</title>
<script>
// var a = 25;
// function abc (){
// alert(a);//undefined
// var a = 10;
// }
// abc();
// console.log(a);//25
// var a;
//function a() {
// console.log('aaaaa');
//}
// console.log(a);
//
// a = 1;
// console.log(a);//1
// var a;
// a = 18;
// function f1() {
// var b;
// var a;
// b = 9;
// console.log(a);//undefined
// console.log(b);//9
// a = '123';
// }
// f1();
// function f1() {
// var a;//局部变量
// a=9;
// //隐式全局变量
// b=9;
// c=9;
// console.log(a);//9
// console.log(b);//9
// console.log(c);//9
// }
// f1();
// console.log(c);// 9
// console.log(b);// 9
// console.log(a);//报错
//console.log(parseInt(Math.random()*57+1));
</script>
<script>
f1();//-----报错
var f1=function () {
console.log(a);
var a=10;
};
function f2() {
}
f2();
</script>
</head>
<body>
</body>
</html>