深入理解es6块级作用域的使用(2)

你可能预期想的是打印从0到5之间,即0,1,2,3,4的数字,但实际上答案并不是如此。由于函数有自己的作用域,因此在向数组中添加函数的时候,实际上循环已经运行完成,因此每次打印变量i的值都相当于是在全局中访问变量i的值,即i = 5这个值,因此实际上答案最终会返回5次5.

在es5中,我们可以使用函数表达式(IIFE)来解决这个问题,因为函数表达式会创建一个自己的块级作用域。如下:

var func = []; for(var i = 0;i < 5;i++){ (function(i){ func.push(function(){ console.log(i); }) })(i) } func.forEach(function(func){ func();//这就是你想要的答案,输出0,1,2,3,4 });

但事实上有了es6的let声明,我们不必如此麻烦,只需要将var变成let声明就可以了,如下:

var func = []; for(let i = 0;i < 5;i++){ func.push(function(){ console.log(i); }) } func.forEach(function(func){ func();//输出0,1,2,3,4 })

但是这里不能使用const声明,因为前面提到过,const声明并初始化了一个常量之后是不能被修改的,只能在对象中被修改值。如以下示例就会报错:

//在执行循环i++条件的时候就会报错 for(const i = 0;i < len;i++){ console.log(i); }

因为i++这个语句就是在尝试修改常量i的值,因此不能将const声明用在for循环中,但可以将const声明用在for-in或者for-of循环中。如下:

var func = []; var obj = { name:'eveningwater', age:22 } for(let key in obj){ func.push(function(){ console.log(key) }) } func.forEach(function(func){ func();//name,age }); //以下也没问题 var func = []; var obj = { name:'eveningwater', age:22 } for(const key in obj){ func.push(function(){ console.log(key) }) } func.forEach(function(func){ func();//name,age });

这里并没有修改key的值,因此使用const和let声明都可以,同理for-of循环也是一样的道理。for-of循环是es6的新增的循坏。。

7.全局作用域绑定

let,const声明与var声明还有一个区别就是三者在全局作用域中的行为。当使用var声明一个变量时,会在全局作用域(通常情况下是浏览器window对象)中创建一个全局属性,这也就意味着可能会覆盖window对象中已经存在的一个全局变量。如下例:

console.log(window.Array);//应该返回创建数组的构造函数,即f Array(){} var Array = '这是数组'; console.log(window.Array);//返回'这是数组';

从上例,我们可以知道即使全局作用域中已经定义了Array变量或者已经存在了Array属性,但我们之后定义的Array变量则会覆盖之前已经定义好的或者已经存在的Array变量(属性)。

但是es6的let和const声明则不会出现这种情况,let和const声明会创建一个新的绑定,也就是说不会成为window对象的属性。换句话说,就是所声明的变量不会覆盖全局变量,而只会遮蔽它。如下例:

let Array = '这是数组'; console.log(Array);//'这是数组‘; console.log(window.Array);//应该返回创建数组的构造函数,即f Array(){}

这也就是说window.Array !== Array这个等式返回布尔值true。

8.块级绑定的最佳实践

在使用es6块级声明变量中,最佳实践是如果确定后续不会改变这个变量的值,用const声明,如果确定要改变这个变量的值,则用let声明。因为预料外的变量值的改变时很多bug出现的源头。如下示例:

function eveningWater(){}; eveningWater.prototype.name = 'eveningwater'; let ew = new eveningWater(); //定义不能被修改的变量,也就是用于判断实例类型的属性 const _constructor = ew.constructor; //可以改变自定义的名字属性 let name = ew.name; if(_constructor === eveningWater || _constuctor === Object){ console.log(_constructor); }else{ name = 'loho'; console.log(name) }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4a2f6a7ef2bbcbbdc5c0c18db2eb73cf.html