一、函数的定义与调用
函数是一段可重复使用的代码块,用于执行特定任务或计算等功能。它可以接受输入参数(形参),并根据参数执行操作后返回结果。
函数的定义
例如在 JavaScript 中可以这样定义函数:
function fun() { return "Hello,world"; }
函数的调用
通过函数名加小括号的方式调用函数,如document.write(fun());。一个函数可以有多个return语句,但调用时只有第一个return语句被执行,其后面表达式的值作为返回值,后面的代码被忽略。函数返回值无类型限制。
函数的形参和实参
形参
是声明函数时写在函数名后的小括号内的参数,用变量名接收,如
function add(x, y)中的x和y。
实参
是调用函数时写在小括号内的参数,如add(1, 2)中的1和2。形参和实参一一对应,如果形参没有实参对应,形参拿到的是undefined。
this 关键字
this 是一个关键字,在函数执行过程中能访问运行环境,它是一个对象,其值根据函数的调用方式和上下文而变化,与函数的执行环节有关,与声明无关。它指向当前函数的运行环境,能在函数内部访问和操作当前对象的属性和方法。
函数的不同调用方式
作为方法被调用
当函数被赋值给一个对象的属性,并通过对象属性引用的方式调用函数时,函数作为对象的方法被调用。例如:
var person = {Name: "liux",Name2: "Dog",fullName: function() {return this.Name + " " + this.Name2;}};console.log(person.fullName());
使用构造函数调用函数
使用关键字new调用函数时,会创建一个新对象并作为this参数传递给构造函数,构造函数进行初始化设置后将新对象作为返回值。例如:
function a2(name) {this.name = name;this.greet = function() {console.log("你好,我是" + this.name);};}var a3 = new a2("lx");a3.greet();
作为函数方法调用函数
不同类型函数调用的主要区别在于最终作为函数上下文(this)传递给执行函数的对象不同。可以使用call()和apply()方法显式指定函数调用时的上下文。call()接收参数列表,apply()接收数组作为参数。例如:
function add(a, b) {return a + b;}// 使用call()result1 = add.call(result1, 2, 3);// 使用apply()Array = [2, 3];result2 = add.apply(result2, Array);
二、函数参数设置
有参函数和无参函数
无参函数
定义函数时不设置参数,如
function A() { console.log("Hello World!"); }。
有参函数
定义函数时设置了参数,如
function B(name) { console.log("Hello " + name + "!"); }。
函数参数的其他特性
含有默认值的参数
在设置函数形参时可指定默认值,当调用者未传递该参数时,函数使用默认值操作。例如
function C(name = "World") { console.log("Hello " + name + "!"); }。
剩余参数
函数定义时可利用 “… 变量名” 的方式动态接收不确定数量的实参,如function D(...args) { console.log(args); }。
函数内外变量的作用域
全局变量
在函数外定义的变量是全局变量,可在函数内部和外部访问,如
var globalVar = 'I am a global variable';。
局部变量
在函数内部使用var关键字定义的变量是局部变量,只能在该函数内部访问。未使用var定义的变量在函数内部也是局部变量。函数的参数也是局部变量。例如:
function localScope() {var localVar = 'I am a local variable';console.log(localVar);}localScope();
三、进阶函数
函数表达式
函数达式是将声明的函数赋值给一个变量,通过 “变量名 ()” 的方式调用函数,定义必须在调用前。与函数定义方式不同,函数表达式的定义顺序有要求且函数名可省略。例如
var fn = function sum(num1, num2) { return num1 + num2; }; fn(2, 3);。
匿名函数
为什么要用匿名函数
团队合作时可避免函数名冲突。
匿名函数的实现方式
包括函数表达式中省略函数名,如var fn = function (num1, num2) { return num1 + num2; };;匿名函数自调用,如(function (num1, num2) { console.log(num1 + num2); })(2, 3);;处理事件,如document.body.onclick = function () { alert('Hi, everybody!'); }。
箭头函数
特点
箭头函数可视为一种匿名函数形式,用于简化函数定义语法,没有传统函数名,通过箭头(=>)定义函数体。通常用于不需要显式函数名的场景,如作为回调函数传递给其他函数。
语法
箭头函数的小括号中可传入参数,如var fn = (num1, num2) => { return num1 + num2; };。当函数体只有一句代码且执行结果是返回值时,可省略大括号和return关键字;当参数只有 1 个时,可省略参数外部小括号。
回调函数
定义
一个函数 A 作为参数传递给一个函数 B,然后在 B 的函数体内调用函数 A,称函数 A 为回调函数。
同步回调
同步回调是阻塞的,回调函数在调用它的函数完成任务后立即执行,程序执行顺序是线性的。例如:f
unction A1(a, b, callback) {var result = a + b;if (typeof callback === 'function') {callback(result);}}function A2(result) {console.log('计算结果是: ' + result);}A1(3, 4, A2);
异步回调
异步回调是非阻塞的,回调函数在调用它的函数完成任务之后某个时间点执行。例如:
function add(a, b, callback) {setTimeout(function() {callback(a + b);}, 1000);}function aResult(result) {console.log("结果是:" + result);}add(2, 3, aResult);
异步回调函数与异步函数
异步回调函数
使用回调函数处理异步操作,适合简单情况,但代码可能较复杂。例如模拟点奶茶,服务员准备奶茶时顾客可做其他事,准备好后调用回调函数通知顾客。
异步函数
使用async和await关键字简化异步操作执行,让异步代码更像同步代码,提高可读性和可维护性。例如使用异步函数点奶茶,顾客点餐后可先去做别的事,等餐时通过await暂停代码执行,拿到奶茶后继续执行。
四、函数作用域相关
作用域的概念
作用域是可访问变量的集合,是根据名称查找变量的一套规则。JavaScript 采用词法作用域(静态作用域),包括全局作用域和函数作用域。
全局作用域
在最外层函数和最外层函数外面定义的变量拥有全局作用域,所有脚本和函数均可使用。例如var carName = "Volvo";在任何脚本和函数内均可访问。
局部作用域
变量在函数内声明为局部变量,其生命周期仅限于函数执行期间,外部无法直接访问。只有函数的{}构成作用域,对象的{}以及if() {}都不构成作用域。let和const声明的变量会产生块作用域,var不会。例如:
function myFunction() {var carName = "Volvo";}
词法作用域
词法作用域依据变量在源代码中的位置查找变量,从当前作用域开始向上遍历到包含它的所有外层作用域,直到找到定义。其特点包括静态作用域、封闭作用域和模块化。例如内部函数可访问外部函数中定义的变量。
变量提升
变量提升是指变量声明会被提前到其所在作用域的顶部,但只有变量声明会被提升,而不是变量赋值。例如var关键字定义的变量可以在使用后声明。
块级作用域
块级作用域是在代码块({}包裹部分)内声明的作用域,ES6 引入,通过let和const关键字声明的变量具有块级作用域,只能在声明所在代码块内可见。例如:
if(true){let var5="var5";console.log(var5)}
作用域链
作用域链是由多个嵌套的作用域组成的机制,用于解析标识符(变量和函数),决定了变量和函数的查找顺序。从当前作用域开始查找,找不到则向上一级作用域查找,直到找到或达到全局作用域。例如内部函数可访问自身、外层函数和全局作用域内的变量。
五、闭包函数
闭包的概念
闭包函数是在一个函数内部创建的函数,内部函数可以访问到外部函数的变量和参数,即使外部函数执行完毕,这些变量和参数仍然能够被内部函数访问。
闭包的特点
- 让外部访问函数内部变量成为可能。
- 局部变量会常驻在内存中。
- 可以避免使用全局变量,防止全局变量污染。
- 会造成内存泄漏。
闭包的创建
闭包通常是在另一个函数内部定义一个函数,内部函数作为原函数的返回值返回。例如:
function 外部函数() {var 局部变量 = "我是一个局部变量";function 内部函数() {console.log(局部变量);}return 内部函数;}var 闭包 = 外部函数();闭包();
闭包的应用
- 创建私有变量和方法,用于模块化编程。
- 在事件处理器和回调函数中保持变量的状态,用于异步编程。
- 实现柯里化和函数组合等高级函数编程技巧。
闭包的注意事项
闭包会保留外部函数的变量,可能导致额外的内存消耗和内存泄漏,使用时需注意内存管理和性能问题。
六、递归函数
递归函数是自身调用自身的函数,但要注意一定要有递归结束的条件,并且要改变递归条件的代码。例如求 1 - 100 的累加值的递归函数:
function sum(n) {if(n == 1) {return 1;}return sum(n - 1) + n;}sum(100);