JavaScript网页编程之函数，百度最爱考的前端面试题

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 954 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

程序员专栏收录该内容

296 篇文章

订阅专栏

本文围绕JavaScript展开，介绍了函数递归及斐波那契数列案例。重点讲解作用域，包括函数和块级作用域、全局和局部变量区别，还阐述了作用域链和遮蔽效应。此外，说明了预解析中变量和函数声明提升、提升顺序、函数表达式提升，以及函数声明提升的应用和函数矮化成表达式实现自调用。

函数递归

函数内部可以通过函数名调用函数自身的方式。
递归的次数太多容易出现错误：超出计算机的计算最大能力。
案例：输出斐波那契数列的某一项的值。斐波那契数列：后面的一项数据是前两项数据之和。1,1,2,3,5,8,13,21,34,55……

function fbo(a) {

if(a == 1 || a == 2){

return 1;

}else {

return fbo(a - 1) + fbo(a - 2);

}

console.log(fbo(1));

console.log(fbo(2));

console.log(fbo(3));

console.log(fbo(4));

作用域

变量可以起作用的范围

函数作用域：如果变量定义在一个函数内部，只能在函数内部被访问到，在函数外部不能使用这个变量，函数就是变量定义的作用域。
块级作用域：任何一对花括号{}中的结构体都属于一个块，在这之中定义的所有变量在代码块外都是不可见的。
在es5之前没有块级作用域的概念，只有函数作用域，现阶段可以认为JavaScript没有块级作用域。

变量根据作用域不同划分为两类

全局变量：从广义上来说，也是一种局部变量，定义在全局的变量，作用域范围是全局，在整个 js 程序任意位置都能够被访问到。
局部变量：在函数被调用，内存会开辟一部分空间去执行函数并声明其中的局部变量，当函数执行完，这块内存区域就会立即被释放。(函数的形式参数也属于局部变量)
两者的区别：变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁。

参数和函数的作用域

函数的形式参数也属于局部变量。，函数的参数也是属于函数自己内部的局部变量，只能在函数内部被使用，在函数外面没有定义。
在函数中定义的函数，只能在定义函数的函数的范围内进行调用，到了全局会失效。

// 不正确的写法

function outer(a) {

a = 1;

console.log(a);

function inner() {

console.log(“我是inner”);

}

// 正确写法：在这里进行调用 inner();

}

// 调用函数

outer(1);

inner(); // 控制台会报错，undefined

作用域链和遮蔽效应

只要是代码，就至少有一个作用域，即：全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
作用域链：将这样的所有的作用域列出来，可以有一个结构 -> 函数内指向函数外的链式结构
- 案例：

// f1函数：0级链

function f1() {

// f1函数中的num变量：1级链

var num = 123;

// f1函数中的f2函数：1级链

function f2() {

// f2函数中的num变量：2级链

console.log(num);

}

f2();

}

// num变量：0级链

var num = 456;

f1();

案例配图：

遮蔽效应
- 程序在遇到一个变量时，使用时作用域查找顺序，不同层次的函数内都有可能定义相同名字的变量，一个变量在使用时，会优先从自己所在层作用域查找变量，如果当前层没有变量定义会按照顺序从本层往外依次查找，直到找到第一个变量定义(如果一直没有找到，那么就会在控制台报错 is no defined.)。整个过程中会发生内层变量遮蔽外层变量的效果，叫做“遮蔽效应”。
案例：

找不到的情况：

当执行f2()函数中的console.log(num);时，

会先查找f2()函数(2级链)中是否有num,有就输出;

假设不存在的话，就会往上一层f1()函数(1级链)中去找,有就输出num；

假设还是不存在的话，就还要往上一层找，有就输出num(当前已是最外层:0级链);

假设还是不存在的话，程序就会在控制台报错。

遮蔽效应：最近的会遮盖较远的

// num变量：0级链

var num = 456;

// f1函数：0级链

function f1() {

// f1函数中的num变量：1级链

var num = 123;

// f1函数中的f2函数：1级链

function f2() {

var num = 78;

// f2函数中的num变量：2级链

console.log(num);

}

f2();

}

f1();

不写var关键字的影响

在函数内部想要定义新的变量，如果不加关键字 var，相当于定义的全局变量。如果全局也有相同的标识符，会被函数内部的变量影响，局部变量污染全局变量。

// 全局变量

var a = 1;

function fun() {

a = 2;

console.log(a); // 2

}

// 局部变量污染全局变量。

console.log(a); // 2

预解析

javascript代码的执行是由浏览器中的javascript解析器来执行的。javascript解析器执行javascript代码的时候，分为两个过程：预解析过程和代码执行过程。
预解析过程：
- 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
先提升var，再提升function
javascript的执行过程：在预解析之后，根据新的代码顺序，从上往下按照既定规律执行js代码。

变量声明提升

提升过程中，只提升声明过程，不提升变量赋值，相当于变量定义未赋值，变量内存储undefined 值。
因此，在js中会出现一种现象，在前面调用后定义的变量，不会报错，只会使用undefined 值。

函数声明提升

在预解析之后的代码执行过程中，函数定义过程已经在最开始就会执行，一旦函数定义成功，后续就可以直接调用函数。
因此，在 js 中会出现一种现象，在前面调用后定义的函数，不会报错，而且能正常执行函数内部的代码。

提升顺序

预解析过程中，先提升 var 变量声明，再提升function 函数声明。

假设出现变量名和函数名相同

// 模拟预解析过程

提前变量声明，执行后fun = undefined

var fun;

提前函数声明,执行后fun中覆盖前面的undefined，变成fun函数的定义过程

function fun(a) {

a = 1;

return a;

}

/* 执行下面这句输出语句，得到的结果：

ƒ fun(a) {

a = 1;

return a;

}

显然可以看出来undefined已经被覆盖

console.log(fun);

// 在函数定义过程前面调用函数，也不会报错

var b = fun();

console.log(b); // 1

// 函数定义

function fun() {

return 1;

}

// 给fun赋值，fun变成Numner类型

var fun = 1;

console.log(fun); // 1

/* 再次调用fun函数的时候，就报错了

Uncaught TypeError: fun is not a function

类型错误：因为前面给fun赋值为一个数字类型了，其已经不是函数，无法执行调用。

var c = fun();

- 如果调用标识符的过程在源代码函数和变量定义后面，相当于函数名覆盖了一次变量名，结果在执行到变量赋值时，又被新值覆盖了函数的值，那么在后面再次调用标识符，用的就是变量存的新值。
那么后提升的函数名标识符会覆盖先提升的变量名。
在后续的代码中出现调用标识符时，内部是函数的定义过程，而不是undefined.
建议：不要书写相同的标识符给变量名或函数名，避免出现覆盖。