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

Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
JavaScript 创建随机数和随机图片
javascript document.execCommand() 常用解析
firefox下对ajax的onreadystatechange的支持情况分析
Javascript attachEvent传递参数的办法
jQuery Attributes(属性)的使用(一、属性篇)
jquery自动完成插件(autocomplete)应用之PHP版
查询绑定数据岛的表格中的文本并修改显示方式的js代码
讨论javascript(一)工厂方式 js面象对象的定义方法
IE不支持option的display样式,只能使用remove和add
多浏览器兼容的获取元素和鼠标的位置的js代码
js checkbox全选并将获取值放到input里边
javascript 日期联动选择器 [其中的一些代码值得学习]
javascript实现的仿51job地址多项选择方式效果
jQuery 渐变下拉菜单
利用图片的 onerror 事件载入默认图片
js实现页面打印功能实例代码(附去页眉页脚功能代码)
JQuery读取XML文件数据并显示的实现代码
比较详细的关于javascript 解析json的代码
TextArea 控件的最大长度问题(js json)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-20   浏览: 577 ::
收藏到网摘: 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大师说有的人就喜欢拿这样的题目当面试题,他觉得不尊重面试者也没什么用处,因为以上这些错误或者点不是平常工作都能遇到的,就如同面试乘务员而让人家去解释喷气式动力的原理一样…这个很赞同,学术研究下即可,如果拿去故意刁难人就有点不太好了。