JavaScript 常见陷阱与对象概念详解

本书由 Aaron Gustafson 撰写，李松峰、李雅雯等翻译。这是一本非常值得阅读的书籍，感兴趣的读者可以参考。以下是我从书中提取的关于 JavaScript 常见陷阱和对象概念的整理内容，希望能对大家有所帮助。

JavaScript 语法常见陷阱

² 区分大小写

² 单引号和双引号在本质上没有特殊区别，这一点是我在阅读本书后才真正意识到的。虽然以前写程序时也曾使用过单引号字符串，但并未预先意识到“原来这样也可以”。

此外，在大多数情况下仍推荐使用单引号表示字符串，因为 XHTML 规范要求所有 XHTML 属性值都用双引号括起。这样混合代码时会更加清晰。

² 换行，千万不要忽略这一点。如果在字符串中使用了回车作为换行符，浏览器会报错，因为它会自动将回车转换为分号。为了解决这个问题，可以使用转义字符作为替代，如下所示：

var='<h2 class=”a”>A list</h2>\

<ol>\

<li class=”a”></li>\

</ol>'

有人可能会说可以使用加号，这一点我也知道。使用加号作为字符串操作符，底层可能进行了加号的重载（推测）。

² 可选的分号和花括号

如果你不相信，我可以告诉你这是可行的。可以说 JavaScript 在这方面做得比较智能。但与前书作者观点一致，我认为作为程序员还是应该遵守规范，保持严谨。

² 重载

有时你可能会突发奇想尝试创建一个 JavaScript 重载函数，但你会发现只有最后一个函数可以运行，前面的函数都没有被录用。这是什么原因呢？

原来，先前的同名函数已经被后面的函数替换掉了，也就是通常所说的覆盖。更进一步说，程序只引用作用域链中的最后一个同名函数。

² 匿名函数

不得不说这个概念非常有用。

² 作用域解析和闭包

这个作用域概念大家应该比较熟悉，因为每种编程语言都有这样的概念。

而作用域链是用来描述一种路径的概念，沿着该路径可以确定变量的值（或者当函数被调用时要使用的方法）。

闭包是与作用域相关的一个概念，它指的是内部函数即使在外部函数执行完成并终止以后，仍然可以访问其外部函数的属性。当引用一个变量或方法时，JavaScript 会沿着由对象执行路径构成的作用域链进行解析，查找变量最近定义的值。一旦找到，即使用该值。

² 迭代对象

不要怀疑这用的不好的话，很可能会产生错误。不信就看这一个例子：

var all=document.getElementsByTagName('*');

for(i in all){

//对all[i]元素进行操作。

由于返回的会分别等于length、item和namedItem，而这个很可能会导致代码中出现意外错误。

这时要做一下处理。用hasOwnProperty进行属性过滤，这个函数在对象的属性或方法是非继承的时返回true。方法如下：

var all=document.getElementsByTagName('*');

for(i in all){

if(!all.hasOwnProperty(i)){continue;}

//对all[i]元素进行操作。

注意了，这是不同的，调用会执行，引用只会给变量一个copy（好像可以这样理解吧？）

看下这个：

var foo=exampleFunction（）；

var foo=exampleFunction；

这两句式不一样的。前一个是执行exampleFunction这个函数并将返回值赋给变量foo，而后一个却是将exampleFunction这个函数的引用赋给foo。

JavaScript 对象概念详解

属性和方法的概念相信大家都晓得。下面讲下javascript中的对象和其中的玄奥妙义(讲的跟武侠似的)。

1. 继承

Javascript的继承让我很奇怪，但是想过之后感觉还是有道理的。而且和其他的还是一样的思想。其实javascript就是做了一个复制的操作。闲话不说看一个例子相信大家都会清楚了。

//创建一个person对象的实例

var person={};

person.getName=function(){……};

person.getAge=function(){……};

//创建一个employee对象的实例

var employee={};

employee.getTitle=function(){……};

enployee.getSalary=function(){……};

//从person对象中继承方法

employee.getName=person.getName;

employ.getAge=person.getAge;

2. 创建自己的对象

有两种方式可以创建自己的对象：

第一种：var myObject =new Object();

第二种：var myObject={};//是第一种的简写形式。实际上面已经用到了。

3. 创建构造函数

第一种：function myConstructor(a){

//代码

不要惊讶，想象前面说的javascript中到处都是对象，虽然有些夸张。这个函数一时一个对象。

第二种：

或许聪明的读者已经猜出来了，就是函数定义的另外两种类型：

var myConstructor=function(a){};

第三种也一起写出来吧：var myConstructor=new Function(‘a',/*某些代码*/);

不过对于这种方式，因为会导致性能问题，所以还是用function比较妥当。

最后给个书中的例子：

function myConstructor(message){

alert(message);

this.myMessage=message;

var myObject =new myConstructor(‘Instantiating myObject!');

4. 添加静态方法

var myObject={};

//添加属性

myObject.name=”Jeff”;

//添加方法

myObject.alertName=function(){

alert(this.name);

//执行方法

myObject.alertName();

相信大家都能看明白，不说了。

5. 想原型中添加公有方法

添加公有方法的方式是用prototype，注意这里的prototype可不是那个js库。

//创建构造函数

function myConstructor(message){

alert(message);

this.myMessage=message;

//添加一个公有方法

myConstructor.prototype.clearMessage=function(string){

this.myMessage+=''+string;

这里面要提的一点是 构造函数中凡是以var开头的变量全部是私有变量，不是以.号和prototype添加而是直接写入构造函数中的为私有函数。

6. 最后提一下对象字面量

对象字面量对于代码的重构，冗余度的减小都很有帮助。所以如果可能的话最好用这种

看下下面的例子：

var myObject={

propertyA:'value',

propertyB:'value'，

methodA:function(){}

不得不同意作者的观点，这种方式很优雅。

怎么样？是不是对Javascript中的对象和陷阱有了一些基本的认识？希望这篇文章对你有所帮助。