JS “函数、作用域、预解析 ”笔记

最新推荐文章于 2024-06-14 15:02:13 发布

MartinYP

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量143

点赞数

文章标签： javascript 学习

本文链接：https://blog.csdn.net/MartinYP/article/details/125663420

版权

2022年7月7日周四，学习记录博客。今日学习进度：函数、作用域、预解析。学习时长：5h。

函数

复习target

为什么需要函数
函数的书写语法
如何根据需求封装函数
说出形参和实参的传递过程
如何使用函数的返回值
如何使用 arguments获取函数的参数

1.函数的概念

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2.函数的使用

函数在使用时分为两步：声明函数和调用函数。

2.1 声明函数

function 是声明函数的关键字，必须小写。
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数命名为动词，例如 getSum。

2.2 调用函数

调用是不能忘记小括号

调用口诀：函数不调用，自己不执行。

//声明函数
function 函数名(){
    //函数体 代码
}
//调用函数
函数名();

2.3 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外值提供一个简单的函数接口。

3.函数的参数

3.1 形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参。而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

3.2 函数形参和实参个数不匹配

function sum(num1 + num2){
    console.log(num1 + num2);
}
sum(100 + 200);        //形参和实参个数相等，输出正确结果300
sum(100 + 200 +300);   //实参个数多余形参，只取到形参的个数。结果为300
sum(100);              //实参个数小于形参，num2赋值为 undefined，结果为NaN

4.函数的返回值

4.1 return 语句

使用return语句来返回函数的值。

//return 语句用法
例如 求任意两个数的和
function getSum(num1,num2){
    return num1 + num2;
}
console.log(getSum(1,2));

案例：利用函数 求两个数的最大值
function getMax(num1,num2){
    return num1 > num2 ? num1 : num2;
}
console.log(getMax());

4.2 return 终止函数

在一个函数体中，return 语句后面的代码不会被执行。

4.3 return 的返回值

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

如果需要返回多个值，可以使用数组。

示例：求任意两个数的 加减乘除结果
function getResult(num1,num2){
    return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1,2);
console.log(re);

4.4 函数没有 return 返回 undefined

函数都是有返回值的

如果有 return 则返回 return 后面的值
如果没有 return 则返回 undefined

4.5 break，continue，return 的区别

break ：结束当前的循环体（如 for，while）
continue：跳出本次循环，继续执行下次循环（如 for、while）
return：不仅可以退出循环，还能够返回 return语句中的值，同时还可以结束当前的函数体内的代码。

5. arguments 的使用

当我们不确定有多少个参数传递的时候，可以用arguments 来获取。在JS中，arguments实际上是当前函数的一个内置对象。所有函数都内置了一个 arguments对象，arguments 对象中存储了传递的所有实参。

（仅有函数有 arguments 对象）

arguments 展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据

不具有数组的 push、pop 等方法

/示例：利用函数求 任意个数 的最大值
function getMax(){
    var max = arguments[0];
    for(var i = 0;i < arguments.length;i++){
        if(arguments[i] > max){
            max = arguments[i];        
        }    
    }
    return max;
}
console.log(getMax(1,2,3,4,5));
console.log(getMax(5,8,10,66,20,30,10));

6.案例

在函数中可以调用另一个函数

1.利用函数判断是否闰年

2.用户输入年份，输出当前年份的2月份天数

//1.利用函数判断是否闰年
function isRunYear(year){
    var flag = false;
    if(year % 4 == 0 && year % 100 != 0 || year % 400 ==0){
        flag = true;    
    }
    return flag;
}
console.log(isRunYear(2000));
//2.用户输入年份，输出当前年份的2月份天数
function backDay(){
    var year = prompt('请您输入年份：');
    if(isRunYear(year)){
        alert('当前年份是闰年2月份有29天');    
    } esle{
      alert('当前年份是平年2月份有28天');      
    }
}
backDay(); // 此处不能写 实参

7.函数的两种声明方式

1、利用函数关键字声明函数（命名函数）

2、利用函数表达式（匿名函数）

函数表达式中，没有函数名，只有变量名。

// 函数关键字声明
function fn(){
    console.log('我是函数关键字声明');
}
var fun = function(aru){
    console.log('我是函数表达式声明');
    console.log(aru);
}

JS的作用域

复习target

JS的两种作用域是什么
如何区分全局变量和局部变量
如何在作用域链中查找变量的值

1.作用域

2.变量的作用域

1.作用域

1.1概述

通常来说，一段程序代码所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2.2 JS 的作用域

在ES6标准之前，分为全局作用域和局部作用域。

全局作用域：作用域是整个 script标签，或者是一个单独的js文件。
局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。

2.变量的作用域

2.1 变量作用域的分类

根据作用域的不同，可以分为：全局变量和局部变量。

2.2 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不适用 var 声明的变量也是全局变量（不建议）

2.3 局部变量

在局部作用域下声明的变量叫做局部变量。（在函数内部定义的变量）

局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

2.4 全局变量和局部变量的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

3.作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方法来决定取哪个值。这种结构我们称为作用域链。就近原则。

案例： a = 4； b = 22；

预解析

复习target

解析器运行 js 分为哪两步
说出变量提升的步骤和运行过程
说出函数提升的步骤和运行过程

1.预解析概念

2. 变量预解析和函数预解析

3.预解析案例

1.预解析概念

JS 引擎在运行 JS 代码时分为两步：预解析和代码执行。

预解析：JS 引擎会把 JS 里面所有的 var 和 function 提升到当前作用域的最前面
代码执行：按照代码书写的顺序从上往下执行。

2. 变量预解析和函数预解析

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

变量提升：指把所有的变量声明提升到当前作用域的最前面不提升赋值
函数提升：指把所有的函数声明提升到当前作用域的最前面不调用函数

// 案例1
console.log(num);    //报错，为声明
// 案例2
console.log(num);    //undefined，提升了变量声明，但不提升赋值
var num = 10;
// 案例3
fn();
function fn(){
    console.log(11);
}
//成功执行函数

// 案例4
fun();
var fun = function(){
    console.log(22);
}
//报错“fun不是一个function”
//原因：只提升了声明fun变量，但没有提升函数赋值

3.预解析案例

// 相当于以下代码
var a;
function f1(){
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
f1(); 
//输出结果是 a=undefined，b=9；

//相当于以下代码
function f1() {
    var a;
    a = b = c =9;
    // 三个等号，相当于 var a=9;b=9;c=9  b和c没有声明直接赋值，属于全局变量
    // 集体声明写法： var a=9,b=9,c=9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();     //输出结果 ， 9 9 9
console.log(c);    // 9
console.log(b);    // 9
console.log(a);    // undefined