JS中function的基础知识

时间 2020-05-30

标签 function 基础知识栏目 JavaScript 繁體版

原文原文链接

1、什么是函数

一、实质与意义

函数实际上就是一种方法；意义在于封装

二、应用：

把实现某一个功能的代码封装在一块儿，后期想实现这个功能，只须要执行函数便可，不须要从新编写这些代码了

三、目的：

减小页面中冗余代码，提升代码重复利用率，“低耦合，高内聚”

2、函数的两个重要部分

思惟导图javascript

一、建立函数

-1).语法：

function 函数名(形参){ 函数体 }

-2).建立过程：

第一步：
- 建立值：
  - 一、开辟一个堆内存
  - 二、把函数体中的代码看成字符串储存在堆中
  - 三、把堆地址放到栈中

第二步：
- 建立变量
第三步：
- 让变量和地址关联

注意:只建立函数，其实就是建立了一个存储一堆字符串的堆而已，并无实际做用 java

二、执行函数

-1).语法：

函数名（实参）

-2).目的

把建立的函数执行（把函数体中的代码执行）

-3).依赖条件

栈内存
供代码执行的上下文

已知页面加载时浏览器已经建立了ECStack执行环境栈,因此咱们在执行函数时，只须要建立一个新的执行上下文就能够了。数组

-4).执行过程：

每一次函数执行时，都会按照下面的顺序进行；浏览器

第一步：
- 建立一个全新的执行上下文，把执行上下文压缩到栈内存中去执行（进栈执行）
第二步：
- 在这个上下文中，也存在一个AO（变量对象），用来存储当前上下文代码执行中所建立的变量
  - 这些变量是“私有变量”
  - 除当前上下文中可使用这些变量的值，上下文之外的环境不能直接使用私有变量的值
......先讲解基础知识，因此咱们中间省略了一些细化的步骤，后续会一点一点完善；
第三步：
- 代码执行
第四步：
- 当上下文中的代码都执行完后，若是该上下文中的信息没有被外界占用的状况，则执行完出栈（释放掉）以减小栈内存中的空间；

函数运行机制图例：bash

3、参数的形式

思惟导图函数

一、形参

定义：
- 建立函数的时候，咱们并不清楚须要处理的数据是什么，只有当函数执行的时候，咱们才会知道，此时咱们须要定义相应的入口，这个入口在JS函数中被称为形参；
做用：
- “用来存储执行函数时，传递进来的信息”
- 因此形参是变量

二、实参

定义：
- 函数执行的时候，传递进来的值会赋值给形参变量，传递的具体值在JS函数中被称为实参；
做用：
- “实参就是具体传递的值”

function sum(x, y) {
	let total = x + y;
	console.log(total);
}
sum(1 === 1 ? 'OK' : 'NO'); //=>也须要把三元表达式运算的结果做为实参传递给形参

let age = 20;
sum(age); //=> x=20 实参永远都应该是值，此处虽然写的AGE，可是他会把AGE变量的值拿到，而后传递给形参x，而不是把AGE自己传递过去 =>sum(20) 
复制代码

形参是建立函数时候设定的变量，实参是执行函数时候给形参传递的具体值 ui

形参与实参的对应关系

一、设定形参变量，可是执行的时候没有传递对应的值，则形参默认值是undefined
二、形参只有两个，实参有三个时，第三个实参并无对应的形参接收（可是传递给函数了）

三、arguments

定义：
- 函数内置的实参集合
- 无论咱们时候设置形参，或者是否传递了实参，arguments 始终都会存在（ES6箭头函数中没有arguments）
- 只能出如今函数体中
形式：
- arguments 是一个类数组集合
- 相似数组，但不是数组，和元素集合 HTMLCollection 相似
原理:
- 根据索引记录了每个传递进来的实参信息 (和是否认义形参变量没有关系)
- arguments中包含了全部传递进来的实参信息
- length 属性表明传递实参的个数
栗子🌰：任意数求和：无论传递几个实参值进来，咱们都能求出对应的和

//=================任意数求和：无论传递几个实参值进来，咱们都能求出对应的和
// 有一个具体的问题：基于形参变量来接收求和的数字已经不现实了，由于咱们也不知道要传递多少个值，也就没法肯定要定义多少个形参变量了
function sum() {
	// 循环ARGUMENTS中的每一项（每个传递进来的实参），都累加给TOTAL，最后就能求出和了
	let total = 0;
	for (let i = 0; i < arguments.length; i++) {
		// 把传递进来的实参信息都转换为数字：排除掉非有效数字或者字符串
		let item = Number(arguments[i]);
		if (!isNaN(item)) {
			// 有效数字
			total += item;
		}
	}
	console.log(total);
}
sum(); //=>0
sum(10); //=>10
sum(10, 20); //=>30
sum(10, 20, 30, 40); //=>100
sum(10, 20, 'AA'); //=>30 过滤掉非有效的数字
sum(10, '20'); //=>30 若是是字符串，不能是字符串拼接，还应该是数学相加
复制代码

四、ES6中的剩余运算符

语法：
- ...args（args为随便起的变量名）
定义：
- 把传递进来的实参信息，都以数组的形式保存到args变量中
使用：
- 若是不想在剩余参数中收集全部参数，则能够组合常规参数和剩余参数。
- 一个常规参数，获取一个参数的值。而后剩下的参数 ...args 接收剩余的参数。
上面的🌰用剩余运算符实现：

function sum(...args) {
	// ...args：ES6中的剩余运算符，把传递进来的实参信息，都已数组的形式保存到ARGS变量中
	let total = 0;
	for (let i = 0; i < args.length; i++) {
		let item = Number(args[i]);
		if (!isNaN(item)) {
			total += item;
		}
	}
	console.log(total);
}
sum(10, 20, 30, 40);
复制代码

剩余参数和 arguments对象的区别

一、剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的全部实参。
二、arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例

4、返回值 return

思惟导图spa

上面说了，函数中的变量为私有变量，除当前上下文中可使用这些变量的值，上下文之外的环境不能直接使用私有变量的值

定义：
- 那么，若是，外面想用当前上下文中的一些私有信息，则须要函数提供对应的出口，把信息提供给外面使用，而这个出口在JS函数中被称为“返回值 return”
做用：
- 一、基于 return 把变量的值暴露给外面使用
  - 在外边建立一个变量，用来接收函数执行返回的值（也就是 return 后面的值）
- 二、告知函数体中下面代码不在执行

return 后面放的必定是变量 code

例如:
- console.log（sum）:
  - 这里输出的是 sum 函数自己;
  - sum = 函数
- console,log (sum());
  - 表明让函数执行
  - 这里输出的是函数的返回值
  - 若是函数中没有写return，默认的返回值是undefined

5、函数的表达形式

思惟导图cdn

一、实名函数

有函数名的

二、匿名函数

-1).函数表达式

把一个函数看成值赋值给变量
事件绑定

document.body.onclick = function () {
	// 此处就是匿名函数
};
let fn = function () {
	// 也是匿名函数 fn表明这个函数 和 function fn相似
};
复制代码

-2).自执行函数
- 函数建立完就当即执行了
- 建立函数时，function包一个小括号或前面加特殊字符是为了符合语法规范
  - (function（n）{...})(实参):
  - + function（n）{...}(实参)
  - - function（n）{...}(实参)
  - ~ function（n）{...}(实参)
  - ! function（n）{...}(实参)

三、箭头函数

本次不详细讲解

语法：
- let func = (x,y) => {...};

//==============箭头函数（ES6中新定义的建立函数的方式）
let func = (x, y) => {
	// x和y是形参变量
	// 大括号中仍是函数体
};
func(10, 20);


//=>箭头函数能够简化函数编写的方式：若是函数体中只有一句RETURN，则能够忽略大括号和RETURN 
let sum = (x, y) => x + y;

function sum(x, y) {
	return x + y;
}

function func(x) {
	return function (y) {
		return x + y;
	}
}
let func = x => y => x + y;
复制代码