首页 > 其他分享 >ES6 添加 'let' 属性而不是函数闭包来解决问题

ES6 添加 'let' 属性而不是函数闭包来解决问题

时间:2022-09-23 11:59:30浏览次数:87  
标签:闭包来 ES6 函数 作用域 let var log

ES6 添加 'let' 属性而不是函数闭包来解决问题

首先,了解 ES6 的 let 关键字和 var 的区别。

let 和 var 的区别:

  1. var 没有块作用域,而 let 有块作用域。
  2. 在 JavaScript 中,只有一个函数有自己独立的作用域。

如果您在理解上有困难,这里有一个例子:

 {var a=10}  
 控制台.log(a);
  1. 网页运行时,可以直接打印。

  2. 如果你用 let 替换 var。

    {让 a=10}
    控制台.log(a);

1.控制台显示a未定义。
2.这说明let有自己独立的作用域。
3.由于有独立作用域,let可以替换函数,解决函数闭包问题。

例如:
我们使用一个 for 循环来绑定和监听 5 个按钮的事件。单击每个按钮以打印相应的编号。

 <body>  
 <button>1</button>  
 <button>2</button>  
 <button>3</button>  
 <button>4</button>  
 <button>5</button>  
 </body> <script>  
 var btn=document.getElementsByTagName("button");//获取所有按钮的列表  
 for(var i=0;i  
 btn[i].onclick=function(){console.log(i+1);}  
 }

1、这样,无论我们点击哪个控制台,都只会打印最后一个数字5。

2.之前的1234已经被覆盖,点击那个按钮打印5。

3. 说明 for 的 { } 没有块级作用域。

以前的解决方案(函数闭包)

 for(var i=0;i  
 (函数 a(i){  
 btn[i].onclick=function(){console.log(i+1);}  
 })(一世);  
 }

用一个立即函数将其包装起来,并传入 i 的值。 (不推荐)

当前的解决方案(ES6的let:var的升级版)

只需将 var 替换为 let:

 对于(让我=0;我  
 btn[i].onclick=function(){console.log(i+1);}  
 }

直接、简单、方便地解决问题( 推荐的 )。

现在学习JavaScript的同学可以养成写let的习惯,这也是var的完美版本!

恭喜,您已阅读完本文。如果觉得文章写的好,请给我一个!

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** , 和 ** 不和谐** .对增长黑客感兴趣?查看 ** 电路** .

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/38852/43072311

标签:闭包来,ES6,函数,作用域,let,var,log
From: https://www.cnblogs.com/amboke/p/16722204.html

相关文章

  • JS中的关键字,function和const,var,let有啥区别
    引言       在学习javascript的过程中,变量是无时无刻不在使用的。那么相对应的,变量声明方法也如是。变量是由自己决定,但变量声明方法是早已经定义好的。那么在使用......
  • [FLET] 01 可以拖动的方块
    fromtypingimportListimportfletfromfletimport(Container,Draggable,DragTarget,Page,Row,Text,alignment,colors,......
  • Typescript类型体操 - TupleToNestedObject
    题目中文给定一个只包含字符串类型的元组类型T和一个类型U,递归地构建一个对象.EnglishGivenatupletypeTthatonlycontainsstringtype,andatypeU,build......
  • ServletContext
     ServletContext类中有这么四个方法:getRealPath(Stringpath)getResource(Stringpath)getResourceAsStream(Stringpath)getResourcePaths(Stringpath)......
  • Bash_Completion安装及使用
    本文分享自华为云社区《有用的LinuxBash_Completion命令示例(Steroids上的Bash命令行补全)》,作者:Tiamo_T。在Linux中,在键入命令时,如果按两次TAB,它将列出所有以键......
  • Servlet
    概述web界面具有极强的交互性,使用html写的,html具有超强的表现力,可以展现出任何你想要的界面,排版或颜色都可以有很丰富的处理,而且bs架构还有一个好处,客户端无需做任何部署......
  • ES6对Function函数类型升级优化
    ES6对Function函数类型升级优化优化部分箭头函数(核心)箭头函数内的this指向的是函数定义时所在的对象,而不是函数执行时所在的对象。ES6中函数里的this总是指向函数执行......
  • letcode算法--17.字符串相乘
    给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式。注意:不能使用任何内置的BigInteger库或直接将输入转......
  • 【C++】GoogleTest入门指南
    参考:GoogleTest官网基本概念要使用GoogleTest,需要包含headergtest/gtest.h断言Assertions断言是检查条件是否为真的语句,其结果可能是成功或失败,失败分为非致命失败和......
  • 19.new和delete用于数组
    程序1://2022年9月20日22:06:27#include<iostream>#pragmawarning(disable:4996)usingnamespacestd;//1.new创建基础类型的数组voidtest01(){//申请基础......