技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

JS面试问题:什么是闭包,你为什么要使用闭包

作者:admin    时间:2022-6-2 16:40:11    浏览:

本文将介绍什么是闭包,和使用闭包的原因,以及闭包的工作方式,结合示例详细了解闭包在JavaScript中的作用。

什么是闭包,你为什么要使用闭包

什么是闭包,为什么要使用闭包?

闭包是外部函数内部的内部函数。它们有自己的局部作用域,可以访问外部函数的作用域、参数(但不是参数对象),还可以访问全局变量。

我们使用闭包的原因是因为 Javascript 是函数级范围,而不是与其他语言一样是块级范围。另外, Javascript 是异步/事件驱动语言,经常使用闭包的例子是 jQuery(例如 click())。

闭包是如何工作的?

闭包的工作方式:

  1. 在其外层函数执行完毕并返回值后,闭包仍然可以运行。
  2. 闭包存储对外部函数变量的引用,因此,我们将始终可以访问外部函数变量的更新值。
  3. 因为我们可以访问外部函数变量的更新值,当变量通过 for 循环更改时,我们将遇到问题/错误,但这可以通过使用 IIFE(立即调用函数表达式)来解决。

闭包的示例代码

下面是在 IIFE 中使用闭包的示例代码。

注意,IIFE 或立即调用函数表达式是另一个 Javascript 概念。

/*
 这段代码的目标是能够为每个博客帖子生成唯一的id
 使用闭包和IIFE(立即调用函数表达式),通过声明外部函数并使用[]访问特定帖子
*/

// 这里,我们创建一个以json格式保存示例数据的变量
var blogPost = [
{
  title: 'title0',
  id: 0 },

{
  title: 'title1',
  id: 0 },

{
  title: 'title2',
  id: 0 }
];

/*
  我们将创建一个函数,为博客帖子生成唯一id
  此函数接受post参数(我们将在此处传递blogPost json数据)
*/
function generateBlogPostID(thePost) {
  var uniqueID = 100; // 这将保存从for循环和闭包生成的唯一id

  // 这个for循环将遍历blogPost json var中的每个项目
  for (var i = 0; i < thePost.length; i++) {
    /* 
      我们访问每个blogPost项目的id
      并为每个blogPost项目id分配一个闭包函数
    */
    thePost[i]['id'] = function (j) {// j参数变量是我在调用IIFE(立即调用函数表达式)时传入的
      return uniqueID + j; // for循环的每次迭代都会将i的当前值传递到IIFE(立即调用函数表达式)中,并将正确的值保存到数组中
    }(i); // 立即调用此函数,将i变量作为参数传递
  }

  return thePost;
}

// 现在我们开始测试
var createIDforBlogPost = generateBlogPostID(blogPost);

var blog0 = createIDforBlogPost[0];
console.log(blog0.id);  // 100

var blog1 = createIDforBlogPost[1];
console.log(blog1.id);  // 101

var blog2 = createIDforBlogPost[2];
console.log(blog2.id);  // 102

demodownload

输出

100
101
102

 

代码解释

这段代码的目标是能够为每个博客帖子生成唯一的id,使用闭包和IIFE(立即调用函数表达式),通过声明外部函数并使用[]访问特定帖子。

1、var blogPost 是我们创建一个以json格式保存示例数据的变量。

2、function generateBlogPostID(thePost) 是我们创建的一个函数,为博客帖子生成唯一id,此函数接受post参数(我们将在此处传递blogPost json数据)。

3、var uniqueID = 100; 这将保存从for循环和闭包生成的唯一id。

4、for (var i = 0; i < thePost.length; i++) 这个for循环将遍历blogPost json var中的每个项目。

5、闭包的使用

thePost[i]['id'] = function (j) 
      return uniqueID + j; 
}(i);
  • 我们访问每个blogPost项目的id,并为每个blogPost项目id分配一个闭包函数。
  • j参数变量是在调用IIFE(立即调用函数表达式)时传入的。
  • for循环的每次迭代都会将i的当前值传递到IIFE(立即调用函数表达式)中,并将正确的值保存到数组中。
  • (i) 表示立即调用此函数,将i变量作为参数传递。

6、console.log(blog0.id); 输出得到的id。

总结

本文介绍了什么是闭包,和使用闭包的原因,以及闭包的工作方式,结合一个示例的分析,通过本文的学习,你应该对闭包的认识更进一步。

您可能对以下文章也感兴趣

标签: 闭包  
相关文章
    x
    x
    • 站长推荐