JavaScript 语法陷阱
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript 语法陷阱，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4840字，纯文字阅读大概需要7分钟。
内容图文
没有一门编程语言是完美的，JavaScript 也不例外，它语法陷阱重重，防不胜防：
- 加号
- "with"
- 分号自动插入
- 声明提升
- "eval"
- 多行字符串
- 变量泄漏
- "arguments.callee"
- ...
了解和熟悉这些陷阱，并在开发时注意规避它们，可以给我们省去很多麻烦事。
加号
作为二元运算符时，+ 既是数学运算的加法，也是字符串的拼接。另外，它还可以作为一元符号，表示正数。
看看下面的代码：
//
1
console.log( 1 + 2 ); // 3
console.log( "3" + "4" ); // "34"
// 2
console.log( 1 + "3" ); // "13"
console.log( "3" + 1 ); // "31"
// 3
console.log( 1 + null );
console.log( 1 + undefined );
console.log( 1 + NaN );
// 4
console.log( "3" + null );
console.log( "3" + undefined );
console.log( "3" + NaN );
// 5
console.log( 1 + {} );
console.log( 1 + [] );
// 6
console.log( "3" + {} );
console.log( "3" + [] );
也许你可以准确的说出第1组代码的结果，甚至第2组也能答上，但剩下的几组你能毫不犹豫地给出答案吗？
在 JavaScript 中，是如何决定一段代码中的 + 是数学运算还是字符串拼接呢？答案请看下面这段逻辑：
a + b: pa = ToPrimitive(a) pb = ToPrimitive(b) if (pa is string || pb is string) return concat(ToString(pa), ToString(pb)) elsereturn add(ToNumber(pa), ToNumber(pb))
- 收集
+两端的操作数的原始值。 - 如果其中之一是字符串，则进行字符串拼接。
- 否则，执行数学加法。
需要注意的是，JavaScript 的原始值类型包括 number, string, boolean, undefined, 而 null 也是一种特殊的原始值。另一方面，对于非原始值类型（即复合类型，也即 object ）的变量，其原始值被认为是字符串。
按这个逻辑，之前的测试结果就容易理解了。当然，像上面那样使用加号是不被推荐的，为了避免混淆，利用上面的加号逻辑，我们通常可以这样使用加号：
"with"
使用 with 语句，可以将一个语句块的上下文绑定为一个指定对象。
with
(document) {
write("foo");
getElemntById("bar").innerHTML = "foobar";
alert("Hello world!");
}
// 等同于以下代码
document.write("foo");
document.getElemntById("bar").innerHTML = "foobar";
window.alert("Hello world!");
但是咱们不推荐使用 with ，事实上，ECMAScript 5 中引入的严格模式也禁止使用 with ：
- JavaScript 解释器引擎将难以对代码执行优化。解释器引擎的执行优化是建立在“明确的知道这个变量在运行时所指向的引用”的基础上的。而在 with 语句块中的变量或函数，在解释阶段无法判断其是属于 with 的上下文，还是其所在作用域，只有等到代码运行时才能确定。
- 代码可阅读性差。
分号自动插入
在语句结束时，你不必手动输入分号，换行即可。
function
foo() {
var bar = "value"
return bar
}
// `{}` 包围的语句块的最后一个语句的分号也可省略function bar() { return "foo" }
开发者们每写一行代码，就可以少敲打一次键盘，这看起来很人性化。但过于依赖分号自动插入，会带来一些潜在问题。
function
foo() {
return
{
bar: 1
}
}
function bar() {
var a, b, c, d, e
a = b + c
(d + e).toString()
}
看看上面的代码，foo() 将返回什么？ bar() 又将怎么运行？
事实上，前者将返回 undefined ，而后者的后两行代码将被理解为 a = b + c(d +
e).toString() 。
JavaScript 的分号自动插入的规则并不那么清晰可辨，老实地多敲几次键盘，可以避免那些让你摸不着头绪的bug在某一天突然出现。
声明提升
看看下面这段代码，我们将得到什么结果？
那么这段代码呢？
第1个例子，也许你会觉得是 "1" ，因为 ! 1 为假，if
里的代码不会执行。而第2个例子，可能你认为应该是 "10" 。
事实上，结果相反，我们将分别得到 "10" 和 "1" 。
在 JavaScript 中，变量、函数的声明会被提升到当前函数主体的顶部，而不管这个声明语句是否出现在了不可到达的地方。
上面的两段其实等同于：
var foo = 1;
function bar() {
var foo;
if (! foo) {
foo = 10;
}
alert(foo);
}
bar();
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
alert(a);
需要注意的是，只有变量或函数的声明被提升了，而赋值语句并没有。
"eval"
eval 是 JavaScript 的动态特性之一，在运行时， eval 可以将给定的字符串当作代码语句执行：
<
script
>
var
func
=
<?
php echo json_encode($user_send[
‘
func
‘
]);
?>
;
eval(func
+
"
()
"
);
function
sayHello() {}
function
sayGoodbye() {}
</
script
>
在代码中用一组字符串与变量拼出另一串代码来运行，这看起来吊爆了。
但请在使用 eval 之前考虑下它将带来的潜在问题：
- 使用了 eval 的代码可阅读性很差，你读到这样的代码时很难判断它究竟要做啥，即使那是你自己几天前写的。
- JavaScript 解释器引擎难以对代码执行优化。
- 如果 eval 中的字符串包含用户输入的数据，这会给攻击者有机可乘。
- 如果你是有经验的开发者，大多数情况下你可以使用更高效的函数嵌套（闭包）等来解决问题；如果你没有足够的经验，那更不要使用 eval ，如果你不想你或你的用户遭受攻击。
多行字符串
JavaScript 中不能直接书写多行的字符串，需要在行尾输入一个反斜杠 \ 。
假设我们的项目中有一段这样的代码：
var multiStr = "this is a multi-line string, and this is the second line. yes, the string ends here";
然后做了一些维护和更新：
var multiStr = "this is a multi-line string, and this is the second line. \
now i want to insert a line right here, yes, the string ends here";
凭肉眼似乎没看出毛病，但运行时却得到了一个语法错误，这之前你可能已经注意到语法高亮已经失效了。几经周折，你终于注意到了第2行行尾的那个不起眼的空格。。
变量泄漏
JavaScript 的全局作用域给了我们很多便利，有时我们无需使用 var 来声明变量。
很多 JavaScript 的入门开发者，喜欢利用这个“便利”。但事实上它是一个陷阱。它很可能让我们的一些敲打错误被隐藏和掩盖。
这段代码可以让项目长久地稳定运行，但随后的某天，我们吃惊地发现，所有的 type 都是 "first" ！在找到并修复这个手误之前，我们以此得到的数据或结论可能都要被废弃。
直接使用没有声明的变量，将自动创建一个全局变量，滥用会导致全局变量污染，或者让类似上面这样的手误逍遥法外。合理的声明变量，并利用作用域链与闭包，是 JavaScript 解决很多问题的思路。
"arguments.callee"
写一个递归函数，我们通常这样：
有时我们不想污染命名空间，需要递归调用一个匿名函数，怎么办？
还好我们有 arguments.callee ：
但是同样不推荐使用 arguments.callee ：
- 访问 arguments.callee 的开销是昂贵的。
- 使用它将导致 JavaScript 解释器难以执行优化。
- 从 ECMAScript 3 开始，已经支持命名函数表达式。
命名函数表达式：
注意，这里的函数 factorial() 并不是函数声明，而是命名函数表达式，factorial
所处的作用域是其函数本身的作用域（与参数 n 属同一个作用域），而不是当前的全局作用域。但是，在 IE8
及以下浏览器中，情况则不同，它将属于全局作用域。
避开陷阱
JavaScript 有这么多的语法陷阱，如何规避，并保证我们的代码质量呢？后面再谈。
原文：http://www.cnblogs.com/wangshenwei/p/javascript-syntax-trap.html
内容总结
以上是互联网集市为您收集整理的JavaScript 语法陷阱全部内容，希望文章能够帮你解决JavaScript 语法陷阱所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。