通俗易懂理解ES6 - 变量声明命令及其块级作用域
栏目: JavaScript · 发布时间: 5年前
内容简介:万丈高楼平地起,欲练此功,必先打好基本功: )。ES6已经融入到了我们的日常开发当中,甚至一些ES7的特性也已经在普遍使用,但由于浏览器的支持问题,ES6的代码在大多数情况下,还是需要编译成ES5才能正常地在各浏览器上正常运行。 ES6支持6中形式的变量命名方式:在ES5里面,我们要声明一个变量,会通过三种命令方式来实现,
万丈高楼平地起,欲练此功,必先打好基本功: )。
ES6已经融入到了我们的日常开发当中,甚至一些ES7的特性也已经在普遍使用,但由于浏览器的支持问题,ES6的代码在大多数情况下,还是需要编译成ES5才能正常地在各浏览器上正常运行。
ES6支持6中形式的变量命名方式: var
、 let
、 const
、 function
、 class
、 function
,本文主要讨论的是 var
、 let
、 const
。 class
和 function
会在之后专门讨论。
变量声明
在ES5里面,我们要声明一个变量,会通过三种命令方式来实现, var
、 隐式声明
、 function
;
var a = 'test'; //var定义一个变量a,并赋值字符串'test'; b = 'test2'; //隐式声明,在堆变量b赋值字符串'test2'前,未以任何方式声明变量b,此时b为全局变量 function f() { cosole.log('haha'); } 复制代码
隐式声明声明变量是一个很不好的行为,隐式声明的变量类似于通过 var
定义一个变量,且变量的作用域直接指向window对象,这会导致变量容易被错误引用或修改
function f() { var fn = function() { (function() { b = '隐式声明的变量b'; })(); } fn(); } f(); b; //'隐式声明的变量b' window.b; //'隐式声明的变量b' 复制代码
ES6-变量声明的let和const
而在ES6中,变量声明增加了 let
和 const
两种形式,先看以下例子:
console.log(a); //无报错,输出undefined var a = 'test'; var a = 'var again'; 复制代码
通过 var
声明的变量存在变量提升一说,同一变量名在相同作用域下能重复定义,上述代码执行时会以以下情形执行:先定义一个变量var a,console.log(a),a = 'test';
console.log(son); //报错 Uncaught ReferenceError: son is not defined let son = 'James Bond'; 复制代码
let声明变量不存在变量提升,因此在son被定义前使用son的话,会报错
const name; //报错 Uncaught SyntaxError: Missing initializer in const declaration let education; //正常执行 console.log(education); //undefined const name1 = 'human'; name1 = 'cat'; //报错 Uncaught TypeError: Assignment to constant variable. 复制代码
通过 const
定义的 name
、 obj
是一个常量,在声明时必须对其进行赋值,且赋值后不能进行二次赋值,而 let
声明的变量在声明时可不赋值,后面再赋值,此时默认值为 undefined
。
const obj = {}; obj; //{} obj.a = '1'; obj; //{a:1} 复制代码
const
定义的 obj
在常量中存储的是obj对象在 栈
里指向 堆
的地址,该指向地址不可改变,而在 堆
地址里面存放的数据不被约束,是可变的。若希望禁止变更obj及其内部属性,Object提供了freeze方法,如下函数能更好的递归冻结Object对象
const freezeObj = (obj) => { Object.freeze(obj); Object.keys(obj).forEach((item) => { if(type of(item) === 'object') freezeObj(item); }); } 复制代码
let fruit = 'orange'; var fruit = 'apple'; //报错 Uncaught SyntaxError: Identifier 'fruit' has already been declared 复制代码
通过let定义的变量在同一作用域下不允许被重复定义,否则会报错,const也是如此
var test = 'test', test1 = 'test1'; { test = 'new test'; //Uncaught ReferenceError: test is not defined test1 = 'new test1'; //Uncaught ReferenceError: test1 is not defined let test; const test1 = 'new test1'; } 复制代码
通过let、const声明的变量会存在 暂时性死区 ,即:在声明该变量的作用域内,变量已经被绑定在该作用域之中,忽略外界存在的同名变量,在该作用域下,该变量在变量声明之前都不能被使用。
变量声明结论
var:
- 存在变量提升,可重复多次声明同名变量。
let:
- 不存在变量提升,必须先定义再使用,否则报错;
- 同一作用域下不可重复定义同名变量,否则报错;
- 在代码块内,通过let声明的变量,尽管代码块外层有同名变量,代码块内部在该变量声明前都不能使用该变量,否则报错。
const:
=
let
和 const
的出现,很好地把ES5中 var
定义变量的Bug给埋了,解决了定义同名变量导致变量间相互污染的问题,保证了同一块级作用域下,变量名的唯一性。同时 const
定义常量能更直观地明白常量的意义及其不可修改性。
块级作用域
ES6新增的变量声明命令存在块级作用域
什么是块级作用域?
{ var a = 'test'; let b = 'test1'; } console.log(a); //test console.log(b); //Uncaught ReferenceError: b is not defined 复制代码
这便是块级作用域最基本的示例,通过 let
、 const
声明的变量仅能在其代码块内被使用,该代码块内部即是一个块级作用域
块级作用域有什么用?
var a = 'test'; function f(){ console.log(a); if(true) { var a = 'test1'; } console.log(a); } f(); //undefinded test1 复制代码
这个例子输出的结果是 undefined
,原因在于,在 f()
中,不论 if
语句判断是否通过, if
内部的 var a
都被变量提升,且变量a均通过var命令声明,内部变量a覆盖了外部变量a;
换个写法再来一遍
let a = 'test'; function f(){ console.log(a); if(true) { let a = 'test1'; } console.log(a); } f(); //test test 复制代码
比对一下两段代码的执行情况: 看看该代码的实际执行情况:
var a let a a = 'test' a = 'test' function f function f f() = {} f() = {} f() f() var a console.log(a); console.log(a) if(true) if(true) let a //此处的a是另一个a,可以理解为_a,且_a的作用范围仅在if语句内 a = 'test1' a = 'test1'; //类似于_a = 'test1' console.log(a) console.log(a) //类似于console.log(_a) 复制代码
从上面的比对可以看出,通过let声明的变量a,不会被变量提升,且具有块级作用域,不会影响到上层作用域的a变量
再来一个示例:
for(var i=0;i<10;i++){ console.log('for里面的i:'+i); // 1、2、3......10 } console.log(i); //10 复制代码
这里定义的循环计数变量i,原本只是想在循环内使用,但由于使用了 var
声明,因此不存在块级作用域,导致 for
循环外也能获取到了i的值。
ES6中规定,函数本身的作用域在其所在的块级作用域当中。
function fn() { console.log('outside console'); } (function() { if(false) { function fn() { console.log('inside console'); } } fn(); }()); 复制代码
上述代码中, fn()
执行结果会报错 fn is not a function
,因为在fn执行的环境中存在function fn的声明,声明被提前,导致fn被提前定义,但没有被赋值为function。
ES6的函数自执行代码得到精简。
//从 (function() { console.log('test'); })(); //变为 { console.log('test'); } 复制代码
块级作用域结论
通过使用 let
const
,让变量存在了块级作用域,很好地划分变量间的作用范围,避免了以往同名变量相互污染问题;外层变量无法直接读取内层变量,对内层变量具有更好的保密性,内外层代码独立执行,相互间不影响;精简了函数自执行代码
以上。
文章观点内容如有错误欢迎指出交流,相互进步
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Head First WordPress
Siarto Jeff / O'Reilly Media / 2010-02-15 / USD 34.99
Whether you're promoting your business or writing about your travel adventures, "Head First WordPress" will teach you not only how to make your blog look unique and attention-grabbing, but also how to......一起来看看 《Head First WordPress》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
RGB CMYK 转换工具
RGB CMYK 互转工具