【前端面试系列】JavaScript闭包

已于 2024-11-18 16:16:08 修改
阅读量997 收藏 19
点赞数 35
文章标签： 前端 javascript 开发语言
于 2024-11-08 18:36:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35732986/article/details/143632812
版权

1. 闭包的本质

闭包是JavaScript中的一个核心概念，它是一个函数和其词法环境的组合体。这个词法环境由函数声明时所在的作用域中的所有局部变量组成。简单来说，闭包允许一个内部函数访问其外部函数的作用域。

1.1 闭包vs普通函数

特性闭包普通函数
访问外部变量可以访问外部函数作用域只能访问全局变量和自身局部变量
生命周期可以延长局部变量的生命周期函数执行完毕后，局部变量被销毁
内存占用较高，因为保留了外部作用域较低
封装性可以创建私有变量和方法无法直接创建私有变量和方法

2. 高级应用场景

2.1 函数式编程

闭包在函数式编程中扮演着重要角色，特别是在实现高阶函数、柯里化和组合等技术时。

function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));  // 输出: 10
console.log(triple(5));  // 输出: 15

2.2 异步编程模式

闭包在处理异步操作时非常有用，特别是在回调函数和Promise中。

function fetchUserData(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`https://api.example.com/posts?userId=${user.id}`)
        .then(response => response.json())
        .then(posts => {
          return { user, posts };  // 闭包捕获了外部的user变量
        });
    });
}

fetchUserData(1).then(({ user, posts }) => {
  console.log(user, posts);
});

2.3 模块模式与私有状态

闭包可以用来创建私有变量和方法，实现信息隐藏和封装。

const Counter = (function() {
  let count = 0;  // 私有变量

  function changeBy(val) {  // 私有方法
    count += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return count;
    }
  };
})();

console.log(Counter.value());  // 0
Counter.increment();
Counter.increment();
console.log(Counter.value());  // 2
console.log(Counter.count);  // undefined，无法直接访问私有变量

3. 性能考虑与优化

3.1 内存泄漏风险

闭包可能导致意外的内存泄漏，特别是在处理DOM元素时：

function attachHandler(element) {
  let clickCount = 0;
  element.addEventListener('click', function() {
    console.log(`Clicked ${++clickCount} times`);
  });
}

// 使用
const button = document.createElement('button');
attachHandler(button);
// 之后即使button元素被移除，闭包仍然引用着clickCount，可能导致内存泄漏

3.2 优化策略

  1. 及时清理：在不需要时，手动解除对闭包的引用。
  2. 避免过度使用：不是所有场景都需要闭包，评估是否有更简单的替代方案。
  3. 使用WeakMap：对于需要关联数据到对象但又不想阻止垃圾回收的场景，考虑使用WeakMap。
const cache = new WeakMap();

function computeExpensiveResult(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = /* 复杂计算 */;
  cache.set(obj, result);
  return result;
}

4. ES6中的闭包

4.1 块级作用域与let/const

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000);
}
// 输出: 0 1 2 3 4

4.2 箭头函数与词法this

function DelayedGreeter(name) {
  this.name = name;
}

DelayedGreeter.prototype.greet = function() {
  setTimeout(() => {
    console.log(`Hello, ${this.name}`);
  }, 1000);
};

const greeter = new DelayedGreeter("World");
greeter.greet();  // 输出: Hello, World

5. 闭包的优缺点

优点

  1. 数据隐藏和封装：可以创建私有变量和方法，实现信息隐藏。
  2. 状态保持：能够在函数之间保持状态，实现数据持久化。
  3. 回调和高阶函数：在异步编程和函数式编程中非常有用。
  4. 模块化开发：可以用来创建模块和命名空间，避免全局变量污染。

缺点

  1. 内存占用：闭包会保留其外部作用域的引用，可能导致更高的内存使用。
  2. 性能影响：由于额外的作用域链查找，可能会对性能造成轻微影响。
  3. 内存泄漏风险：如果不正确管理，可能导致意外的内存泄漏。
  4. 复杂性：过度使用闭包可能使代码难以理解和维护。

6. 面试题解析

问题1：什么是闭包？如何在JavaScript中创建闭包？

答：闭包是指一个函数及其词法环境的组合。它允许内部函数访问其外部函数的作用域。在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

示例：

function outerFunction(x) {
    let y = 10;
    function innerFunction() {
        console.log(x + y);
    }
    return innerFunction;
}

const closure = outerFunction(5);
closure(); // 输出15

问题2：请举例说明闭包在实际开发中的应用场景

答：闭包在实际开发中有多种应用场景，以下是几个常见的例子：

模块模式
const counter = (function() {
    let count = 0;
    return {
        increment: function() { count++; },
        decrement: function() { count--; },
        getCount: function() { return count; }
    };
})();

counter.increment();
console.log(counter.getCount()); // 1
函数工厂
function multiplyBy(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15
异步操作中的数据保持
function fetchData(url) {
    return function(callback) {
        fetch(url)
            .then(response => response.json())
            .then(data => callback(data));
    };
}

const getUserData = fetchData('https://api.example.com/user');
getUserData(data => console.log(data));

问题3：在使用闭包时，有哪些常见的陷阱？如何避免这些问题？

答：使用闭包时的常见陷阱及其解决方案包括：

循环中的闭包问题

问题：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// 输出五次5，而不是0,1,2,3,4

解决方案：

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// 正确输出0,1,2,3,4
this指向问题

问题：

const obj = {
    name: 'MyObject',
    greet: function() {
        setTimeout(function() {
            console.log('Hello, ' + this.name);
        }, 1000);
    }
};
obj.greet(); // 输出 "Hello, undefined"

解决方案：

const obj = {
    name: 'MyObject',
    greet: function() {
        setTimeout(() => {
            console.log('Hello, ' + this.name);
        }, 1000);
    }
};
obj.greet(); // 输出 "Hello, MyObject"
内存泄漏

不正确的DOM引用可能导致内存泄漏。解决方案是确保在不需要时解除对DOM元素的引用，或使用弱引用（WeakMap/WeakSet）。

问题4：如何优化使用闭包的代码以提高性能？

答：优化使用闭包的代码可以从以下几个方面入手：

  1. 最小化闭包范围：只捕获必要的变量，减少内存占用。
  2. 及时清理：当闭包不再需要时，将其设置为null以便垃圾回收。
  3. 避免在循环中创建函数：如果可能，将函数创建移到循环外部。
  4. 使用立即执行函数表达式（IIFE）：来限制闭包的作用范围。
  5. 权衡使用：评估是否真的需要闭包，有时普通函数或其他模式可能更合适。

示例优化：

// 优化前
function createFunctions() {
    var result = [];
    for (var i = 0; i < 1000; i++) {
        result.push(function() { return i; });
    }
    return result;
}

// 优化后
function createFunctions() {
    var result = [];
    for (var i = 0; i < 1000; i++) {
        result.push((function(num) {
            return function() { return num; };
        })(i));
    }
    return result;
}

通过这些问题和答案，我们可以更好地理解闭包的概念、应用场景、潜在问题及其解决方案。在实际开发和面试中，掌握这些知识点将有助于更好地运用闭包，同时避免常见的陷阱。

一、比较操作符概述

JavaScript中的比较操作符主要分为两类：相等操作符（==）和全等操作符（===）。理解这两者的区别和使用场景对于编写健壮的代码至关重要。

二、相等操作符（==）深入解析

相等操作符（==）用于比较两个操作数是否相等，且在比较前会进行类型转换。

2.1 类型转换规则

  1. 布尔值转换为数值

    console.log(true == 1); // true
console.log(false == 0); // true

  2. 字符串转换为数值

    console.log("55" == 55); // true
console.log("" == 0); // true

  3. 对象转换为原始值

    let obj = { valueOf: function() { return 1; } };
console.log(obj == 1); // true

  4. null 与 undefined

    console.log(null == undefined); // true

  5. NaN 比较

    console.log(NaN == NaN); // false

  6. 对象引用比较

    let obj1 = { name: "John" };
let obj2 = { name: "John" };
console.log(obj1 == obj2); // false

2.2 相等操作符的特殊情况

console.log('' == '0');         // false
console.log(0 == '');           // true
console.log(0 == '0');          // true
console.log(false == 'false');  // false
console.log(false == '0');      // true
console.log(false == undefined);// false
console.log(false == null);     // false
console.log(null == undefined); // true
console.log(' \t\r\n' == 0);    // true

三、全等操作符（===）详解

全等操作符（===）用于严格比较两个操作数，仅当类型和值都相同时才返回 true。

3.1 全等比较示例

console.log("55" === 55);   // false
console.log(55 === 55);     // true
console.log(null === null); // true
console.log(undefined === undefined); // true

四、相等与全等操作符的对比

4.1 主要区别

  1. 类型转换：== 在比较前进行类型转换，=== 不会。

  2. null 和 undefined 的处理：

    console.log(null == undefined);  // true
console.log(null === undefined); // false

4.2 使用建议

除非在比较对象属性为null或undefined时，一般建议使用全等操作符（===），以避免意外的类型转换导致的错误。

const obj = {};
if (obj.x == null) {
    console.log("属性 x 不存在或为 null");
}
// 等同于但更冗长的写法
if (obj.x === null || obj.x === undefined) {
    console.log("属性 x 不存在或为 null");
}

五、面试题精选

  1. Q: 请解释 == 和 === 的区别，并给出一个例子说明何时使用 == 可能更合适。

    A: == 在比较前进行类型转换，而 === 不会。使用 == 比较 null 和 undefined 时可能更合适，例如：

    function isNullOrUndefined(value) {
    return value == null;
}

    这个函数可以同时检查 null 和 undefined，而使用 === 则需要两次比较。

  2. Q: 下面的比较结果是什么，为什么？

    console.log([] == ![]);

    A: 结果是 true。解释如下：

    1. ![] 首先被计算，结果为 false
    2. 比较变成了 [] == false
    3. false 被转换为数字 0
    4. [] 被转换为原始值，即空字符串 ''
    5. '' 被转换为数字 0
    6. 最终比较变成 0 == 0，结果为 true

  3. Q: 如何安全地比较两个可能为 NaN 的值？

    A: 可以使用 Object.is() 方法：

    function safeCompare(a, b) {
    return Object.is(a, b);
}
console.log(safeCompare(NaN, NaN)); // true

  4. Q: 在什么情况下 a !== a 会返回 true？

    A: 当 a 是 NaN 时。NaN 是JavaScript中唯一不等于自身的值。

  5. Q: 如何在不使用 === 操作符的情况下实现严格相等比较？

    A: 可以使用 Object.is() 方法：

    function strictEqual(a, b) {
    return Object.is(a, b);
}

    注意，Object.is() 与 === 略有不同，它认为 NaN 等于 NaN，且 -0 不等于 +0。

六、实践建议

  1. 默认使用 === 进行比较，避免意外的类型转换。
  2. 在检查值是否为 null 或 undefined 时，可以考虑使用 ==。
  3. 对于可能涉及 NaN 或 -0 与 +0 比较的场景，考虑使用 Object.is()。
  4. 在进行复杂比较时，优先考虑将值转换为相同类型后再使用 === 比较。
  5. 在代码审查中，特别关注 == 的使用，确保其使用是有意为之且合理的。

结语

感谢阅读本文！如果您觉得这篇文章对您有帮助，欢迎：

关注我的技术博客：徐白知识星球

本文是前端系列文章的一部分，更多精彩内容：

让我们一起在技术的道路上不断进步！

专注前端技术，定期分享高质量的技术文章和实战经验。欢迎交流与讨论！

offer收割攻略，Web前端面试真题JavaScript系列(带详解)
静Yu的博客
08-27 918
临近秋招，不少小伙伴开始了求职之路，面试是十分重要的考验，其次也离不开面试题。网上的面试题零零散散，十分混乱，正好我抽时间帮助大家总结一下。难易程度肯定是从简到难，今天是第一篇的续集——基础篇中的JavaScript部分。 面试题来源是我从网上花钱购买的真题，是有专人亲自面试总结出来的精题，也是高频问题。 是一套完整的面试题库，如果有小伙伴需要可以下载。（面试题900题+公司实战面试题400问） ♥♥♥完整面试题库♥♥♥ JavaScript部分 1 闭包 1.闭包就是能够读取其他函数.
2025高频前端面试题（含答案）
热门推荐
weixin_44672169的博客
04-22 24万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
前端面试常考 | js闭包
云创网络工作室官方账号
12-13 757
前端面试高频考点JS中的“闭包”
一道JS前端闭包面试题解析
11-23
问题 代码A function fun(n,o){ console.log(o); return { fun:function(m){//[2] return fun(m,n);//[1] } } } var a=fun(0); a.fun(1); a.fun(2); a.fun(3); var b=fun(0).fun(1).fun(2).fun(3); var c=fun(0).fun(1); c.fun(2); c.fun(3); 求出程序输出 这是一个闭包测试题 转换为等价代码 return返回的对象的fun属性对应一个新建的函数对象，这个函
2025年关于javascript面试题及其答案解析，万字长文，建议收藏..
最新发布
qq_38822390的博客
02-11 879
解析：闭包是指一个函数可以访问其外部作用域的变量，尽管外部函数已经返回。闭包可以用于数据封装和私有变量的创建。示例count++;// 1// 2解析事件冒泡：事件从目标元素开始向上冒泡到父元素，直到document。事件捕获：事件从document开始向下到目标元素。示例}, false);// 冒泡阶段}, true);// 捕获阶段thismapIIFEthisclosuredebounceasyncProxy解析。
闭包经典面试题
大董的博客
04-14 3万+
闭包应该是前段面试中经常碰到的面试题，很多人都会在这个问题上被问住。如果想要弄清楚就要掌握闭包的概念； 首先看面试题： for (var i = 1; i   setTimeout( function timer() {       console.log(i);   }, 1000 ); } 上面的代码会输出什么？怎么改动上述代码，使其依次输出1、2、3、
56.闭包的定义与作用
qq_36367494的博客
03-01 328
JS 中的闭包是什么？ javascript 饥人谷 1月10日发布赞  |   9收藏  |  36543 次浏览本文为饥人谷讲师方方原创文章，首发于 前端学习指南。大名鼎鼎的闭包！面试必问。请用自己的话简述什么是「闭包」。「闭包」的作用是什么。首先来简述什么是闭包假设上面三行代码在一个立即执行函数中（为简明起见，我就不写立即执行函数了，影响读者理解）。评论里没看完就说我写得有问题的，请看清楚哦...
前端面试题——js闭包
Catie
09-21 878
要求：利用闭包原理模拟计数器 function count(){ //... } var f = count(); f(); //输出1 f(); //输出2 f(); //输出3 ... 答案： function count(){ var i=0; return function(){ console.log(++i); } }
简单说 一道JS闭包面试题
FEWY的博客
07-02 3万+
说明 最近看到这样一段代码 function fun(n,o){ console.log(o); return { fun:function(m){ return fun(m,n); } }; } var a = fun(0);a.fun(1);a.fun(2);a.fun(3); var b = f
前端面试相关-闭包的使用场景
01-05
前端面试相关--闭包的使用场景
Web前端面试题目JavaScript(作用域，原型。原型链，闭包，封装函数).txt
07-06
前端面试题，包含JavaScript的闭包，作用域，原型，原型链，上下文环境以及DOM,BOM封装函数深度克隆，以及一些常见的·JS问题，试题简单但是容易混淆，作为前端工程师必考题
前端面试热点：JavaScript闭包与继承解析
"前端面试的热门问题涉及到JavaScript的多个核心概念，包括闭包、继承、异步处理、事件处理和优化技术。" 在JavaScript的世界里，闭包是一种强大的工具，它允许函数访问并操作其外部作用域内的变量，即使在其外部...
前端常见面试题——闭包
weixin_71341796的博客
12-24 1654
前端常见面试题——闭包
前端面试-闭包问题
RepecTT的博客
07-13 415
面试常见问题-闭包问题的个人理解
前端面试之闭包
xiaojiango0的博客
08-01 381
闭包的一些相关的概念和使用的场景
JS面试题-闭包
a_dragon_的博客
04-07 1286
闭包 含义：定义在一个函数内部的函数，并且能被被函数外部所引用。 函数A被定义在内部的函数B引用时，函数A被函数B闭包，当函数A被执行完时，函数A的作用域不会被释放。 function A() { var x = 1; function B() { //闭包 console.log(x++); } } A(); function f1
前端高频面试题---闭包
first_hands的博客
04-27 234
匿名自执行函数：我们知道所有的变量，如果不加上 var 关键字，则默认的会添加到全。闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈。局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误。数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如。种情况，即有的函数只需要执行一次，其内部变量无需维护，可以用闭包。闭包是指有权访问另外一个函数作用域中的变量的函数。
前端面试：闭包
Passer_hua的博客
03-04 879
闭包一般是ES5中用来解决函数外变量的问题的。 首先介绍一下变量作用域 // 1. 变量作用域：变量在什么范围内是可用的。 // name 在{}内外都可以使用,对于{}来说它并不是变量的一个限制 { var name = 'why'; console.log(name); } console.log(name); 上面的代码看起来没有什么问题，甚至有人还觉得代码块外还能调用变量是一个很方便的事情。 那么没有块级作用域会引起什么问题呢？ // 2.没有块级作用域引起的问题： if的块级 // f
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

徐白1177

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

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

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

打赏作者

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

抵扣说明：

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

余额充值