前端三剑客——javascript函数作用域与内置函数

大纲 :

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声明变量则该变量是window的属性，且在词法解析阶段不进行分配空间

var和let声明变量的区别： 1.作用域：var和let声明的变量在函数里时： var的作用域是函数 let作用域是花括号{}

2.变量使用和声明前后关系： 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声明的变量可以在其声明前使用
        //由于进行词法解析时分配了函数内部num的内存空间但未进行赋值，所以第一次打印undefined
        console.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为window
    console.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=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>
<!--&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编码函数：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()
}

location

location.reload() //F5刷新当前页面

location.href="http://www.baidu.com" 跳转

posted @ 2025-11-02 14:40 guohan 阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

前端三剑客——javascript函数作用域与内置函数

公告