大纲 :
1.js代码执行流程
2.函数的声明与匿名函数自执行:
普通函数/匿名函数及其自执行
普通函数/匿名函数/箭头函数/2者区别
3.var和let区别与函数作用域：
var和let作用域区别
匿名函数/箭头函数this指向
4.内置函数
js代码执行流程
流程：先进行词法解析在是代码执行
词法解析：整理整个代码中的关键字，进行分配空间（不同类别函数分配时间不同）但此时不进行函数内代码执行和变量赋值
代码执行：进行函数内代码执行和变量赋值
<script>var num = 10;function funk(){console.log(num);let num = 20;console.log(num);}funk();
</script>
<body>
<script>var num = 10; //在函数外部的变量为全局变量，在函数内部的称局部变量，如果全局变量和函数内部变量同名，函数内部会先使用局部变量function funk(){console.log(num);var num = 20; //let换成var则变量的使用可以在其声明前console.log(num);}funk();
</script>
</body>
函数的声明与匿名函数自执行
普通函数/匿名函数及其自执行
普通函数：
<script>function funk(){console.log("你好");}funk();
</script>匿名函数：
声明：
<script>var funk = function(){console.log("你好");}funk();
</script>自执行：<script>var funk = (a,b)=>a+b;console.log(funk(1,2));</script>箭头函数：
声明：
方式一：<script>var funk = ()=>{console.log("你好");}funk();</script>方式二：函数代码块只有一行return代码时<script>var funk = (name)=>name;console.log(funk("guohan"));</script>自执行：
<script>((name)=>{console.log(`${name}`);})("guohan");
</script>普通函数/匿名函数/箭头函数/2者区别
普通函数和匿名函数：
分配空间时间：普通函数在词法检测阶段 匿名函数在代码执行阶段
匿名函数和箭头函数：
箭头函数是特殊的匿名函数
在作用域上的区别：
匿名函数this指向调用该方法的实例对象
箭头函数this指向父级作用域里的this
var和let声明变量时的区别与函数作用域
var和let声明变量时的区别
变量： 全局变量定义在全局作用域下，且可以被任意子作用域内进行使用，在网页代码执行完后被浏览器收回
局部变量定义在子作用域下，在函数运行时创建，当函数运行结束被浏览器回收，下次函数继续被调用继续创建
当局部变量和全局变量同名则函数优先使用局部变量，且此时局部变量屏蔽全局变量
var和let声明变量的区别： 1.作用域：var和let声明的变量在函数里时： var的作用域是函数 let作用域是花括号{}
2.变量使用和声明前后关系： var声明的变量可以在其声明前使用 let声明的变量必须在声明后使用
<body>
<script>var num = 10function funk() {console.log(num);let num = 20;console.log(num);}funk();
</script>
</body>
#####报错<script>var num = 10function funk() {console.log(num); //undefinedvar num = 20;//局部变量和全局变量同名使用局部变量，且屏蔽全局变量 且var声明的变量可以在其声明前使用//由于进行词法解析时分配了函数内部num的内存空间但未进行赋值，所以第一次打印undefinedconsole.log(num); //20}funk();
</script>匿名函数/箭头函数this指向
匿名函数this指向调用该方法的实例对象
箭头函数this指向父级作用域里的this
<script>
var xiaoming = {name:"小明",age:20,
}
xiaoming.say = function(){console.log(this.name);
}
var func = ()=>{ //父级作用域为全局，全局this为windowconsole.log(this.name);
}
xiaoming.call = func;
xiaoming.say(); //匿名函数的this指向调用此方法的实例对象
xiaoming.call(); //箭头函数的this指向父级作用域里的this
</script>
>>>小明
>>> //window对象的name为空 age未定义则是undefined
内置函数
parseInt（）/parseFloat（）
alert（message）：弹出警告框
confirm（message）：弹出确认框
prompt（message）：弹出一个确认输入框
定时器函数：
setInterval（） / clearInterval（）
/*
//setInterval定时器（定时多次，类似定一个每天早上7.都会闹的闹钟（执行多次）） 返回值为序数表示为定时器id（由于是重复每天7.叫，所有id一样））setInterval(func,time) func为每隔time时间执行一次的函数（一般是箭头函数） 1s=1000msclearInterval(序数)删除定时器setInterval配套的删除类似闹钟响一次后面到点继续响*///示例一
var num = 1;
var data = setInterval(()=>{console.log(num);num++;if(num>=5){console.log(data);clearInterval(data);}
}, 1000);//示例二
var h2 = document.querySelector(".h2");
var timer = null;
h2.onclick = ()=>{clearInterval(timer); //再次点击时确保不会再原有定时器基础上新加定时器 //可利用setTimeouttimer=setInterval(() => {h2.innerText = parseInt(h2.innerText) + 1;},1000)
}//示例三var num = 1;
//var t = null; //如果不设置t和后面不清掉t则定时器setInterval会叠加
function timer(){//clearInterval(t);alert(num++);var t = setInterval(()=>{timer(); //如果上面不注释则每次递归调用函数，又会新创建一个setInterval定时器，则导致原有的和新建的叠加},2000)console.log(t);
}
timer();setTimeout（）/clearTimeout（）
/*
//setTimeout定时器（定时一次，类似定一个待会干事时提醒我的闹钟（只再待会执行一次）） 返回值为序数表示为当前这个定时器id（重复执行id不一样）setTimeout(func,time) func为每隔time时间执行一次的函数（一般是箭头函数） 1s=1000msclearTimeout(序数)删除定时器setTimeout配套的删除 ， 便于再setTimeout还未执行根据情况进行前删除类似闹钟只响一次的响了后还在只是后面不再响*///示例一:setInterval示例三用setTimeout写
var num = 1;
function timer(){alert(num++);var t = setTimeout(()=>{timer(); //递归的执行函数则定时器每次都会新建，由于setTimeout只执行一次则不会导致原有和新建的叠加},2000)console.log(t); //控制台可见每次的id均不一样
}
timer();基于定时器的动态效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {height: 150px;width: 150px;background-color: red;}.box2 {position: absolute;}.box3 {opacity: 1;}</style>
</head>
<body>
<!--<!–示例一–>--><div class="box1"></div><script>box1 = document.querySelector(".box1");var num = 0;box1.onclick = ()=>{console.log(this);setInterval(() => {num++;box1.style.borderRadius =`${num}px`;},30)}</script><!--示例二-->
<div class="box2"></div>
<script>var box2 = document.querySelector(".box2");box2.style.left = "0px";box2.onclick = () => {let num = 1;t = setInterval(() => {num *= 1.01;box2.style.left = `${num}px`;if (num >= 1200) {clearInterval(t);}}, 24);}
</script><!--示例三-->
<div class="box3"></div>
<div></div>
<script>var box3 = document.querySelector('.box3');box3.onclick = ()=>{var num = 1;setInterval(() => {console.log(num);num-=0.01;box3.style.opacity = `${num}`;if (num <= 0) {box3.style.display = "none";}},24)}
</script>
</body>
</html>
URL编码函数：encodeURIcomponent（）/ decodeURIcomponent（）
/*** URL编码函数：处理 URL 参数、表单提交等场景，需要确保 URL 格式正确 → 用 encodeURIComponent* 编码：encodeURIComponent* 解码：decodeURIComponent*/const content = "你好呀";
//编码
const num1 = encodeURIComponent(content);
console.log(num1);
//解码
const num2 = decodeURIComponent(content);
console.log(num2);
base64编码函数：btoa（）/atob（）
/*** base64编码函数：传输二进制数据（图片、文件）或需要将二进制转为文本 → 用 Base64 即其是网络数据传输的数据转码函数* 编码：btoa将二进制数据（如图片、文件、二进制流）转换为 ASCII 字符* 解码：atob*/content = {"name":"guohan","age":22};
info1 = btoa(content);
console.log(info1);
info2 = atob(info1);
console.log(info2);
打开窗口关闭窗口函数：open（）/ close（）
/***打开窗口open* 关闭窗口close*/var content = document.querySelector('input[name="content"]');
var btn = document.querySelector('button[name="search"]');
var del = document.querySelector('#del');
var w;
btn.onclick = () => {w = open(`https://www.baidu.com/s?wd=${content.value}`, "_blank");
}
del.onclick = () => {w.close()
}
