当前位置: 首页 > news >正文

分享我在学习web前端路上踩过的一些坑

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在前端开发这条路上,相信很多人在前进的过程中都有迷茫或者坎坷的时期,那么是什么支持我们走的那么远呢,相信大多数人的回答都是对前端的热爱。

前端开发真的是一个漫长、艰苦而又收获满满的。当我们回首,以前所踩过的坑,都会使我们变得更强大。

eb9231ba-010c-4ff9-8fc1-594ac5c0d0bd
 
 
 

很多人在初入前端时,都会或多或少得遇到一些小问题,有的会被html、css中布局搞得头大,有的会被js的逻辑关系缠得晕头转向,那么我们今天就来简单地谈谈js中闭包吧。

很多人对于闭包的认识就是函数里面嵌套一个函数,我们不妨把闭包理解为是将函数内部和函数外部连接起来的一座桥梁,他就是定义在函数内部的一个函数。

众所周知,js中声明的变量是有作用域的,分为全局变量和局部变量。在函数之外定义的是全局变量,函数内部可以直接读取全局变量。在函数之内定义的是局部变量,函数不能读取其他函数的局部变量。

8d0ede5b-54b6-4de9-b704-d6e3ecd6eb86
 
 
 

那么在上述代码中,因为我们的变量a是在函数fn内部定义的,所以他是一个局部变量,那么根据函数不能读取其他函数的局部变量的定义,所以我们函数fn2执行的结果是a is not defined。

那么我们怎样可以读取到函数fn内部的变量呢,这里,我们就可以使用闭包。闭包有两个最大的特点:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

所以我们在函数fn内部定义了一个函数fn1,此时就形成了一个闭包。在我们执行函数fn时,函数fn1可以获取到函数fn的内部变量,所以我们的执行结果是1。

732bfb4c-0173-487a-a04a-3dea28887913
 

不过,闭包固然好用,但是因为闭包会使得我们函数中声明的变量都保存在内存中,不被js中的垃圾机制回收(在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。),所以内存消耗会非常大,导致我们网页性能差,不过这个问题我们可以找到一些解决办法,使用闭包时,我们在退出函数之前,将不使用的局部变量全部删除;而且闭包还会在父函数外部改变父函数内部变量的值。所以我们在使用时要小心,尽量减少闭包的使用。

前端开发这条路漫长、艰辛而又收获满满,希望各位且行且珍惜。

转载于:https://my.oschina.net/u/4046848/blog/3005914

相关文章:

  • MyEclipse10安装PyDev插件
  • Python3获取新浪微博内容乱码问题
  • boost::thread类
  • 一种基于WebRTC与UDP组播的一对多远程控制桌面的实现思路
  • rational clearcase 提交活动注意
  • ELK批量删除索引
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • 华致酒行登陆A股 启幕酒业流通“铂金时代”
  • 【原创】MySQL新旧版本ORDER BY 处理方法
  • HBase笔记6 过滤器
  • Javascript Date原型方法
  • ECMASCript 2019可能会有哪些特性?
  • 625某电商网站数据库宕机故障解决实录(下)
  • JSP 开发环境搭建
  • SpringBoot三种启动方式
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • Go 语言编译器的 //go: 详解
  • javascript数组去重/查找/插入/删除
  • jquery cookie
  • k8s如何管理Pod
  • Python socket服务器端、客户端传送信息
  • Redis 懒删除(lazy free)简史
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • vue 个人积累(使用工具,组件)
  • 关于字符编码你应该知道的事情
  • 记一次和乔布斯合作最难忘的经历
  • 浏览器缓存机制分析
  • 前端js -- this指向总结。
  • 使用putty远程连接linux
  • 在weex里面使用chart图表
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • 关于Android全面屏虚拟导航栏的适配总结
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • ​虚拟化系列介绍(十)
  • #、%和$符号在OGNL表达式中经常出现
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (笔试题)合法字符串
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (十八)SpringBoot之发送QQ邮件
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)mysql使用Navicat 导出和导入数据库
  • .NET 常见的偏门问题
  • .NET程序员迈向卓越的必由之路
  • .NET国产化改造探索(一)、VMware安装银河麒麟
  • .NET开发人员必知的八个网站
  • /etc/sudoer文件配置简析
  • ::before和::after 常见的用法