面试官反复在前端面试中提出闭包相关的问题,并要求提供代码示例,主要是为了考察以下几点:
1.概念:考察候选人是否真正理解闭包是如何形成的,即当一个函数可以访问并操作其外部作用域中的变量,即使在其外部函数已经执行完毕后仍然存在的现象。
2.实战应用能力:闭包在许多实际应用场景中都起到关键作用,比如模块化、缓存、事件监听解除、异步处理等。通过代码示例,面试官可以了解到候选人是否能够在实际开发中恰当地使用闭包解决具体问题。
3.代码编写与调试技能:提供闭包相关的代码示例,能让面试官看到候选人如何避免常见的闭包陷阱,例如循环引用、变量捕获等问题,并判断他们是否具备调试闭包相关bug的能力。
下面是一段经典的闭包面试题目的代码示例
function outerFunction() {
var outerVar = 'outer';
var innerFunction = function() {
console.log(outerVar);
};
return innerFunction;
}
var inner = outerFunction();
inner(); // 输出 "outer"
在这个例子中,innerFunction
是一个闭包,因为它能够访问并打印 outerFunction
的局部变量 outerVar
,尽管 outerFunction
已经执行完毕。
面试官还可能要求解释以下更复杂的闭包行为:
function createCounter() {
var count = 0;
return {
increment: function() {
count++;
return count;
},
getCount: function() {
return count;
}
};
}
var counter = createCounter();
console.log(counter.getCount()); // 输出 0
counter.increment();
console.log(counter.getCount()); // 输出 1
在此例中,createCounter
返回的对象方法 increment
和 getCount
都形成了闭包,它们共享并维护同一个外部作用域中的 count
变量,展示了闭包用于封装状态和实现数据隐藏的实际用途。
前端面试官问你闭包是什么
作为前端面试者,在回答“闭包是什么”的问题时,可以按照以下结构进行详细阐述:
闭包是一种特殊的函数对象,它拥有两个主要特征:
-
词法作用域的延续: 在JavaScript中,闭包是指有权访问另一个函数作用域中变量的函数,即使这个函数是在其外部函数执行完之后才被执行。也就是说,当一个内部函数引用了外部函数的变量,并且这个内部函数在外部函数的作用域之外被调用时,就会形成闭包。
2.状态保持: 闭包能维持对外部作用域变量的引用,即使外部函数已经执行完毕并退出,这些变量也不会被垃圾回收机制回收。这就意味着闭包可以用来存储并保护那些不想暴露给全局作用域的数据,提供了类似于私有变量的效果。
function outerFunction(outerParam) {
var outerVariable = 'This is an outer variable';
function innerFunction(innerParam) {
console.log(outerVariable); // 内部函数可以访问外部函数的变量
console.log(outerParam); // 同样也可以访问外部函数的参数
}
return innerFunction; // 当我们返回innerFunction时,形成了一个闭包
}
var closureInstance = outerFunction('Some value');
closureInstance(); // 即使在outerFunction执行完成后,仍能正确输出outerVariable的值
简而言之,闭包是JavaScript中函数作用域和执行上下文相结合的产物,它使得内部函数可以长期保存外部函数的状态,这一特性在诸如函数工厂、模块化、异步编程(回调函数)、事件处理等领域具有广泛的应用价值。
高阶函数和闭包的联系和区别
高阶函数:是指接收一个或多个函数作为输入参数,或者输出一个新的函数的函数(接受函数作为参数)
以下是个错误的示例:
function higherOrderFunc(func) {
return func + 1; // 此时这里的fun还无法获取到内部的参数X
}
function addOne(x) {
return x + 1;
}
let result = higherOrderFunc(addOne);
console.log(result(5));
因为高阶函数需要接受一个函数作为参数,并返回一个新的函数,通常他的传参是一层一层传递的,如果不使用下面的方式写的话,无法获取到内层函数的参数。
正确的是:
function higherOrderFunc(func) {
return function (x) {
return func(x) + 1;
};
}
function addOne(x) {
return x + 1;
}
var newFunc = higherOrderFunc(addOne);
console.log(newFunc(5)); // 输出6
闭包:闭包是指有权访问其自身范围外的自由变量的函数,即便在其外部作用域已经关闭(外部函数已执行完毕),闭包依然能够记住并访问这些变量。(闭包作为返回值)
function makeAdder(x) {
return function(y) {
return x + y;
};
}
let addFive = makeAdder(5);
console.log(addFive(3)); // 输出8,闭包addFive保留了makeAdder函数中x的值(5)
实际上,高阶函数常常会生成闭包,因为当一个高阶函数返回了一个内部函数时,这个内部函数通常会形成一个闭包,它可以访问到外部高阶函数的变量:
function counterFactory(startFrom) {
let count = startFrom;
// 高阶函数返回一个内部函数,同时形成闭包
return function() {
count += 1;
return count;
};
}
let myCounter = counterFactory(10);
console.log(myCounter()); // 输出11,闭包记住了startFrom的值,并增加了1
console.log(myCounter()); // 输出12,闭包继续保留并更新计数
在这个例子中,counterFactory
是一个高阶函数,它返回了一个闭包函数,这个闭包函数能够访问并修改 counterFactory
作用域内的 count
变量。