闭包学习,闭包和高阶函数

本文探讨了前端面试中面试官关注闭包的原因,包括理解闭包的概念、评估实战应用能力和代码编写调试技能。通过实例分析了闭包在函数作用域、状态保持和高阶函数中的角色,强调了闭包在现代前端开发中的实用价值。
摘要由CSDN通过智能技术生成

面试官反复在前端面试中提出闭包相关的问题,并要求提供代码示例,主要是为了考察以下几点

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 变量,展示了闭包用于封装状态和实现数据隐藏的实际用途。

前端面试官问你闭包是什么

作为前端面试者,在回答“闭包是什么”的问题时,可以按照以下结构进行详细阐述:

闭包是一种特殊的函数对象,它拥有两个主要特征:

  1. 词法作用域的延续: 在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 变量。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃饭的羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值