• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > ES6学习(1)块级作用域与函数作用域

ES6学习(1)块级作用域与函数作用域

作者:aboyl 字体:[增加 减小] 来源:互联网 时间:2018-01-07

aboyl通过本文主要向大家介绍了ES6,let等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

并没有使用let跟const来作为他的标题。

因为实际上来说let跟const所做的事情就是创建块级作用域。

为什么这样认为呢?

因为let的一个变量影响的并不是这个一个变量,而是整个作用域,实际上是对整个作用域进行了改造。

而在es6之前,其实js是只有函数作用域的,也就是说一个函数创建一个作用域而不是一个{}创建一个作用域,这个的结果就是会导致一些结果

内层变量会覆盖外层变量

用来计数的循环变量会泄漏为全局变量

其本质的原因就是因为{}不会创建单独的作用域,所以{}里外其实是一个层级。

而块级作用域就是

一个{}就是一个独立的作用域

不会有变量提升

不会挂载在window对象上

这个几个特点,而块级作用域的创建,就是通过let跟const来进行创建

这样我们就可以去理解一些东西了。

比如

console.log(a)

var a=10;

这个是正确的

而把var a=10改成 let a=10;

之后,因为形成了块级作用域,所以导致报错,这个也就是 暂时性死区

其原因是因为块级作用域没有变量提升。

也就是说,不能在声明前对let变量进行操作

这个规定主要是为了减少运行时的错误,防止变量声明钱就被使用。总之,暂时性死区的本质就是,只要一进入当前作用域,索要使用的变量就已经存在,但是不可以被获取,只有当声明变量的哪一行代码出现,才可以获取和使用该变量。

一个很典型的使用块级作用域的例子就是循环赋值函数

var a=[]

for var i=0 i<length i++

a[i]=func clg i

最后每个a[i]()其实都是clg length-1

这个的原因在于

i其实是挂载在window上面的

如果我们写一个函数

function(){clg i}

会怎么样呢?

最后肯定是clg window.i

如果在全局下的话,也就是说clg i的本质是clg window.i,或者说是 clg this.i this为window

也就是说每个a[i]的函数都是 clg window.i

 

 

 

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解webpack es6 to es5支持配置
  • ES6下React组件的写法示例代码
  • ES6中参数的默认值语法介绍
  • ES6学习教程之对象的扩展详解
  • Javascript ES6中数据类型Symbol的使用详解
  • 详解webpack 配合babel 将es6转成es5 超简单实例
  • ES5 ES6中Array对象去除重复项的方法总结
  • JS ES6中setTimeout函数的执行上下文示例
  • JS ES6多行字符串与连接字符串的表示方法
  • JS实现禁止高频率连续点击的方法【基于ES6语法】

相关文章

  • 2017-05-11基于JavaScript实现屏幕滚动效果
  • 2017-05-11vue数据双向绑定原理解析(get & set)
  • 2017-05-11windows下vue-cli及webpack搭建安装环境
  • 2017-12-31使用WebGL + Three.js制作动画场景
  • 2017-05-11理解javascript中的Function.prototype.bind的方法
  • 2017-05-11jQuery Masonry瀑布流插件使用方法详解
  • 2017-05-11jQuery自定义图片上传插件实例代码
  • 2017-05-11ionic2 tabs 图标自定义实例
  • 2017-05-11jquery实现自定义图片裁剪功能【推荐】
  • 2017-05-11webpack入门+react环境配置

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • setTimeout函数的神奇使用
    • js 操作json
    • 老生常谈jquery id选择器和class选择器的区别
    • Move.js入门
    • JS中如何实现Laravel的route函数详解
    • JavaScript实现的鼠标响应颜色渐变效果完整实例
    • javascript 使用正则test( )第一次是 true,第二次是false
    • javascript实现右下角广告框效果
    • Bootstrap页面标题Page Header的实现方法
    • 详解vue组件化开发-vuex状态管理库

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有