前端(duan)三劍客——javascript函數(shu)(shu)作用(yong)域與內(nei)置函數(shu)(shu)
?大綱 :
???1.js代碼執行流程
???2.函(han)數的聲明與匿(ni)名函(han)數自(zi)執行:
??????普通函(han)數/匿(ni)名函(han)數及其自(zi)執(zhi)行
??????普通函數/匿名函數/箭(jian)頭(tou)函數/2者區別
???3.var和let區別與函(han)數作用域(yu)：
??????var和(he)let作用域區(qu)別(bie)
??????匿名函(han)數/箭(jian)頭函(han)數this指向
???4.內置函數
js代碼執行流程
??流程：先進行詞法解析在(zai)是(shi)代碼執行
??詞(ci)法解析：整理(li)整個代(dai)(dai)碼(ma)中的關鍵字(zi)，進行分配空間（不(bu)同類別函(han)數(shu)(shu)分配時間不(bu)同）但此時不(bu)進行函(han)數(shu)(shu)內代(dai)(dai)碼(ma)執行和(he)變(bian)量(liang)賦值
??代碼執(zhi)行(xing)：進(jin)行(xing)函數內代碼執(zhi)行(xing)和(he)變量賦值
<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者區別
普通函數(shu)和(he)匿(ni)名函數(shu)：
????分配空間時間：普通(tong)函(han)數在詞法檢測(ce)階段(duan)(duan)??匿名函(han)數在代碼執行階段(duan)(duan)
匿(ni)名(ming)函(han)數和箭頭函(han)數：
????箭頭函(han)數是特(te)殊的匿名函(han)數??
????在作用域上的區別(bie)：
????????匿(ni)名函數this指向調用該(gai)方法的實(shi)例對象
????????箭(jian)頭函數this指向父級作(zuo)用域(yu)里的this
var和let聲明變量時的區別與函數作用域
??var和let聲明變量時的區別
變量：??全(quan)局變量定義在(zai)全(quan)局作(zuo)用域(yu)下，且可以被任意子作(zuo)用域(yu)內進行使用，在(zai)網頁代(dai)碼執行完后(hou)被瀏覽器收(shou)回
????? 局部變量定義在子作用(yong)域下，在函數運(yun)行時創(chuang)建，當(dang)函數運(yun)行結束(shu)被(bei)瀏(liu)覽器回(hui)收(shou)，下次函數繼(ji)續被(bei)調(diao)用(yong)繼(ji)續創(chuang)建
?????當局部變量和全局變量同名則函數優先使用局部變量，且此時局部變量屏蔽全局變量
?????如果不使用var/let聲明變量則該變量是window的屬性，且在詞法解析階段不進行分配空間
var和let聲明變量的區別：??1.作用(yong)域：var和(he)let聲明的變量(liang)在函(han)數里時：??var的作用(yong)域是函(han)數?? ??????let作用(yong)域是花括號{}
??????????????2.變(bian)量使用和聲(sheng)(sheng)明前(qian)后關系：???????? var聲(sheng)(sheng)明的變(bian)量可以(yi)在其聲(sheng)(sheng)明前(qian)使用??let聲(sheng)(sheng)明的變(bian)量必須在聲(sheng)(sheng)明后使用
<body>
<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); //undefined
var num = 20;
//局部變量和全局變量同名使用局部變量，且屏蔽全局變量 且var聲明的變量可以在其聲明前使用
//由于進行詞法解析時分配了函數內部num的內存空間但未進行賦值，所以第一次打印undefined
console.log(num); //20
}
funk();
</script>??匿名函數/箭頭函數this指向
????????匿名(ming)函(han)數(shu)this指向調用該(gai)方法(fa)的實(shi)例對象(xiang)
????????箭頭函數this指(zhi)向父級(ji)作用域里的this
<script>
var xiaoming = {
name:"小明",
age:20,
}
xiaoming.say = function(){
console.log(this.name);
}
var func = ()=>{ //父級作用域為全局，全局this為window
console.log(this.name);
}
xiaoming.call = func;
xiaoming.say(); //匿名函數的this指向調用此方法的實例對象
xiaoming.call(); //箭頭函數的this指向父級作用域里的this
</script>
>>>小明
>>> //window對象的name為空 age未定義則是undefined
內置函數
??parseInt（）/parseFloat（）
??alert（message）：彈出(chu)警告框(kuang)
??confirm（message）：彈(dan)出確認框
??prompt（message）：彈出一個確認輸入框
??定時器函數：
setInterval（） / clearInterval（）
/*
//setInterval定時器（定時多次，類似定一個每天早上7.都會鬧的鬧鐘（執行多次）） 返回值為序數表示為定時器id（由于是重復每天7.叫，所有id一樣））
setInterval(func,time) func為每隔time時間執行一次的函數（一般是箭頭函數） 1s=1000ms
clearInterval(序數)刪除定時器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); //再次點擊時確保不會再原有定時器基礎上新加定時器 //可利用setTimeout
timer=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=1000ms
clearTimeout(序數)刪除定時器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編碼(ma)函數：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編(bian)碼函數：btoa（）/atob（）
/**
* base64編碼函數：傳輸二進制數據（圖片、文件）或需要將二進制轉為文本 → 用 Base64 即其是網絡數據傳輸的數據轉碼函數
* 編碼：btoa將二進制數據（如圖片、文件、二進制流）轉換為 ASCII 字符
* 解碼：atob
*/content = {"name":"guohan","age":22};
info1 = btoa(content);
console.log(info1);
info2 = atob(info1);
console.log(info2);
打開窗(chuang)口(kou)關閉(bi)窗(chuang)口(kou)函數：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(`//www.baidu.com/s?wd=${content.value}`, "_blank");
}
del.onclick = () => {
w.close()
}
location
location.reload()??//F5刷新當前(qian)頁面
location.href="//www.baidu.com"??跳轉