容易被忽略的JS脚本特性_javascript技巧

一、容易被忽略的局部变量

复制代码 代码如下:

var a = 5;
(function(){
alert(a);
var a = a ++;
alert(a);
})()
alert(a);

思考这段代码的执行结果。
执行后,看看是否和你想象的一致?
ok,这段代码里核心的知识点是 var a = a++,其中两个变量 a 都是匿名函数内部的局部变量,是同一个,和全局变量 a 是不一样的。
为什么?我们来看看ECMA规范对变量声明语句的定义:

复制代码 代码如下:

Description
If the variable statement occurs inside a FunctionDeclaration, the
variables are defined with function-local scope in that function, as
described in s10.1.3. Otherwise, they are defined with global scope
(that is, they are created as members of the global object, as described
in 10.1.3) using property attributes { DontDelete }. Variables are
created when the execution scope is entered. A Block does not define a new
execution scope. Only Program and FunctionDeclaration produce a new
scope. Variables are initialised to undefined when created. A variable with
an Initialiser is assigned the value of its AssignmentExpression when the
VariableStatement is executed, not when the variable is created.

声明中提到:进入作用域环境后,变量就会被创建,并赋予初始值undefined。在变量声明语句执行时才会把赋值表达式的值指派给该变量,而并不是在该变量被创建时。
因此上面的代码可以等价于:

复制代码 代码如下:

var a;
a = 5;
(function(){
var a;
alert(a);
a = a ++;
alert(a);
})()
alert(a);

这样应该会更容易理解了。
二、容易被忽略的全局变量

复制代码 代码如下:

(function(){
var a = b = 5;
})()
alert(b);

这是玉伯几天前分享到的知识点,蛮有意义的,在此也做个分析。
首先,考虑执行结果为什么是:5。
ok,原因出在 var a = b = 5 这句。
为深入分析这个语句,我们继续要参照ECMA规范对声明语句的定义:
var a = b = 5;等同为 var a; a = b = 5;两条语句,后者是赋值表达式,其在ECMA中的定义是这样的:

复制代码 代码如下:

Simple Assignment ( = )
The production AssignmentExpression : LeftHandSideExpression =
AssignmentExpression is evaluated as follows:
1. Evaluate LeftHandSideExpression.
2. Evaluate AssignmentExpression.
3. Call GetValue(Result(2)).
4. Call PutValue(Result(1), Result(3)).
5. Return Result(3).

对于a = b = 5;先执行左边表达式 a,这是一个标识符表达式,根据规范第 10.1.4,其执行方式如下:

复制代码 代码如下:

During execution, the syntactic production PrimaryExpression : Identifier
is evaluated using the following algorithm:
1. Get the next object in the scope chain. If there isn't one, go to step 5.
2. Call the [[HasProperty]] method of Result(1), passing the Identifier as
the property.
3. If Result(2) is true, return a value of type Reference whose base
object is Result(1) and whose property name is the Identifier.
4. Go to step 1.
5. Return a value of type Reference whose base object is null and whose
property name is the Identifier.

搜寻作用域链,找到最近的一个 a 的引用,很明显,在匿名函数内部作用域就可以找到,于是变量 a 确定下来。
接着再执行右边的表达式 b = 5 ,还是一个赋值表达式,重复赋值规则第一步,因为变量 b 在匿名函数环境内未声明过,所以接着去 window 全局环境下去找 window.b ,被隐式声明为全局变量,最后赋值为 5,根据规则第五步,表达式的结果也会再赋值给 a。最终达到 a 和 b 都为 5 ,区别是 a 是局部变量,而 b 是全局变量。
我们再来理一下 (function(){var a = b = 5})() 表达式内部整体的执行顺序:
1.匿名函数内创建变量a;
2.赋予初始值undefined;
3.取得变量a的引用; //a
4.取得变量b的引用; //window.b
5.对数字5求值;
6.赋值5给b的引用:window.b;
7.返回b = 5的结果5给a的引用:a;
8.返回a = 5的结果5;
很明显,中间的一个步骤使得变量 b 被声明为全局变量,明白之后,我们不难找到代码的优化点:只需将变量 b 显式声明为局部变量:

复制代码 代码如下:

(function(){
var a,b;
a = b = 5;
})()

时间: 2024-11-02 10:20:04

容易被忽略的JS脚本特性_javascript技巧的相关文章

sso跨域写cookie的一段js脚本(推荐)_javascript技巧

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> var setcookitarray = ""; setcookitarray = "[\"http://passport.a.com/main/setCookie.do?domain=\",\"http://passport.

wap手机图片滑动切换特效无css3元素js脚本编写_javascript技巧

手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入_javascript技巧

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方

简单谈谈ES6的六个小特性_javascript技巧

前言 本文主要针对ES6做一个简要介绍,也许你还不知道ES6是什么, 实际上, 它是一种新的JavaScript规范.在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的六大特性. 过去一年ES6带来了十足的进步,下面是6个我最喜欢的JS新增特性. 一.Object[key] 有时候不能在对象变量声明时设置所有的key/value,所以得再声明之后添加key/value. let myKey = 'key3'; l

浏览器环境下JavaScript脚本加载与执行探析之defer与async特性_javascript技巧

defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异步脚本"的作用.然而,以defer为例,一些细节问题可能开发者却并不一定熟悉,比如:有了defer特性的脚本会延迟到什么时候执行:内部脚本和外部脚本是不是都能够支持defer:defer后的脚本除了会延迟执行之外,还有哪些特殊的地方等等.本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对de

Javascript 变量作用域 两个可能会被忽略的小特性_javascript技巧

也许有些高手早已知道了,但是我觉得这两个东西还是有一些价值的,所以拿到这里和大家分享一下吧. 有如下代码: 复制代码 代码如下: <script type="text/javascript" > function test() { with (location) { var temp = "an url"; } alert(temp); } test(); </script>     调用这个函数会输出什么呢? 也许会认为它会弹出undefi

JavaScript 用Node.js写Shell脚本[译]_javascript技巧

访问参数 你可以通过process.argv来访问到命令行参数,它是一个包含下列内容的数组: [ nodeBinary, script, arg0, arg1, ... ] 也就是说,第一个参数是从process.argv[2]开始的,你可以像下面这样遍历所有的参数: 复制代码 代码如下: process.argv.slice(2).forEach(function (fileName) { ... }); 如果你想对参数做更复杂的处理,可以看一下Node.js模块nomnom和optimist

常见JS验证脚本汇总_javascript技巧

本文实例讲述了常见JS验证脚本.分享给大家供大家参考,具体如下: /*-------------- 函数检索 -------------- trim函数: trim() lTrim() rTrim() 校验字符串是否为空: checkIsNotEmpty(str) 校验字符串是否为整型: checkIsInteger(str) 校验整型最小值: checkIntegerMinValue(str,val) 校验整型最大值: checkIntegerMaxValue(str,val) 校验整型是否为

js Date自定义函数 延迟脚本执行_javascript技巧

复制代码 代码如下: function delay(numberMillis){ var now = new Date(); var exitTime = now.getTime()+numberMillis; while(true){ now = new Date(); if(now.getTime() > exitTime) return; } } document.write("<script language='javascript' src='js1.js'><