什么是顶级的JavaScript陷阱?

时间:2010-05-01 12:45:00

标签: javascript debugging

我正计划在JavaScript上进行介绍性讨论,在准备过程中,我想知道新手陷入的最大陷阱是什么。

我知道在我完全理解闭包之前我已经遇到了一些问题,但JavaScript中的许多奇怪行为都不是我想到的......

那么,你应该向新秀指出哪些陷阱呢?

13 个答案:

答案 0 :(得分:33)

Boolean type conversion

''        ==   '0'           //false
0         ==   ''            //true
0         ==   '0'           //true
false     ==   'false'       //false
false     ==   '0'           //true
false     ==   undefined     //false
false     ==   null          //false
null      ==   undefined     //true
" \t\r\n" ==   0             //true

以及nullundefined之间的区别。如上表所列,比较null& undefined ==返回true,但===返回false。一旦您了解undefined与具有null值的变量非常不同,并且持有 undefined的内容与某些内容不同,则此行为才有意义em> 未定义。

答案 1 :(得分:26)

不要在对象定义文字中意外留下尾随逗号,否则IE将失败,直到很久以后你才会注意到,因为你从未使用IE进行开发,到那时它可能会搞清楚发生了什么。

var foo = { 
    bar: "bar", 
    baz: "baz", 
};

注意@ JulianR的评论: 在数组中,IE不会直接通过抛出一些语法错误而失败,但是当你尝试使用数组时会失败,因为添加的逗号会让IE认为数组中还有一个元素,值为undefined,而不是那里实际上是。因此,如果您遇到错误,因为某些原因,数组中的最后一个元素是undefined:它是逗号。

答案 2 :(得分:21)

不可否认,我过去曾为其中的一些人感到内疚,为了你的娱乐,这是大胆的:

  • 不知道eval
    eval("obj."+prop);
  • 的使用不正确(以及极少数正确)
  • 使用with语句
  • 使用parseInt(str, base)而不指定base参数。
  • 在计时器/回调函数中使用this
  • 在计时器中使用类似eval的表达式
    setTimeout("someFunc(myScopedVarWhoops)");
  • 思考jQuery是您正在编码的语言的名称
  • 使用框架执行简单的JavaScript任务 - $(1).plus(1)任何人? ;-)
  • 在不增加或调整条件变量的情况下使用continue
  • 使用变量泛滥全局命名空间
  • var语句中或之前忘记forfor (i=0;i<10;i++)
  • 使用混淆器,让它在代码上狂奔
  • 不是真正的陷阱,而是毫无意义 - return condition ? true : false;而不是return condition;
  • 不评论您的代码,真正适用于所有语言。
  • 使用try...catch...finally语句来捕获错误,而不是使用if语句来检查变量。
  • 愚蠢地试图通过阻止您的网页上的鼠标右键来停止“查看来源”(我年轻时 * sobs * !)
  • 使用{ 0: "Foo", 1:"Bar", 2:"Foobar" }代替[ "Foo", "Bar", "Foobar" ]
  • 在用户输入上使用parseInt()
    parseInt("1,000") // -> 1, wrong!
    +"1,000" // -> NaN, correct!

有人已经提到:

  • 尽可能不使用严格相等(===)运算符
  • 将事件处理程序设置为函数的返回值,而不是对所述函数的引用
  • ;正确终止陈述
  • 在阵列上使用for...in循环

在我睡觉之后可能会想到更多: - )

答案 3 :(得分:15)

  • 忘记使用var
  • 声明变量
  • 误解(或不理解)变量范围和闭包
  • 尝试解决框架团队已经解决的令人讨厌的兼容性问题

答案 4 :(得分:13)

+连接字符串:

var a = '2';
var b = 3;

a * b #  6
a - b # -1
a + b #  23

答案 5 :(得分:9)

JavaScript字符串不是字节字符串,甚至也不是Unicode字符串。它们是UTF-16字符串。

示例:

> "♫".length
1
> "".length
2
> "".charAt(0)
"\uD800"
> "".charAt(1)
"\uDF08"
> "" === "\uD800\uDF08"
true

如果上面看起来像垃圾,请责怪您的浏览器有错误的Unicode处理(或者可能是您的字体,因为没有'OLD ITALIC LETTER THE'字符)。

答案 6 :(得分:7)

我为初学者看到的最大困难是理解执行上下文(即,“这”意味着何时何地遇到它)和原型继承系统。

答案 7 :(得分:5)

  • Closures - 也称为lambda函数 - 注意内存泄漏。
  • 浏览器差异,必须在Internet Explorer和至少一个其他浏览器中进行测试。通常应避免仅在某些浏览器中工作或在不同浏览器中以不同方式工作的函数。如果不可能,则可以更好地检测浏览器特定分支,而不是浏览器版本。这增加了代码在未经测试的未来浏览器和浏览器中工作的机会。
  • 过于陷入jQueryAjax框架抽象,并且不足以了解如何解决框架问题。
  • 不知道可以在某种程度上使用JavaScript来编写OOP代码。实际上它可以为您提供一个非常基本的OOP框架和对象。
  • 区分大小写(如果您是VB.NET开发人员)
  • 知识产权保护 - 知道您可以对JavaScript进行模糊处理,但您在那里提供的源代码将很容易被窃取和反向工程。这可能不是一个问题,这取决于您正在编写的客户端应用程序的复杂性。

我不能再想了,但我希望这会有所帮助。

答案 8 :(得分:4)

  • 使用window.onload = init();代替window.onload = init;
  • 布尔等价(已提及)
  • 循环中的闭包。
  • 使用for in循环变量迭代数组。
  • 未使用;,因为它是“可选的”。
  • this(只是......一般情况:))
  • 未使用var
  • 了解obj.ref === obj["ref"]

答案 9 :(得分:4)

  • 创建无法使用JavaScript的网站
  • 将JavaScript用于应该在服务器端完成的事情
  • 将框架用于不需要它们的简单任务

答案 10 :(得分:3)

不是一个真正的编码陷阱,而是更多的一般思想:
不要相信您的JavaScript正在做的事情,它可能已被关闭,甚至monkey patched。这意味着永远不要依赖客户端验证。 NEVER。

答案 11 :(得分:3)

原型设计的整个概念需要一些时间才能完全理解,但这里有一些常见的陷阱:

在分配原型对象后忘记重置构造函数属性:

var Foo() = function ()
{
    this.batz = '...';
};
Foo.prototype = new Bar();
Foo.prototype.constructor = Foo;

如果您忘记了至少一行,new Foo()将实际执行Bar()

原型设计的另一个缺陷是迭代对象/数组而不过滤掉原型的成员:

for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        //stuff...
    }
}

额外条件将跳过从obj原型继承的任何成员。

答案 12 :(得分:2)

typeof null is object


>>> var i = 1 + undefined; i;
NaN
>>> var i = 1 + null; i;
1