问题的提出

首先看一个例子:

javascript sh_sourceCode">var name = 'laruence';
function echo() {
	alert(name);
	var name = 'eve';
	alert(name);
	alert(age);
}

echo();

运行结果是什么呢?

上面的问题, 我相信会有很多人会认为是:

laruence
eve
[脚本出错]

因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’. 而age属性没有定义, 所以脚本会出错.

但其实, 运行结果应该是:

undefined
eve
[脚本出错]

为什么呢?

JavaScript的作用域链

首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理: JS权威指南中有一句很精辟的描述:　”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”

为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:”一切皆是对象, 函数也是”.

在JS中，作用域的概念和其他语言差不多， 在每次调用一个函数的时候 ，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域.

JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈”方式，而是使用列表，具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

看个例子:

	var func = function(lps, rps){
		var name = 'laruence';
		........
	}
	func();

在执行func的定义语句的时候, 会创建一个这个函数对象的[[scope]]属性(内部属性,只有JS引擎可以访问, 但FireFox的几个引擎(SpiderMonkey和Rhino)提供了私有属性__parent__来访问它), 并将这个[[scope]]属性, 链接到定义它的作用域链上(后面会详细介绍), 此时因为func定义在全局环境, 所以此时的[[scope]]只是指向全局活动对象window active object.

在调用func的时候, 会创建一个活动对象(假设为aObj, 由JS引擎预编译时刻创建, 后面会介绍)，并创建arguments属性, 然后会给这个对象添加俩个命名属性aObj.lps, aObj.rps; 对于每一个在这个函数中申明的局部变量和函数定义, 都作为该活动对象的同名命名属性.

然后将调用参数赋值给形参数，对于缺少的调用参数，赋值为undefined。

然后将这个活动对象做为scope chain的最前端, 并将func的[[scope]]属性所指向的,定义func时候的顶级活动对象, 加入到scope china.

有了上面的作用域链, 在发生标识符解析的时候, 就会逆向查询当前scope chain列表的每一个活动对象的属性，如果找到同名的就返回。找不到，那就是这个标识符没有被定义。

注意到, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:

	var name = 'laruence';
	function echo() {
		alert(name);
	}

	function env() {
		var name = 'eve';
		echo();
	}

	env();

运行结果是:

laruence

结合上面的知识, 我们来看看下面这个例子:

function factory() {
	var name = 'laruence';
	var intro = function(){
		alert('I am ' + name);
	}
	return intro;
}

function app(para){
	var name = para;
	var func = factory();
	func();
}

app('eve');

当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’eve’的属性para;

此时的scope chain如下:

[[scope chain]] = [
{
	para : 'eve',
	name : undefined,
	func : undefined,
	arguments : []
}, {
	window call object
}
]

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

[[scope chain]] = [
{
	name : undefined,
	intor : undefined
}, {
	window call object
}
]

注意到, 此时的作用域链中, 并不包含app的活动对象.

在定义intro函数的时候, intro函数的[[scope]]为:

[[scope chain]] = [
{
	name : 'laruence',
	intor : undefined
}, {
	window call object
}
]

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

[[scope chain]] = [
{
	intro call object
}, {
	name : 'laruence',
	intor : undefined
}, {
	window call object
}
]

因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是’laruence’.

所以运行结果是:

I am laruence

现在, 大家对”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”这句话, 应该有了个全面的认识了吧?

Javascript的预编译

我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?

首先, 我们来看一个例子:

	<script>
	alert(typeof eve); //function
		function eve() {
			alert('I am Laruence');
		};
	</script>

诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?

恩, 对, 在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义, 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.

而对于函数的定义,是一个要注意的地方:

<script>
	alert(typeof eve); //结果:function
	alert(typeof walle); //结果:undefined
	function eve() { //函数定义式
		alert('I am Laruence');
	};
	var walle = function() { //函数表达式
	}
	alert(typeof walle); //结果:function
</script>

这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算.

说到这里, 顺便说一个问题 :

	var name = 'laruence';
	age = 26;

我们都知道不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:

在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性.

也就是说, age会被定义在顶级作用域中.

现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:

<script>
	alert(typeof eve); //结果:undefined
</script>
<script>
	function eve() {
		alert('I am Laruence');
	}
</script>

明白了么? 也就是JS的预编译是以段为处理单元的…

揭开谜底

现在让我们回到我们的第一个问题:

当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:

[callObj] = {
name : undefined
}

当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性, 完全的遮挡了全局活动对象中的name属性.

现在你明白了吧?

上面的方法，对于简单页面，是够用的。但是对于稍微复杂的页面，IE的另存为经常不保真，如果页面中涉及Ajax等bugs，保存到本地更是难以调试。这时有个很自然的做法是， 将开发环境Run起来，当时怎么开发的，现在就怎么调试 。这样做肯定能解决问题，但要调动很多资源，后台开发工程师、前台开发工程师等等都要参与。对于小团队来说，也许是可行的，对于大团队来说，如此大动干戈，除非到了最后，是不会这样做的。那我们应该怎么做呢？先来看一个工具：

Web开发中有个大名鼎鼎的工具：Fiddler. Fiddler是一个http调试代理，它能够记录你电脑和互联网之间的所有http通讯。Fiddler可以让你检查所有的http通讯，设置断点，以 及Fiddle（Fiddle的英文意思是胡乱修改，很幽默的表达Fiddler的用途）所有“进出”的数据（指cookie,html,js,css等 数据）。

嘿嘿，是否从上面的介绍中嗅探到了某种解决方案？ Fiddler可以让我们Fiddle所有”进出“的数据！ 我 们要调试线上页面的bugs时，可以先分析是什么文件引起的，找出这些嫌疑文件，下载到本地，然后利用Fiddler将线上的请求Fiddle到本地的对 应文件。这样我们就可以随心所欲的修改这些嫌疑文件了，直接刷新线上的页面就可以看到效果，烦人的环境问题根本就不用考虑，而且一切都是高保真的。

上面说的是思路，下面我会举个例子来说明。

举例子之前，请先安装Fiddler（怎么下载安装就不多了，一路Next）。安装好后，在IE的工具条上会出现Fiddler2图标，点击启动 Fiddler. 启动后，通过IE访问任何网站时，所有http进出数据都会在Fiddler上显示出来。但是等等，怎么老说IE呢？虽然在IE上能通过IE Developer Toolbar和Companion.JS来调试CSS和JS，但被firebug宠坏了的我们，总期望着Firefox上能搞定的问题绝不通过IE去调 试。为了我们的美好期望，根据Fiddler的官方说明，我们只要简单的进行以下操作即可：

首先，找到BrowserPAC.js这个文件，默认放在

• c:Documents and SettingsYour NameMy DocumentsFiddler2ScriptsBrowserPAC.js

Vista下在User的对等目录里。

接着，打开亲爱的Firefox3，Tools - Options - Advanced - Network:

点击Settings…:

选中自动代理配置URL，将BrowserPAC.js的绝对路径复制过去，确定。如果想让Fiddler监听其他浏览器，同上设置即可。

至此准备工作完毕，我们进入正题（才进入正题？各位看官稍安毋躁，喝杯茶，养养神，再接着往下看）。

在我的淘宝 - 已卖出的宝贝页面，有个修改价格的功能：

前些天发现一个bug，当点击修改价格按钮之后，主页面上的价格没有更新。

初步分析后，觉得以下js文件有问题：

• http://assets.taobaocdn.com/js/app/trade/trade.js
• http://assets.taobaocdn.com/js/app/trade/trade_business.js

因为涉及Ajax调用，保存为HTML本地调试不了。这时想起Fiddler，问题迎刃而解。

首先将上面两个文件下载到本地，启动Fiddler，在AutoResponder栏添加替换规则：

如上图添加两条规则后，在Firefox中刷新页面，上面两个js文件就从本地获取了，嘿嘿。接下来，用喜欢的文本编辑器加Firebug尽情的调 试吧，就像当初开发时一样。等把bugs解决了，压缩并上传相应的js文件，并通知后台开发者修改vm中js文件的时间戳，然后等着发布就行。

CSS也是一样的调试，不赘述。在IE、Safari、Opera中的的使用方法类似，不多说。

arguments: A JavaScript Oddity

by Andrew Tetlaw

arguments is the name of a local, array-like object available inside every function. It’s quirky, often ignored, but the source of much programming wizardry; all the major JavaScript libraries tap into the power of the arguments object. It’s something every JavaScript programmer should become familiar with.

Inside any function you can access it through the variable: arguments, and it contains an array of all the arguments that were supplied to the function when it was called. It’s not actually a JavaScript array; typeof arguments will return the value: "object". You can access the individual argument values through an array index, and it has a length property like other arrays, but it doesn’t have the standard Array methods like push and pop.

Create Flexible Functions

Even though it may appear limited, arguments is a very useful object. For example, you can make functions that accept a variable number of arguments. The format function, found in the base2 library by Dean Edwards, demonstrates this flexibility:

function format(string) {
var args = arguments;
var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
return String(string).replace(pattern, function(match, index) {
return args[index];
});
};

You supply a template string, in which you add place-holders for values using %1 to %9, and then supply up to 9 other arguments which represent the strings to insert. For example:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

The above code will return the string "And the papers want to know whose shirt you wear".

One thing you may have noticed is that, in the function definition for format, we only specified one argument: string. JavaScript allows us to pass any number of arguments to a function, regardless of the function definition, and the arguments object has access to all of them.

Convert it to a Real Array

Even though arguments is not an actual JavaScript array we can easily convert it to one by using the standard Array method, slice, like this:

var args = Array.prototype.slice.call(arguments);

The variable args will now contain a proper JavaScript Array object containing all the values from the arguments object.

Create Functions with Preset Arguments

The arguments object allows us to perform all sorts of JavaScript tricks. Here is the definition for the makeFunc function. This function allows you to supply a function reference and any number of arguments for that function. It will return an anonymous function that calls the function you specified, and supplies the preset arguments together with any new arguments supplied when the anonymous function is called:

function makeFunc() {
var args = Array.prototype.slice.call(arguments);
var func = args.shift();
return function() {
return func.apply(null, args.concat(Array.prototype.slice.call(arguments)));
};
}

The first argument supplied to makeFunc is considered to be a reference to the function you wish to call (yes, there’s no error checking in this simple example) and it’s removed from the arguments array. makeFunc then returns an anonymous function that uses the apply method of the Function object to call the function specified.

The first argument for apply refers to the scope the function will be called in; basically what the keyword this will refer to inside the function being called. That’s a little advanced for now, so we just keep it null. The second argument is an array of values that will be converted into the arguments object for the function. makeFunc concatenates the original array of values onto the array of arguments supplied to the anonymous function and supplies this to the called function.

Lets say there was a message you needed to output where the template was always the same. To save you from always having to quote the template every time you called the format function you could use the makeFunc utility function to return a function that will call format for you and fill in the template argument automatically:

var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");

You can call the majorTom function repeatedly like this:

majorTom("stepping through the door");
majorTom("floating in a most peculiar way");

Each time you call the majorTom function it calls the format function with the first argument, the template, already filled in. The above calls return:

"This is Major Tom to ground control. I'm stepping through the door."
"This is Major Tom to ground control. I'm floating in a most peculiar way."

Create Self-referencing Functions

You may think that’s pretty cool, but wait, arguments has one more surprise; it has another useful property: callee. arguments.callee contains a reference to the function that created the arguments object. How can we use such a thing? arguments.callee is a handy way an anonymous function can refer to itself.

repeat is a function that takes a function reference, and 2 numbers. The first number is how many times to call the function and the second represents the delay, in milliseconds, between each call. Here’s the definition for repeat:

function repeat(fn, times, delay) {
return function() {
if(times-- > 0) {
fn.apply(null, arguments);
var args = Array.prototype.slice.call(arguments);
var self = arguments.callee;
setTimeout(function(){self.apply(null,args)}, delay);
}
};
}

repeat uses arguments.callee to get a reference, in the variable self, to the anonymous function that runs the originally supplied function. This way the anonymous function can call itself again after a delay using the standard setTimeout function.

So, I have this, admittedly simplistic, function in my application that takes a string and pops-up an alert box containing that string:

function comms(s) {
alert(s);
}

However, I want to create a special version of that function that repeats 3 times with a delay of 2 seconds between each time. With my repeat function, I can do this:

var somethingWrong = repeat(comms, 3, 2000);
somethingWrong("Can you hear me, major tom?");

The result of calling the somethingWrong function is an alert box repeated 3 times with a 2 second delay between each alert.

arguments is not often used, a little quirky, but full of surprises and well worth getting to know!