浅谈 js 语句块与标签

原文:浅谈 js 语句块与标签

语句块是什么?
其实就是用 {}
包裹的一些js代码而已,当然语句块不能独立作用域。
可以详细参见这里《MDN block

也许很多人第一印象 {} 不是对象字面量么?怎么成了语句块了?
如果在赋值语句或者表达式里用的时候,确实是对象字面量,如:

var a = {};
({toString:function(){return "hehe"}}) + "...";


是不是很有意思。。
但是直接使用如:

{toString: function(){return "hehe"}}

却不能正常执行

其实这里的 {} 只是起到语句块的作用,而不是对象字面量。
怎么回事呢,明明就是对象啊。。
其实这里要说到标签了。

我简单描述下标签是什么,如果想详细了解,请移步 《MSN label

我是标签: var a = 1;


一切正常,从
MSN label 里可以看到,标签往往是结合  continue,
break
 一起使用的。
知道标签是什么了,就可以回到刚才的问题上了。
 {toString:
function(){return
"hehe"}} 其实就是

{ // 语句块
标签: function(){return "hehe"}
}

由于  function(){return
"hehe"}  既不是函数声明,也不是函数表达式,所以就报错了。
我们只要简单修改下,修改成函数声明或者函数表达式即可。

{ // 语句块
标签1: function test1(){return "hehe"};
标签2: var test2 = function(){return "hehe"};
}

可以看到一切正常,这个就是语句块和标签
它可以构成非常像对象字面量的语句,但其实它仍然是 语句块 + 标签 而已。

还记不记得你用 eval 解析 json 的时候,不加 ()
就报错么。
其实现在非常容易解释了,因为当直接执行 {} 的时候,只把内部代码当作语句块执行,而不是对象字面量。
加上 ()
就是让它当作表达式执行,所以才能正常解析成对象字面量。
这也是上面这个  ({toString:function(){return
"hehe"}}) + "...";  必须加
() 的原因。

其实你完全可以这样写你的代码:


程序猿A写的功能块: {
// 功能块代码...
}

程序猿B写的功能块: {
// 功能块代码...
}

这样是不是很清晰?

但是不推荐这样写,因为语句块起不到独立作用域的功能,所以很容易全局污染。
依然推荐

(function () {
// 功能块代码...
})();

自调用函数,不仅可以独立作用域,还可以在 UglifyJS,Closure Compressor 等工具编译的时候更加优化。

好了,我们来个小小的测试吧。
1. 执行  a: b: c: d: e: 1, 2, 3, 4, 5  结果是什么? 为什么? 那
 a:{b:{c:1}}  呢?

2. 执行  1 + {valueOf:function(){return 1}}  结果是什么?
为什么?

好了,今天的分享就这些了,如有不对之处,请跟帖指出,小生先谢过了。

浅谈 js 语句块与标签,布布扣,bubuko.com

时间: 2024-10-05 23:47:46

浅谈 js 语句块与标签的相关文章

浅谈 js 下 with 对性能的影响

这几天多次看到有博主们在写 with 的文章,这货确实非常方便,但是却是个性能杀手,所以一直都是上不得台面的.那么他究竟会让效率低下到什么程度呢?先来看下 with 是如何的便捷吧.. // 正常调用 console.log(location.host); console.log(location.pathname); // 在 with 下 with (location) { console.log(host); console.log(pathname); } 如果不影响性能,确实是非常霸气

浅谈js中的this关键字

浅谈js中的this关键字 全局作用域中的this 函数作用域中的this 不同函数调用方法下的this 直接调用 作为对象的方法调用 作为构造函数调用 通过call或apply方法调用 嵌套函数作用域中的this 浅谈js中的this关键字 this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示,权当交流之用. 全局作用域中的this 本文将以作用域由

浅谈 js eval作用域

就简单聊下如何全局 eval 一个代码. var x = 1; (function () { eval('var x = 123;'); })(); console.log(x); 这个代码得到的是 1 而不是 123如果想让 eval 执行的代码是全局的,那么有几种方法. var x = 1; (function () { window.eval('var x = 123;'); })(); console.log(x); 这个方法标准浏览器都可以得到 123 而IE6-8则依然是 1 相同的

浅谈 js 正则之 test 方法

原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. ? 1 2 3 4 5 var re = /\d/; console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1"

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH

浅谈 js 数字格式类型

原文:浅谈 js 数字格式类型 很多人也许只知道 123,123.456,0xff 之类的数字格式.其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有人说这是什么个格式?其实还不止呢.1          //11.2       //1.21.2e3    //12001.2e+3  //12001.2e-3  //0.0012.12e+2 //12-.12e-2 //-0.0012 当然这些只是十进制.我们来说说 八进制 和 十六进制.0x00

浅谈 js 字符串 trim 方法之正则篇

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

从window.console&&console.log(123)浅谈JS的且运算逻辑(&&)

从window.console&&console.log(123)浅谈JS的且运算逻辑(&&) 作者:www.cnblogs.com  来源:www.cnblogs.com  发布日期:2015-03-01 一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三个知识点第一:短路原则这个大家都非常清楚的了,在做且运算的时候,“同真

浅谈 js 对象 toJSON 方法

前些天在<浅谈 JSON.stringify 方法>说了他的正确使用姿势,今天来说下 toJSON 方法吧.其实我觉得这货跟 toString 一个道理,他是给 stringify 方法字符串化的时候调用的.看下 MDN 官方文档吧<toJSON behavior>.非常简单,但是要注意的是他和 stringify 方法第二个参数稍微有点不同.因为 stringify 第二个参数是回调函数时,只是对当前 key 对应的值进行修改.而 toJSON 则是对当前对象进行修改.例如: v