博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过分析这段代码的进化历程,或许能够加深您对JavaScript的作用域的理解
阅读量:6434 次
发布时间:2019-06-23

本文共 1408 字,大约阅读时间需要 4 分钟。

前言

这里我们不讨论作用域链的问题,这些问题您可以看下我之前写的东西,。

这回我们主要来分享一下,JavaScript中作用域的创建方式。

代码

通过理解代码来记住知识点是最快的,面试官问道类似的问题的时候,举个代码的例子就大家都懂了,胜过任何含糊的概念描述,所以我们来看一下这个代码的例子吧。

rank-01

请思考输出结果,for循环的{}能创建一个作用域吗?

for (var i = 0; i < 2; i++) {    console.log("in for:"+i);}console.log("out for:"+i);

rank-02

请思考代码运行结果,function应该能创建作用域吧?

function forscope(){    for (var i = 0; i < 2; i++) {        console.log("in for:"+i);    }};forscope();console.log("out for:"+i);

rank-03

为什么这样写会更好呢?

(function(){    for (var i = 0; i < 2; i++) {        console.log("in for:"+i);    }})();console.log("out for:"+i);

rank-04-a

老外说,这样子写才是最佳实践,您看出来门道了吗?

(function forscope(){    for (var i = 0; i < 2; i++) {        console.log("in for:"+i);    }})();console.log("out for:"+i);

rank-04-b

这样写太鬼了吧?

try{    undefined();}catch(i){    for (i = 0; i < 2; i++) {        console.log("in for:"+i);    }}console.log("out for:"+i);

rank-es6-01

现在能体会到es6中let存在的意义了吧?

for (let i = 0; i < 2; i++) {    console.log("in for:"+i);}console.log("out for:"+i);

rank-es6-02

据说这才是最佳实践!

{    let i;    for (i = 0; i < 2; i++) {        console.log("in for:"+i);    }}console.log("out for:"+i);

总结

  1. function,try catch均可以创建作用域,可以使用它们来更好地保护代码细节,一般还是用function,try catch一般是代码转换器会用的。

  2. 立即执行函数(function(){...})();是个不错的选择,但具名的立即执行函数可以让代码本身更具有可读性,是个最佳实践(function forscope(){...})();。

  3. es6中let可以隐式地和最近的{}一起创建一个作用域,但显示地创建能够方便之后代码块的移动,是个最佳实践。

其他

参考书

  1. 《你不知道的JavaScript(上卷)》第一部分,亚马逊电子书9.9元,强力推荐

网站

转载地址:http://lqhga.baihongyu.com/

你可能感兴趣的文章
浅说《测试用例》----给测试新手的
查看>>
GridView实战二:使用ObjectDataSource数据源控件(自定义缓存机制实现Sort)
查看>>
网站安装打包 软件环境检测与安装[二] 下
查看>>
WWDC 2013 Session笔记 - iOS7中的多任务
查看>>
android被逼学习布局管理器
查看>>
深蓝词库转换1.2版本发布——支持紫光拼音和拼音加加
查看>>
深入理解Java内存模型(三)——顺序一致性
查看>>
【机房重构】一步一步往上爬——不仅仅是三层
查看>>
固定UILabel宽度分行显示
查看>>
(三十)java多线程一
查看>>
【原】a.class与a .class的区别
查看>>
android 减少图片出现oom错误
查看>>
Linux_CentOS-服务器搭建 <六>
查看>>
[bmgr]android应用数据备份以及还原
查看>>
【转载】JAVA内存模型和线程安全
查看>>
ACM学习<二>
查看>>
【SICP练习】57 练习2.27
查看>>
世界那么大,你要去看看!
查看>>
从头开始敲代码之《从BaseApplication/Activity开始(五)》(自定义控件,实现点击/滑动翻页)...
查看>>
【Android开发】消息处理类(Handler)与消息类(Message)介绍
查看>>