浅谈 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}}  结果是什么? 为什么?

 

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

时间: 2024-08-02 11:24:36

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

浅谈JS读取DOM对象(标签)的自定义属性_javascript技巧

DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

浅谈js控制li标签排序问题 js调用php函数的方法_javascript技巧

[Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&

浅谈js在html中的加载执行顺序,多个jquery ready执行顺序_javascript技巧

jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

浅谈JS DDoS攻击原理与防御

浅谈JS DDoS攻击原理与防御 分布式拒绝服务攻击(DDoS)攻击是一种针对网站发起的最古老最普遍的攻击.Nick Sullivan是网站加速和安全服务提供商CloudFlare的一名系统工程师.近日,他撰文介绍了攻击者如何利用恶意网站.服务器劫持和中间人攻击发起DDoS攻击,并说明了如何使用HTTPS以及即将到来的名为"子资源一致性(Subresource Integrity,简称SRI)"的Web新技术保护网站免受攻击. 现代网站的大部分交互都来自于JavaScript.网站通过

浅谈js文件引用方式及其同步执行与异步执行_java

任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的与加载不同 ) html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的 html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的 html文件中的<script>标签src

浅谈JS原生Ajax,GET和POST_javascript技巧

javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else

浅谈JS中逗号运算符的用法_javascript技巧

注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:

浅谈js函数的多种定义方法与区别_javascript技巧

定义一个函数一般有如下三种方式: 1.函数关键字(function)语句: function fnMethodName(x){ alert(x); } 2.函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} 3.Function()构造函数: var fnMethodName = new Function('x', 'alert(x);') 上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常

浅谈JS运算符&amp;&amp;和|| 及其优先级_javascript技巧

今天看了一段YUI compressor压缩的js代码: userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on"));