(二)JS 基础篇—函数与作用域

这篇博客详细介绍了JavaScript的基础知识,包括函数、作用域、对象与内置对象,以及进阶主题如DOM和BOM、面向对象编程和ES6特性。通过实例解析了函数的声明、调用、参数、返回值,以及函数封装和内置函数的使用。同时,讲解了作用域的概念,区分了全局和局部作用域,并讨论了预解析机制,包括变量和函数声明的提升、形参赋值与预解析的顺序。
摘要由CSDN通过智能技术生成

⛺️ 欢迎大家拜访我的:个人博客

⛽️ 前端加油站之【JavaScript】⛽️

在这里插入图片描述

内容地址
(一)JS 基础篇—基础知识总结⛳️ 【快来点点我 ~】
(二)JS 基础篇—函数与作用域⛳️ 【快来点点我 ~】
(三)JS 基础篇—对象与内置对象⛳️ 【客官别急,马上更新 ~】
(四)JS 进阶篇—DOM文档对象模型⛳️ 【客官别急,马上更新 ~】
(五)JS 进阶篇—BOM浏览器对象模型⛳️ 【客官别急,马上更新 ~】
(六)JS 高级篇—面向对象编程⛳️ 【客官别急,马上更新 ~】
(七)JS 高级篇—ES6学习⛳️ 【客官别急,马上更新 ~】

思维导图 ⏳

在这里插入图片描述


1. 函数 ✂️

1.1 初识函数

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

函数一般是用来实现某一种重复使用的功能,在需要该功能的时候,直接调用函数就可以了,而不需要重复地编写一大堆重复的代码。并且在需要修改该函数功能的时候,也只需要修改和维护这一个函数就行,而不会影响其他代码

函数一般是在两种情况下使用:

  • 一种是实现 重复使用的功能
  • 一种是实现 特定的功能

1.2 函数的声明及调用

在 JavaScript 中,如果我们想要使用函数,一般只需要简单的2步

即:声明函数调用函数

1.2.1 声明函数的方法 🔥

语法:

function 函数名(参数1 , 参数2 ,..., 参数n){
     //函数体代码
}

✒️ 说明:

1️⃣ 每一个函数,就是独立的语句块(看成一个整体)

函数是一个用大括号{}括起来的、可重复使用的、具有特定功能的语句块。像 if、while、do…while、for 等语句中也有{}括起来的语句块。对于语句块来说,我们都是把它当成整体来处理的

2️⃣ function 是声明函数的关键字,必须小写

函数跟变量是非常相似的,变量用var来定义,而函数用function来定义。变量需要取一个变量名,而函数也需要取一个函数名

3️⃣ 函数名不要随便取,尽量取有意义的英文名

函数的命名要让人一看就知道这个函数是干什么的,由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词

4️⃣ 函数的参数个数要根据实际需求书写

函数的参数,是可以省略的(即不写),当然也可以是1个、2个或n个。如果是多个参数,则参数之间用英文逗号 , 隔开。此外,函数参数的个数,一般取决于你实际开发的需要

1.2.2 调用函数的方法 🔥

语法:

// 1. 无参数调用
函数名(); //通过调用函数名来执行函数体代码
// 2. 带参数调用
函数名(参数1 , 参数2 ,..., 参数n);

✒️ 说明:

  • 调用的时候千万不要忘记添加小括号
  • 口诀:函数不调用,自己不执行
  • 声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
① 直接调用

直接调用,是常见的函数调用方式,一般用于“没有返回值的函数”

案例:

//定义函数
function getMes(){
	document.write("听说泰国人很大方,一见面就说:刷我滴卡。");
}
//调用函数
getMes();
② 在表达式中调用

在表达式中调用,一般用于“有返回值的函数”,然后 函数的返回值会参与表达式的计算

案例:

//定义函数
function addSum(a, b) {
	var sum = a + b;
	return sum;
}
//调用函数
var n = addSum(1, 2) + 100;
document.write(n); // 103
③ 在超链接中调用

在超链接中调用,指的是在 a 元素的 href 属性中使用 “javascript:函数名” 的形式来调用函数。当用户点击超链接时,就会调用该函数

语法:

<a href="javascript:函数名"></a>

案例:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function expressMes()
        {
            alert("她:我爱张张\n我:oh~my,= =?!");
        }
    </script>
</head>
<body>
    <a href="javascript:expressMes()">表白对话</a>
</body>
</html>
④ 在事件中调用

JavaScript 是基于事件的一门语言,像鼠标移动是一个事件、鼠标单击也是一个事件,类似的事件很多。当一个事件产生的时候,我们就可以调用某个函数来针对这个事件作出响应

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
            alert("冰冰冰,甜甜甜,好次好次~");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="提交" />
</body>
</html>

1.2.3 函数的两种声明方式

① 命名函数 🔥

命名函数也叫自定义函数,是利用函数关键字 function 自定义函数方式

语法:

// 声明定义方式
function fn() {...}

// 调用  
fn();  

✒️ 说明:

  • 因为有名字,所以也被称为命名函数
  • 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
② 匿名函数 🔥

语法:

// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();

✒️ 说明:

  • 因为函数没有名字,所以也称为匿名函数
  • 这个fn 里面存储的是一个函数
  • 函数调用的代码必须写到函数体后面

1.3 函数的参数

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

1.3.1 形参和实参 🔥🔥

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

语法:

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 

✒️ 说明:

  • 形参:形式上的参数。函数定义的时候传递的参数,当前并不知道是什么内容
  • 实参:实际上的参数。函数调用的时候,传递的参数,实参是传递给形参的

案例:

// 利用函数求任意两个数的和
// 声明函数
function getSum(num1,num2){
    console.log(num1+num2)
}
// 调用函数
getSum(1,3) // 4
getSum(65) // 11

⚠️ 注意:

  • 函数调用的时候实参值是传递给形参的
  • 形参简单理解为:不用声明的变量
  • 实参和形参的多个参数之间用逗号 , 分隔,

1.3.2 形参实参不匹配 🔥

参数个数说明
实参个数 == 形参个数输出正确结果
实参个数 > 形参个数只取到形参个数的实参数
实参个数 < 形参个数多的形参定义为undefined,结果为NaN

案例:

// 求数值相加和
function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);           // 300,形参和实参个数相等,输出正确结果
sum(100, 400, 500, 700); // 500,实参个数多于形参,只取到形参的个数
sum(200);                // 实参个数少于形参,多的形参定义为 undefined,结果为NaN

⚠️ 注意:

  • 函数可以带参数也可以不带参数
  • 声明函数的时候,函数名括号里面的是形参,形参的默认值为 underfind
  • 调用函数的时候,函数名括号里面的是实参
  • 多个参数中间用逗号分隔
  • 形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要匹配

1.4 函数的返回值

在JavaScript中,函数可以分两种:一种是“没有返回值的函数”;另外一种就是“有返回值的函数”

无论是哪一种函数,都必须使用 function 来定义

1.4.1 没有返回值的函数

没有返回值的函数,指的是函数执行完就算了,不会返回任何值

语法:

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
}

1.4.2 有返回值的函数

有返回值的函数,指的是函数执行完了之后,会通过 return 返回一个值,这个返回值可以供我们使用

① return 语句介绍

我们有时希望函数将值返回给调用者,此时通过使用 return 语句就可以实现

语法:

// 声明函数
function 函数名() {
    ...
    return  需要返回的值;
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值
  • 在使用 return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return ,返回的值是 undefined
② return 终止函数执行 🔥

return 有终止函数的作用
即: return 语句之后的代码不会再被执行

案例:

function add(num1,num2){
    //函数体
    return num1 + num2; // 注意:return 后的代码不执行
    alert('我不会被执行,因为前面有 return');
}
var resNum = add(21, 6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值
alert(resNum);          // 27
③ return 多个返回值情况 🔥
  • return 语句只能返回一个值
  • 如果用逗号隔开多个返回值,则只会返回最后一个返回值

案例:

function add(num1,num2){
    //函数体
    return num1,num2;
}
var resNum = add(21,6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值
alert(resNum);          // 6
④ break、continue、return 的区别
  • break : 结束当前循环体(如 for、while)
  • continue :跳出本次循环,继续执行下次循环(如for、while)
  • return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码

1.5 arguments 内置参数传参 🔥🔥

在 JavaScript 中,arguments 是当前函数的一个内置对象。实际上所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。

作用:当我们不确定有多少个参数传递的时候,可以用 arguments 来获取

  • arguments 存放的是传递过来的实参
  • arguments 展示形式是一个伪数组,因此可以进行遍历

伪数组具有以下特点:

  • 具有数组 length 属性
  • 可按数组索引方式储存读取及遍历数据
  • 不具有数组的 push()pop()等方法

案例:

// 函数声明
function fn() {
    console.log(arguments);  //里面存储了所有传递过来的实参
    console.log(arrguments.length); // 3
    console.log(arrguments[2]); // 3
}
// 函数调用
fn(1,2,3);

案例:

// 利用函数求任意个数的最大值
function maxValue() {
	var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(maxValue(2, 4, 5, 9)); // 9
console.log(maxValue(12, 4, 9)); // 12

1.6 嵌套函数 🔥

嵌套函数:就是在一个函数的内部定义另外一个函数。不过 在内部定义的函数只能在内部调用,如果在外部调用,就会出错

案例:

function foo() {
    var x = 1;
    function bar() {
        var y =  x + 1;
        console.log(y); // 2
    }
    bar();
    console.log(x); // 1
}
foo();

案例:

// 嵌套函数用于“阶乘”
<script>
	//定义阶乘函数
	function func(a) {
		//嵌套函数定义,计算平方值的函数
		function multi(x) {
			return x * x;
		}
		var m = 1;
		for(var i = 1; i <= multi(a); i++) {
			m = m * i;
		}
		return m;
	}
	//调用函数
	var sum =func(2) + func(3);
	document.write(sum); // 362904
</script>

1.7 函数封装及调用

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

我们以上的所有例子都是封装一个能实现某一功能的函数,然后再在具体案例中进行函数调用从而处理问题

案例:

// 封装函数:实现验证是否为闰年功能
function isLeapYear(year) {
	//判断闰年的条件
	if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
		return year + "年是闰年";
	} else {
		return year + "年不是闰年";
	}
}

// 调用函数
document.write(isLeapYear(2017)); // 2017不是闰年
</script>

案例:

// 封装函数:实现翻转任意一个数组功能
function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}

// 调用函数
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);

案例:

// 封装函数:实现对数组进行冒泡排序功能
function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j+1]) { 
	            var temp = arr[j];
	            arr[j] = arr[j + 1]; 
	            arr[j + 1] = temp;
            }
        }
    }
    return arr;
}
// 调用函数

案例:

// 封装函数:用户输入年份,输出当前年份2月份的天数;
// 如果是闰年,则2月份是 29天;如果是平年,则2月份是 28天
function backDay() {
    var year = prompt('请您输入年份:');
    if (isRun(year)) { // 调用函数需要加小括号
        alert('你输入的' + year + '是闰年,2月份有29天');
    } else {
        alert('您输入的' + year + '不是闰年,2月份有28天');
    }
}

// 调用函数
backDay();

// 封装函数:实现判断是否是闰年的功能
function isRun(year) {
    var flag = false;
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
    }
    return flag;
}

1.8 内置函数及使用 🔥

在JavaScript中,函数还可以分为“自定义函数”和“内置函数”

  • 自定义函数:指的是需要我们自己定义的函数,前面学的就是自定义函数
  • 内置函数:指的是JavaScript内部已经定义好的函数,也就是说我们不需要自己写函数体代码,直接调用就行了

常用内置函数一览

内置函数作用
parseInt()提取字符串中的数字,只限提取整数
parseFloat()提取字符串中的数字,可以提取小数
isFinite()判断某一个数是否是一个有限数值
isNaN()判断一个数是否是NaN值
escape()对字符串进行编码
unescape()对字符串进行解码
eval()把一个字符串当做一个表达式一样去执行

2. 作用域 ✂️

作用域:即变量(变量名,函数名)可生效的范围

作用域的作用:使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突

2.1 作用域分类

JavaScript (ES6前) 中的作用域有两种:

  • 全局作用域
  • 局部作用域(函数作用域)

2.1.1 全局作用域 🔥

全局作用域是最大的作用域,包含了局部作用域。在全局作用域中定义的变量可以在任何地方使用

网页打开的时候,浏览器会自动给我们生成一个全局作用域 window,这个作用域会一直存在,直到页面关闭才会销毁

案例:

//下面两个变量都是存在全局作用域下面的,都是可以在任意地方使用的
var num1 = 100;
var num2 = 200;

2.1.2 局部作用域 🔥

局部作用域就是在全局作用域下面,开辟出来的一个相对小一些的作用域。在局部作用域中定义的变量只能在这个局部作用域内部使用

  • 在 js 中只有函数能生成一个局部作用域,别的不行
  • 每一个函数,都是一个局部作用域

案例:

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100;

function fn(){
	//下面这个变量就是一个 fn 局部作用域内部的变量
	//只能在 fn 函数内部使用
	var num2 = 200;
}
fn();

2.1.3 JS 无块级作用域 🔥🔥

1️⃣ 块级作用域由 {} 包括,在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循环语句中使用,如下面的Java代码:

if(true){
    int num = 123;
    System.out.println(num); // 123
}
System.out.println(num);	 // 报错

2️⃣ JS 中没有块级作用域(在ES6之前)

if(true){
    int num = 123;
    System.out.println(num); // 123
}
System.out.println(num);	 // 123

2.2 变量的作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:全局变量局部变量

2.2.1 全局变量作用域

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

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

2.2.2 局部变量作用域

  • 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形参实际上就是局部变量

⚠️ 注意:

  • 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
  • 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

2.3 作用域链 🔥🔥

只要是代码,就至少有一个作用域,写在函数内部的叫局部作用域,如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域

根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链

作用域链: 内部函数访问外部函数的变量,采取的是链式查找的方式来决定取哪个值,这种结构我们称为作用域链表

案例:

var num = 10;
funtion fn() {       // 外部函数
    var num = 20;
    function fun() { // 内部函数
        console.log(num);  // 20 ,一级一级访问
    }
}

⚠️ 注意:

采取 就近原则 的方式来查找变量最终的值


3. 预解析 ✂️

JavaScript 代码是由浏览器中的 JS解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行

1️⃣ 预解析:JS引擎会把 JavaScript 代码里面所有的 var变量定义 还有 function函数 提升到当前作用域的最前面
2️⃣ 代码执行:从上到下执行JS语句

学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined,为什么在函数声明之前就可以调用函数

3.1 函数参数预解析 🔥

function fn(b) {	
	function b() {
	}
	b();
}
fn(200);

// 实际解析过程
function fn(b){	
	// 预解析先声明参数var b,并赋值,在声明函数b
	var b = 200;
	b();
	function b(){}
	b();
}
fn(200);

3.2 函数声明预解析 🔥🔥

函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数

案例:

fn();			// 11
function fn() {
    console.log('11');
}

//相当于执行了以下代码
function fn() {
    console.log('11');
}
fn();			// 11

3.3 变量声明预解析 🔥🔥

变量预解析也叫做 变量提升、函数提升

变量提升: 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升

案例:

console.log(num);  // underfind
var num = 10;

//相当于执行了以下代码
var num;		   // 变量声明提升到当前作用域最上面
console.log(num);  // underfind
num = 10;		   // 变量的赋值不会提升

⚠️ 注意:

1️⃣ 赋值式函数:var fn = function(){},按照 var 的规则进行解析

fn();	// 报错
var fn = function fn(){
	console.log("我是fn函数");
}

// 在预解析,只是告诉浏览器,fn 这个名字可以使用,但是没有赋值
var fn;
fn()	// 报错
fn = function fn(){
	console.log("我是fn函数");
}
fn();

2️⃣ let或者const声明的变量,仍然会提前被收集到变量对象中,但和var不同的是,let或者const定义的变量,不会在这个时候给他赋值 underfind

console.log(num);	// undefind
console.log(a); // 报错
let a = 10;
var num = 100;

3.4 预解析常见问题

3.4.1 函数表达式声明调用问题 🔥

对于函数表达式声明调用需要记住:函数表达式调用必须写在函数声明的下面

案例:

// 匿名函数(函数表达式方式): 若我们把函数调用放在函数声明上面
fn();
var  fn = function() {
    console.log('22'); // 报错
}

//相当于执行了以下代码
var fn;
fn();      //fn没赋值,没这个,报错
var  fn = function() {
    console.log('22'); //报错
}

3.4.2 预解析时形参与变量重名问题 🔥

函数执行的时候,会进行形参赋值,函数执行的时候,会进行预解析,一旦函数的形参和定义的私有变量重名,是先预解析还是先形参赋值?

当函数和变量重名的时候,在预解析阶段以函数为准

案例:

var a = 100;	
function fn(b){	
	function b(){
	}
	b();
}
fn(200);	

如果预解析在前面,形参在后面
这个 fn 函数执行的时候,先把 b 解析成为一个 函数
然后再给 b 赋值为 200 ,那么就会报错了

如果预解析在后面,形参在前面
这个 fn 函数执行的时候,先把 b 赋值为一个 200
然后预解析的时候,把 b 赋值为 函数,就不会报错

⚠️ 注意:

在函数执行的时候,先进行形参赋值,再进行预解析

3.4.3 带 if 条件语句的预解析问题 🔥

if 条件不管成不成立,里面的代码都会进行预解析

案例:

// 你以为的答案:
console.log(num);	// undefined
if(false){
	var num = 100;
}
console.log(num);	// 100

// 实际上的结果:
console.log(num);	// undefined
if(false){
	var num = 100;
}
console.log(num);	// undefined

// 相当于:
console.log(num);	// undefined
if(false){
	var num;
	num = 100;
}
console.log(num);	// undefined

3.4.4 return 语句的预解析问题 🔥

return 后面的代码虽然不执行,但是也会进行预解析

案例:

function fn(){
	var num = 100;
	console.log(num); // 100
	console.log(n);	  // undefined
	return;
	var n = 200;
}
fn();

// 上面代码相当于:
function fn(){
	var num;
	var n;
	num = 100;
	console.log(num); // 100
	console.log(n);	  // undefined
	return;
	n = 200;
}
fn();

3.5 预解析练习

案例:

var num = 10;
fun();
function fun() {
    console.log(num); // undefined
    var num = 20;
}

// 上述代码相当于:
var num;
function fun() {
    var num;
    console.log(num); // undefined
    num = 20;
}
num = 10;
fun();
// 最终结果是 undefined

案例:

var num = 10;
function fn(){
    console.log(num); // undefined
    var num = 20;
    console.log(num); // 20
}
fn();

// 上述代码相当于:
var num;
function fn(){
    var num;
    console.log(num); // undefined
    var num = 20;
    console.log(num); // 20
}
num = 10;
fn();
// 最终结果是 undefined 20

案例:

var a = 18;
f1();

function f1() {
    var b = 9;
    console.log(a); // undefined
    console.log(b); // 9
    var a = '123';
}

// 上述代码相当于:
var a;
function f1() {
    var b;
    var a
    b = 9;
    console.log(a);	// undefined
    console.log(b);	// 9
    a = '123';
}
a = 18;
f1();
// 最终结果是 undefined 9

案例:

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    // 相当于 var a = 9; b = 9;c = 9;  b和c的前面没有var声明,当全局变量看
    // 也可以集体声明 var a = 9,b = 9,c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

// 上述代码相当于:
function f1() {
    var a;
    a = b = c = 9;
    console.log(a);	// 9
    console.log(b);	// 9
    console.log(c);	// 9
}
f1();
console.log(c);	// 9
console.log(b);	// 9
console.log(a);	// 报错 a是局部变量

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值