新手做网站推荐,天津公司建设网站,网站界面颜色搭配,北京服装设计公司前十名一、let 命令
ES6 新增了 let 命令#xff0c;用来声明变量。相对于 var 命令#xff0c;有以下特点。
1、存在块级作用域
let 拥有块级作用域#xff0c;声明的变量仅在块级作用域内有效。
// let 存在块级作用域#xff0c;变量 a 只在当前代码块有效#xff0c;在代…一、let 命令
ES6 新增了 let 命令用来声明变量。相对于 var 命令有以下特点。
1、存在块级作用域
let 拥有块级作用域声明的变量仅在块级作用域内有效。
// let 存在块级作用域变量 a 只在当前代码块有效在代码块之外调用 a 会报错。
// var 没有块级作用域变量 b 是全局变量可以正常访问。
{let a 1var b 10
}a // ReferenceError: a is not defined.
b // 10// let 存在块级作用域变量 i 只在循环体内有效在循环体外引用会报错。
for (let i 0; i 10; i) {// ...
}console.log(i) // ReferenceError: i is not defined// var 没有块级作用域变量 i 是全局变量for 循环执行完毕后变量 i 的值为 10。
// a[n] 执行时console.log(i)里面的 i 指向的就是全局的 i。也就是说所有数组 a 的成员里面的 i指向的都是同一个 i导致运行时输出的是最后一轮的 i 的值也就是 10。
var a []
for (var i 0; i 10; i) {a[i] function () {console.log(i)}
}
a[6]() // 10// let 存在块级作用域变量 i 只在本轮循环有效
// 每一次循环的 i 都是一个新的变量所以最后输出的是 6。
var a []
for (let i 0; i 10; i) {a[i] function () {console.log(i)}
}
a[6]() // 6了解
for 循环还有一个特别之处就是设置循环变量的那部分是一个父作用域而循环体内部是一个单独的子作用域。
// 函数内部的变量 i 与循环变量 i 不在同一个作用域有各自单独的作用域
// 同一个作用域不可使用 let 重复声明同一个变量
for (let i 0; i 3; i) {let i abcconsole.log(i)
}
// abc
// abc
// abc// for 循环中 var 命令的另一种解决方式使用闭包。
// 闭包是自由变量在作用域应用的一种特殊情况自由变量在函数作用域中查找的时候是在函数定义的地方而不是函数执行的地方。
// 自由变量当前作用域未定义但使用了的变量。自由变量查找时会从当前作用域往上查找到全局作用域还未查找到的时候会报错。
var a []
for (var i 0; i 10; i) {a[i] (function (i) {return function() {console.log(i)}}(i))
}a[6]() // 62、不存在变量提升
预解析
在代码执行前将 var 和 function 提升至当前作用域最前面。分为 变量预解析变量提升和函数预解析函数提升。
变量预解析var 声明的变量在预解析的时候只是提前的声明赋值留在原地
函数预解析function 声明的函数在预解析时会提前声明且同时定义
预解析也分为全局预解析和函数预解析全局预解析发生在页面加载完成时函数预解析发生在函数执行的前一刻。
var 命令存在 “变量提升”let 命令不存在 “变量提升”
// 变量 foo 用 var 命令声明会发生变量提升即脚本开始运行时变量foo已经存在了但是没有值所以会输出undefined。
console.log(foo) // 输出undefined
var foo 2// 变量 bar 用 let 命令声明不会发生变量提升。这表示在声明它之前变量 bar 是不存在的这时如果用到它就会抛出一个错误.
console.log(bar) // 报错ReferenceError
let bar 23、暂时性死区
只要块级作用域内存在 let、const它们所声明的变量或常量就自动 “绑定” 这个区域不再受到外部作用域的影响。
// 暂时性死区 不存在变量提升。以下代码相当于给未声明变量赋值会报错。
var tmp 123if (true) {tmp abc // ReferenceErrorlet tmp
}ES6 明确规定如果区块中存在 let 和 const 命令这个区块对这些命令声明的变量从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量就会报错。
总之在代码块内使用 let 命令声明变量之前该变量都是不可用的。这在语法上称为“暂时性死区”temporal dead zone简称 TDZ。
// 在 let 命令声明变量 tmp 之前都属于变量 tmp 的“死区”
if (true) {// TDZ开始tmp abc; // ReferenceErrorconsole.log(tmp); // ReferenceErrorlet tmp // TDZ结束console.log(tmp) // undefinedtmp 123console.log(tmp) // 123
}暂时性死区的本质就是只要一进入当前作用域所要使用的变量就已经存在了但是不可获取只有等到声明变量的那一行代码出现才可以获取和使用该变量。
// 变量 x 使用 le t命令声明所以在声明之前都属于 x 的“死区”只要用到该变量就会报错。
typeof x // ReferenceError
let x// 如果一个变量根本没有被声明使用 typeof 反而不会报错。
typeof undeclared_variable // undefined在开发时养成良好的编码习惯遵守 “先声明后使用”基本不会遇到【变量提升】及【暂时性死区】问题。
4、 不允许重复声明
let 不允许在相同作用域内重复声明同一个变量。
// 报错
function func() {let a 10var a 1
}// 报错
function func() {let a 10let a 1
}因此不能在函数内部重新声明参数。
function func(arg) {let arg
}
func() // 报错function func(arg) {{let arg}
}
func() // 不报错二、const 命令
const 声明一个只读的常量。
1、基本使用
const 一旦声明常量的值就不能改变。
// 改变常量的值会报错
const PI 3.1415
PI // 3.1415PI 3 // TypeError: Assignment to constant variable.const 声明的变量不得改变值这意味着const 一旦声明变量就必须立即初始化不能留到以后赋值
const foo
// SyntaxError: Missing initializer in const declarationconst 的作用域与 let 命令相同只在声明所在的块级作用域内有效。
if (true) {const MAX 5
}MAX // Uncaught ReferenceError: MAX is not definedconst 命令声明的常量也是不提升同样存在暂时性死区只能在声明的位置后面使用。
if (true) {console.log(MAX) // ReferenceErrorconst MAX 5
}const 声明的常量也与 let 一样不可重复声明。
var message Hello!
let age 25// 以下两行都会报错
const message Goodbye!
const age 302、本质
const 实际上保证的并不是变量的值不得改动而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据数值、字符串、布尔值值就保存在变量指向的那个内存地址因此等同于常量。
但对于复合类型的数据主要是对象和数组变量指向的内存地址保存的只是一个指向实际数据的指针const 只能保证这个指针是固定的即总是指向另一个固定的地址至于它指向的数据结构是不是可变的就完全不能控制了。因此将一个对象声明为常量必须非常小心。
// 常量 foo 储存的是一个地址这个地址指向一个对象。
// 该地址不可变即不能把 foo 指向另一个地址但对象本身是可变的所以依然可以为其添加新属性。
const foo {}// 为 foo 添加一个属性可以成功
foo.prop 123
foo.prop // 123// 将 foo 指向另一个对象就会报错
foo {} // TypeError: foo is read-only// 常量 a 是一个数组这个数组本身是可变的但是如果将另一个数组赋值给 a就会报错。const a []
a.push(Hello) // 可执行
a.length 0 // 可执行
a [Dave] // 报错3、 var 和 let 、const 的区别
var 是 ES5 声明变量的方式let 和 const 是 ES6 声明变量的方式。
var 和 let 声明的是变量是可以修改的const 声明的是常量不可修改const在声明时必须赋值。
var 有全局作用域和函数作用域let 和 const有全局作用域、函数作用域和块级作用域。
var 在作用域内允许重复声明let 和 const在作用域内不允许重复声明。
var 有预解析过程let 和 const 没有预解析过程没有变量提升存在暂时性死区。
三、块级作用域
1、为什么需要块级作用域
ES5 只有全局作用域和函数作用域没有块级作用域这带来很多不合理的场景。
第一种场景内层变量可能会覆盖外层变量。
// 变量提升内层的 tmp 变量覆盖了外层的 tmp 变量
var tmp new Date()function f() {console.log(tmp)if (false) {var tmp hello world}
}f() // undefined第二种场景用来计数的循环变量泄露为全局变量。
// 变量 i 只用来控制循环但是循环结束后它并没有消失泄露成了全局变量。
var s hellofor (var i 0; i s.length; i) {console.log(s[i])
}console.log(i) // 52、ES6 的块级作用域
块级作用域除了对象 {}函数 {}函数作用域之外的一切 {} 都属于块级作用域。
let 实际上为 JavaScript 新增了块级作用域。
// 外层代码块不受内层代码块的影响。如果两次都使用 var 定义变量 n最后输出的值是 10。
function f1() {let n 5if (true) {let n 10}console.log(n) // 5
}ES6 允许块级作用域的任意嵌套。
// 五层的块级作用域每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。
{{{{{ let insane Hello World }console.log(insane) // 报错
}}}}内层作用域可以定义外层作用域的同名变量。
{{{{let insane Hello World{ let insane Hello World }
}}}};块级作用域的出现实际上使得获得广泛应用的匿名立即执行函数表达式匿名 IIFE不再必要了。
// IIFE 写法
(function () {var tmp ......
}())// 块级作用域写法
{let tmp ......
}ES6 的块级作用域必须有大括号如果没有大括号JavaScript 引擎就认为不存在块级作用域。
第一种写法没有大括号所以不存在块级作用域而let只能出现在当前作用域的顶层所以报错。第二种写法有大括号所以块级作用域成立。
函数声明也是如此严格模式下函数只能声明在当前作用域的顶层。
// 第一种写法报错
if (true) let x 1// 第二种写法不报错
if (true) {let x 1
}// 不报错
use strict
if (true) {function f() {}
}// 报错
use strict
if (true) function f() {}3、块级作用域与函数声明
函数能不能在块级作用域之中声明这是一个相当令人混淆的问题。
ES5 规定函数只能在顶层作用域和函数作用域之中声明不能在块级作用域声明。
// 情况一
if (true) {function f() {}
}// 情况二
try {function f() {}
} catch(e) {}上面两种函数声明根据 ES5 的规定都是非法的。
但是浏览器没有遵守这个规定为了兼容以前的旧代码还是支持在块级作用域之中声明函数因此上面两种情况实际都能运行不会报错。
ES6 引入了块级作用域明确允许在块级作用域之中声明函数。ES6 规定块级作用域之中函数声明语句的行为类似于 let在块级作用域之外不可引用。
function f() { console.log(I am outside!) }(function () {if (false) {// 重复声明一次函数 ffunction f() { console.log(I am inside!) }}f()
}())// ES5 环境
function f() { console.log(I am outside!) }(function () {function f() { console.log(I am inside!) }if (false) { }f() // “I am inside!”
}())上面代码在 ES5 中运行会得到 “I am inside!”因为在 if 内声明的函数 f 会被提升到函数头部。
ES6 就完全不一样了理论上会得到 “I am outside!”。因为块级作用域内声明的函数类似于let对作用域之外没有影响。但是如果你真的在 ES6 浏览器中运行一下上面的代码是会报错的这是为什么呢
// 浏览器的 ES6 环境
function f() { console.log(I am outside!) }(function () {if (false) {// 重复声明一次函数 ffunction f() { console.log(I am inside!) }}f() // Uncaught TypeError: f is not a function
}())原来如果改变了块级作用域内声明的函数的处理规则显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题ES6 在附录 B 里面规定浏览器的实现可以不遵守上面的规定有自己的行为方式。
允许在块级作用域内声明函数。函数声明类似于 var即会提升到全局作用域或函数作用域的头部。同时函数声明还会提升到所在的块级作用域的头部。
注意上面三条规则只对 ES6 的浏览器实现有效其他环境的实现不用遵守还是将块级作用域的函数声明当作 let 处理。
根据这三条规则浏览器的 ES6 环境中块级作用域内声明的函数行为类似于 var 声明的变量。 上面的例子实际运行的代码如下。
// 浏览器的 ES6 环境
function f() { console.log(I am outside!) }
(function () {var f undefinedif (false) {function f() { console.log(I am inside!) }}f()
}()) // // Uncaught TypeError: f is not a function考虑到环境导致的行为差异太大应该避免在块级作用域内声明函数。如果确实需要也应该写成函数表达式而不是函数声明语句。
// 块级作用域内部的函数声明语句建议不要使用
{let a secretfunction f() {return a}
}// 块级作用域内部优先使用函数表达式
{let a secretlet f function () {return a}
}四、顶层对象的属性
顶层对象在浏览器环境指的是 window 对象在 Node 指的是 global 对象。ES5 之中顶层对象的属性与全局变量是等价的。
// 顶层对象的属性赋值与全局变量的赋值是同一件事
window.a 1
a // 1a 2
window.a // 2顶层对象的属性与全局变量挂钩被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题首先是没法在编译时就报出变量未声明的错误只有运行时才能知道因为全局变量可能是顶层对象的属性创造的而属性的创造是动态的其次程序员很容易不知不觉地就创建了全局变量比如打字出错最后顶层对象的属性是到处可以读写的这非常不利于模块化编程。另一方面window 对象有实体含义指的是浏览器的窗口对象顶层对象是一个有实体含义的对象也是不合适的。
ES6 为了改变这一点一方面规定为了保持兼容性var 命令和 function 命令声明的全局变量依旧是顶层对象的属性另一方面规定let 命令、const 命令、class 命令声明的全局变量不属于顶层对象的属性。也就是说从 ES6 开始全局变量将逐步与顶层对象的属性脱钩。
var a 1
// 如果在 Node 的 REPL 环境可以写成 global.a
// 或者采用通用方法写成 this.a
window.a // 1let b 1
window.b // undefined上面代码中全局变量 a 由 var 命令声明所以它是顶层对象的属性全局变量 b 由 let 命令声明所以它不是顶层对象的属性返回 undefined。
