0

0

对于js闭包进一步理解

不言

不言

发布时间:2018-07-18 17:16:14

|

1598人浏览过

|

来源于php中文网

原创

这篇文章给大家分享的内容是关于对js闭包进一步理解,内容很不错,有需要的朋友可以参考一下。

闭包这个概念  自我几个月前开始学习JS开始  我就一直困惑

之前也有所理解  但是后来长时间不用就给忘记了

闭包:通俗的讲  大多数人所接受的就是 一个函数有权利使用另一个函数里的局部变量

我看到了很多的不同之处

用最简单的代码表示

function out(){

var age=21;

function inner(){

console.log(age);

}

return inner;

}

var fn=out();
fn(); //22

很符合概念 

我觉得闭包就是在体现作用域

inner 函数实在 out 函数里面定义地 

所以console(age);

就会变量搜索机制,首先在自己(inner)函数作用域里面找,没找到 就去out函数作用域里面找

找到了  然后输出  如果在out里面没有找到的话  会再往更大的作用域找

一直到window的作用域   下级作用域可以向上访问  上级作用域不能向下访问

作用域就是指

{  } 

而且JS没有块级作用域

for(var i=0;i

  console.log(i);// 1 2 3 4 5

}

cosole.log(i);//5

i 不会因为出了 for 循环就被销毁了

这点要注意

好了  说了一点作用域方面的知识  现在回到了闭包

闭包核心的就是return 看看代码 就知道了

我的理解就是  return 返回的是inner的函数体   还有 inner所能访问的作用域!

所以 inner 在哪里都可以访问到age 

PictoGraphic
PictoGraphic

AI驱动的矢量插图库和插图生成平台

下载

例子:

function  test(){
var age=23;
var fn=out();
fn(); //21

}

test();//21

 它得到的是 21  而不是22  因为函数体和作用域一起返回了  那么最近的作用域不就是out函数作用域喽

 test 函数里面定义了age也不可能被覆盖滴  因为存在的作用域不同

 它返回了 作用域  所以它访问的都是那个作用域里面的变量 跟你的函数现在所在的作用域无关哦

 闭包其实是一种现象   就是所有人玩DNF都在刷图卖材料赚钱  这种现象叫搬砖

 总结一句话:跟你定义函数作用域有关,跟你执行函数的作用域无关

 与this相反  this 是与定义时无关,与执行时有关  比较记忆

 所以你如果不能很好的理解闭包

 那你就可以像我这样理解 就好了 

 返回的是函数本身+和函数所能访问的作用域

举一个  大家常用的  

闭包Tab栏切换



 
  
  
  
  
  
  Document
  
 
 

  
  

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

for循环 每当执行list[i].onmouseover的时候   函数都会立即执行  传入当前的变量i 

返回一个函数  这个就是形成了闭包呗  返回函数和函数能够访问到的作用域

每当触发onmouseover的时候  都会执行 返回的那个函数

然后执行代函数里面的for循环 把所有li的className 清空

在执行list[n]  这句是最重要的  这里的n 就是定义onmouseover的时候传入的i 

因为当定义的时候 函数立即执行 把 i 传递给了匿名函数 这个 i 就在 匿名函数的作用域里面了

每个onmouseover都是保存着各自的 i

所以当触发onmouseover的时候能够让li访问到之前保存在作用域中的 i

也就实现了 点谁 谁背景颜色变化的需求

相关推荐:

对js函数的实参,形参以及闭包的理解

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

178

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

79

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

72

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript 编程技巧与实战
JavaScript 编程技巧与实战

共103课时 | 11.2万人学习

前端进阶之JavaScript设计模式
前端进阶之JavaScript设计模式

共22课时 | 1.9万人学习

JavaScript函数与闭包
JavaScript函数与闭包

共32课时 | 4.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号