前端三劍客——javascript函數(shù)作用域與內(nèi)置函數(shù)

?大綱 :

???1.js代碼執(zhí)行流程

???2.函數(shù)的聲明與匿名函數(shù)自執(zhí)行:

??????普通函數(shù)/匿名函數(shù)及其自執(zhí)行

??????普通函數(shù)/匿名函數(shù)/箭頭函數(shù)/2者區(qū)別

???3.var和let區(qū)別與函數(shù)作用域：

??????var和let作用域區(qū)別

??????匿名函數(shù)/箭頭函數(shù)this指向

???4.內(nèi)置函數(shù)

js代碼執(zhí)行流程

??流程：先進行詞法解析在是代碼執(zhí)行

??詞法解析：整理整個代碼中的關(guān)鍵字，進行分配空間（不同類別函數(shù)分配時間不同）但此時不進行函數(shù)內(nèi)代碼執(zhí)行和變量賦值

??代碼執(zhí)行：進行函數(shù)內(nèi)代碼執(zhí)行和變量賦值

<script>
    var num = 10;
    function funk(){
        console.log(num);
        let num = 20;
        console.log(num);
    }
    funk();
</script>

<body>
<script>
    var num = 10;                //在函數(shù)外部的變量為全局變量，在函數(shù)內(nèi)部的稱局部變量，如果全局變量和函數(shù)內(nèi)部變量同名，函數(shù)內(nèi)部會先使用局部變量
    function funk(){
        console.log(num);
        var num = 20;            //let換成var則變量的使用可以在其聲明前
        console.log(num);
    }
    funk();
</script>
</body>

函數(shù)的聲明與匿名函數(shù)自執(zhí)行

??普通函數(shù)/匿名函數(shù)及其自執(zhí)行

??普通函數(shù)：

<script>
    function funk(){
        console.log("你好");
    }
    funk();
</script>

??匿名函數(shù)：

聲明：
<script>
    var funk = function(){
        console.log("你好");
    }
    funk();
</script>

自執(zhí)行：
    <script>
        var funk = (a,b)=>a+b;
        console.log(funk(1,2));
    </script>

??箭頭函數(shù)：

聲明：
方式一：
    <script>
        var funk = ()=>{
            console.log("你好");
        }
        funk();
    </script>

方式二：函數(shù)代碼塊只有一行return代碼時
    <script>
        var funk = (name)=>name;
        console.log(funk("guohan"));
    </script>

自執(zhí)行：
<script>
    ((name)=>{
        console.log(`${name}`);
    })("guohan");
</script>

??普通函數(shù)/匿名函數(shù)/箭頭函數(shù)/2者區(qū)別

普通函數(shù)和匿名函數(shù)：

????分配空間時間：普通函數(shù)在詞法檢測階段??匿名函數(shù)在代碼執(zhí)行階段

匿名函數(shù)和箭頭函數(shù)：

????箭頭函數(shù)是特殊的匿名函數(shù)??

????在作用域上的區(qū)別：

????????匿名函數(shù)this指向調(diào)用該方法的實例對象

????????箭頭函數(shù)this指向父級作用域里的this

var和let聲明變量時的區(qū)別與函數(shù)作用域

??var和let聲明變量時的區(qū)別

變量：??全局變量定義在全局作用域下，且可以被任意子作用域內(nèi)進行使用，在網(wǎng)頁代碼執(zhí)行完后被瀏覽器收回

????? 局部變量定義在子作用域下，在函數(shù)運行時創(chuàng)建，當函數(shù)運行結(jié)束被瀏覽器回收，下次函數(shù)繼續(xù)被調(diào)用繼續(xù)創(chuàng)建

?????當局部變量和全局變量同名則函數(shù)優(yōu)先使用局部變量，且此時局部變量屏蔽全局變量

?????如果不使用var/let聲明變量則該變量是window的屬性，且在詞法解析階段不進行分配空間

var和let聲明變量的區(qū)別：??1.作用域：var和let聲明的變量在函數(shù)里時：??var的作用域是函數(shù)?? ??????let作用域是花括號{}

??????????????2.變量使用和聲明前后關(guān)系：???????? var聲明的變量可以在其聲明前使用??let聲明的變量必須在聲明后使用

<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聲明的變量可以在其聲明前使用
        //由于進行詞法解析時分配了函數(shù)內(nèi)部num的內(nèi)存空間但未進行賦值，所以第一次打印undefined
        console.log(num);       //20
    }

    funk();
</script>

??匿名函數(shù)/箭頭函數(shù)this指向

????????匿名函數(shù)this指向調(diào)用該方法的實例對象

????????箭頭函數(shù)this指向父級作用域里的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();                         //匿名函數(shù)的this指向調(diào)用此方法的實例對象
xiaoming.call();                        //箭頭函數(shù)的this指向父級作用域里的this
</script>
>>>小明
>>>                                    //window對象的name為空    age未定義則是undefined

內(nèi)置函數(shù)

??parseInt（）/parseFloat（）

??alert（message）：彈出警告框

??confirm（message）：彈出確認框

??prompt（message）：彈出一個確認輸入框

??定時器函數(shù)：

setInterval（） / clearInterval（）

/*
//setInterval定時器（定時多次，類似定一個每天早上7.都會鬧的鬧鐘（執(zhí)行多次））  返回值為序數(shù)表示為定時器id（由于是重復每天7.叫，所有id一樣））
        setInterval(func,time)  func為每隔time時間執(zhí)行一次的函數(shù)（一般是箭頭函數(shù)）    1s=1000ms
  clearInterval(序數(shù))刪除定時器setInterval配套的刪除

  類似鬧鐘響一次后面到點繼續(xù)響
 */

//示例一
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);       //再次點擊時確保不會再原有定時器基礎(chǔ)上新加定時器   //可利用setTimeout
    timer=setInterval(() => {
        h2.innerText = parseInt(h2.innerText) + 1;

    },1000)
}

//示例三

var num = 1;
//var t = null;           //如果不設(shè)置t和后面不清掉t則定時器setInterval會疊加
function timer(){
    //clearInterval(t);
    alert(num++);
    var t = setInterval(()=>{
        timer();          //如果上面不注釋則每次遞歸調(diào)用函數(shù)，又會新創(chuàng)建一個setInterval定時器，則導致原有的和新建的疊加
    },2000)
    console.log(t);
}
timer();

setTimeout（）/clearTimeout（）

/*
//setTimeout定時器（定時一次，類似定一個待會干事時提醒我的鬧鐘（只再待會執(zhí)行一次））  返回值為序數(shù)表示為當前這個定時器id（重復執(zhí)行id不一樣）
        setTimeout(func,time)  func為每隔time時間執(zhí)行一次的函數(shù)（一般是箭頭函數(shù)）    1s=1000ms
  clearTimeout(序數(shù))刪除定時器setTimeout配套的刪除 ， 便于再setTimeout還未執(zhí)行根據(jù)情況進行前刪除

  類似鬧鐘只響一次的響了后還在只是后面不再響
 */

//示例一:setInterval示例三用setTimeout寫
var num = 1;
function timer(){
    alert(num++);
    var t = setTimeout(()=>{
        timer();        //遞歸的執(zhí)行函數(shù)則定時器每次都會新建，由于setTimeout只執(zhí)行一次則不會導致原有和新建的疊加
    },2000)
    console.log(t);     //控制臺可見每次的id均不一樣
}
timer();

基于定時器的動態(tài)效果

<!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>
<!--&lt;!&ndash;示例一&ndash;&gt;-->
    <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編碼函數(shù)：encodeURIcomponent（）/ decodeURIcomponent（）

/**
 * URL編碼函數(shù)：處理 URL 參數(shù)、表單提交等場景，需要確保 URL 格式正確 → 用 encodeURIComponent
 * 編碼：encodeURIComponent
 * 解碼：decodeURIComponent
 */

const content = "你好呀";
//編碼
const num1 = encodeURIComponent(content);
console.log(num1);
//解碼
const num2 = decodeURIComponent(content);
console.log(num2);

base64編碼函數(shù)：btoa（）/atob（）

/**
 * base64編碼函數(shù)：傳輸二進制數(shù)據(jù)（圖片、文件）或需要將二進制轉(zhuǎn)為文本 → 用 Base64  即其是網(wǎng)絡(luò)數(shù)據(jù)傳輸?shù)臄?shù)據(jù)轉(zhuǎn)碼函數(shù)
 * 編碼：btoa將二進制數(shù)據(jù)（如圖片、文件、二進制流）轉(zhuǎn)換為 ASCII 字符
 * 解碼：atob
 */

content = {"name":"guohan","age":22};
info1 = btoa(content);
console.log(info1);
info2 = atob(info1);
console.log(info2);

打開窗口關(guān)閉窗口函數(shù)：open（）/ close（）

/**
 *打開窗口open
 * 關(guān)閉窗口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()
}

location

location.reload()??//F5刷新當前頁面

location.??跳轉(zhuǎn)

posted @ 2025-11-02 14:40 guohan 閱讀(11) 評論(0) 收藏舉報

刷新頁面返回頂部

前端三劍客——javascript函數(shù)作用域與內(nèi)置函數(shù)

公告