当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript教程:关于深入了解JS的几个问题

Javascript
玩透弹出窗口
几个常用的日期函数
简单的脚本帮你编排JScript程序中的缩进
得到 words.js?hello,world! 参数的处理方法
如何在javascript中传值
可输入的select
IE支持的HTML元素的DISABLE属性在NETSCAPE4.76中的实现
利用xml数据岛实现多级关联下拉选择框的做法
利用Wipe等ActiveX技术,实现n(n>>2)幅图片轮换擦洗显示
Javascript技术实现真正的网上试听
JavaScript实现在线编辑表格
根据客户端的分辨率不同而重定向到不同网页的脚本
几种不刷新页面取数据的方法
web进度条
随手写的一个动态添加删除行的HTC行为组件
农历与阳历的对照
关于在页面中解决打印的几个问题
"打开,另存为,属性,打印"等14个JS代码
无提示框关闭IE窗口
实现上传(增删)多个文件的客户端写法。

Javascript教程:关于深入了解JS的几个问题


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-20   浏览: 198 ::
收藏到网摘: n/a

看了Dmitry Baranovskiy写的这篇So, you think you know JavaScript?,也拜读了Nicholas C. Zakas的答复,对Javascript的了解又进了一步,尝试把自己的理解记录如下
第一题:

DaimaRen.cn © 2009-2010 by Tomie Zhang
if (!("a" in window)) { var a = 1;
}
alert(a);

这一题是对JS变量的考察,这个测试翻译成自然语言大意是:如果window里不存在a这个属性,那么就定义个a的变量并给它赋值等于1。 这里本来期望的值是1,但是很可惜它会弹出”undefined”,这是为什么呢?首先javascript的全局变量都是window的属性(properties),你可以用形如:

DaimaRen.cn © 2009-2010 by Tomie Zhang
alert("Daimaren.cn" in winodw)

来查看,var a = 1 等同于 window.a = 1,其次javascript引擎在扫描代码时是将变量提前到scope之前运行,如:

DaimaRen.cn © 2009-2010 by Tomie Zhang
alert("a" in window);
var a;

其实在解析之后是

DaimaRen.cn © 2009-2010 by Tomie Zhang
var a;
alert("a" in window);

所以它的结果是true,最后javascript的声明与初始化是分开的,

DaimaRen.cn © 2009-2010 by Tomie Zhang
var a = 1;
/*其实在运行时将变为*/
var a;
a=1;

javascript会自动将这两个步骤分拆,Nicholas的解释是这种分拆可以让声明前置在scope上方,而为什么要这么做,是因为声明时就初始化变量,可能影响代码运行时变量的值,导致意外的结果。
so,知道了这些,那么开始那个测试其实在运行时会是这个样子:

DaimaRen.cn © 2009-2010 by Tomie Zhang
var a;//自动前置运行的变量,没有初始化
if (!("a" in window)) {//FLASE var a = 1;
}
alert(a);//弹出undefined

第二题:

DaimaRen.cn © 2009-2010 by Tomie Zhang
var a = 1,
b = function a(x) { x && a(--x);
};
alert(a);

如果理解上第一题,那这个题就很好解决了,这是关于function的,它有2种,一种是函数声明(function declaration),一种是函数表达式(function expression),形如:

DaimaRen.cn © 2009-2010 by Tomie Zhang
function Daimaren(){//这是一个函数声明 do anything you want here........
}
var Daimaren = function(){//这是一个函数表达式 do anything you want here........
}

所有的函数声明在运行时是会被前置运行的,而函数表达式则不会,运行如下两段代码:

DaimaRen.cn © 2009-2010 by Tomie Zhang
foo();//将会弹出什么呢?
function foo(){	alert("i am a function function declaration from daimaren.cn");
}
var foo = function(){	alert("i am a function function expression from daimaren.cn");
}
DaimaRen.cn © 2009-2010 by Tomie Zhang
function foo(){	alert("i am a function function declaration from daimaren.cn");
}
var foo = function(){	alert("i am a function function expression from daimaren.cn");
}
foo();//又将会弹出什么呢?

通过这两个例子我们可以请清楚的知道,第二题的答案将一直是1.
第三题

DaimaRen.cn © 2009-2010 by Tomie Zhang
function a(x) { return x * 2;
}
var a;
alert(a);

如果理解了前面的变量前置的概念,那这个也很好理解了,唯一不同的是函数声明的优先级是高于普通的变量声明的除非变量声明被初始化,也就是说,上面这段代码将先去执行function a而忽略掉var a,考虑如下:

DaimaRen.cn © 2009-2010 by Tomie Zhang
function a(x) { return x * 2;
}
var a =1;
alert(a);

第四题

DaimaRen.cn © 2009-2010 by Tomie Zhang
function b(x, y, a) { arguments[2] = 10; alert(a);
}
b(1, 2, 3);

这个很好理解,运行的值为10,这里主要是对arguments的理解,引下ECMA-262第三版 10.1.8章节对arguments的解释如下:

For each non-negative integer, arg, less than the value of the length property, a property is created with name ToString(arg) and property attributes { DontEnum }. The initial value of this property is the value of the corresponding actual parameter supplied by the caller. The first actual parameter value corresponds to arg = 0, the second to arg = 1, and so on. In the case when arg is less than the number of formal parameters for the Function object, this property shares its value with the corresponding property of the activation object. This means that changing this property changes the corresponding property of the activation object and vice versa.

参数对象相当于对应参数建立的副本,参数改变它也会跟着改变,他们的对应关系,例如在上面这个函数里arguments[0]对应x,arguments[1]对应y,arguments[2]对应a,看起来似乎是array但是当你typof的时候会发现他们是object对象。对他们的对应关系理解如下例:

DaimaRen.cn © 2009-2010 by Tomie Zhang
function b(x, y, a) { arguments[2] = x; alert(a);//期望是3?但是看上一句,已经被指向了x,所以是1
}
b(1,2,3);

第五题

DaimaRen.cn © 2009-2010 by Tomie Zhang
function a() { alert(this);
}
a.call(null);

这个是call了(我比较头疼的东西,囧,可是大师却说是这5道题目里最简单的),来看下。首先,要搞清楚this指针是指向什么的,Nicholas举的例子:

DaimaRen.cn © 2009-2010 by Tomie Zhang
var o= { method: function() { alert(this === o); //true }
}
o.method();

在method被呼叫的时候,tihs指向了o,因为它是o下的一个方法,它的上下文是在o中的,而如果它不在o这个object中,那么它将会指向window:

DaimaRen.cn © 2009-2010 by Tomie Zhang
 function method() { alert(this === window); //true }
o.method();

OK,那接下来要知道call是干什么的,话说call是一个比较奇妙的方法,也很容易让人迷糊,官方的解释:

call 方法
请参阅
应用于:Function 对象
要求
版本 5.5
调用一个对象的一个方法,以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

官方解释很容易让人迷糊,Nicholas大湿的解释如下:

The call() method executes a function as if it were a method of another object

那不如看个例子吧:

DaimaRen.cn © 2009-2010 by Tomie Zhang
function add(a,b)
{ alert(a+b);
}
function sub(a,b)
{ alert(a-b);
}
 
add.call(sub,3,1); //4

这里其实就是用add的方法替换了sub的方法并且把参数值传进去,等同于

DaimaRen.cn © 2009-2010 by Tomie Zhang
add.call(sub,3,1) == add(3,1)

好了,理解了this指针以及call,那回头看这个题目,那它其实就相当于:

DaimaRen.cn © 2009-2010 by Tomie Zhang
function a() { alert(this);
}
a(null);

this不受任何影响指向的是a这个函数声明,而a这个函数声明则是一个object,于是结果就很明显啦。
这算是半翻译加半自己的理解,如有错误还请指教…. 另外Nicholas大师说有的人就喜欢拿这样的题目当面试题,他觉得不尊重面试者也没什么用处,因为以上这些错误或者点不是平常工作都能遇到的,就如同面试乘务员而让人家去解释喷气式动力的原理一样…这个很赞同,学术研究下即可,如果拿去故意刁难人就有点不太好了。