JavaScript易错点整理
常见错误1:在for循环中的不正确函数调用
看以下代码：
var elements = document.getElementsByTagName('input');
var n = elements.length;
for (var i = 0; i < n; i++) {
elements[i].onclick = function() {
console.log("This is element #" + i); }; }
运行以上代码，如果页面上有10个按钮的话，点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。
通过下面这段代码来实现真正正确的效果：
var elements = document.getElementsByTagName('input');
var n = elements.length;
var makeHandler = function(num) { // outer function
return function() {
console.log("This is element #" + num); }; };
for (var i = 0; i < n; i++)
{ elements[i].onclick = makeHandler(i+1); }
在这个版本的代码中， makeHandler 在每回循环的时候都会被立即执行，把i+1传递给变量num。外面的函数返回里面的函数，而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。
常见错误2:原型继承问题
很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：
BaseObject = function(name) {
if(typeof name !== "undefined")
{ this.name = name; }
else
{ this.name = 'default' } };
这段代码看起来很简单。如果你有name值，则使用它。如果没有，则使用 ‘default’:
var firstObj = new BaseObject();
var secondObj = new BaseObject('unique');
console.log(firstObj.name); // -> 结果是'default'
console.log(secondObj.name); // -> 结果是 'unique'
但是如果我们执行delete语句呢:
delete secondObj.name;
我们会得到:
console.log(secondObj.name); // -> 结果是 'undefined'
但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单，如果我们能够使用原型继承的话:
BaseObject = function (name)
{ if(typeof name !== "undefined")
{ this.name = name; } };
BaseObject.prototype.name = 'default';
在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时，如果构造函数被调用时没有参数，则会自动设置为 default。相同地，如果name 属性被从BaseObject移出，系统将会自动寻找原型链，并且获得 'default'值：
var thirdObj = new BaseObject('unique');
console.log(thirdObj.name);
delete thirdObj.name;
console.log(thirdObj.name); // -> 结果是 'default'
常见错误3:为实例方法创建错误的指引
我们来看下面一段代码:
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj"); };
var obj = new MyObject();
现在为了方便起见，我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():
var whoAmI = obj.whoAmI;
接下来为了确保一切都如我们所预测的进行，我们可以将 whoAmI 打印出来:
console.log(whoAmI);
结果是：
function () { console.log(this === window ? "window" : "MyObj"); }
没有错误!
但是现在我们来查看一下两种引用的方法：
obj.whoAmI(); // 输出 "MyObj" (as expected)
whoAmI(); // 输出 "window" (uh-oh!)
哪里出错了呢?
原理其实和上面的第二个常见错误一样，当我们执行 var whoAmI = obj.whoAmI;的时候，新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj!
正确的编码方式应该是：
var MyObject = function() {}
MyObject.prototype.whoAmI = function() {
console.log(this === window ? "window" : "MyObj"); };
var obj = new MyObject();
obj.w = obj.whoAmI; // still in the obj namespace obj.whoAmI(); // 输出 "MyObj" (as expected)
obj.w(); // 输出 "MyObj" (as expected)
常见错误4:用字符串作为setTimeout 或者 setInterval的第一个参数
首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。
setInterval("logTime()", 1000);
setTimeout("logMessage('" + msgValue + "')", 1000);
另一种方法是直接将函数作为参数传递进去：
setInterval(logTime, 1000);
setTimeout(function() {
logMessage(msgValue); }, 1000);
常见错误5:忽略 “strict mode”的作用
“strict mode” 是一种更加严格的代码检查机制，并且会让你的代码更加安全。当然，不选择这个模式并不意味着是一个错误，但是使用这个模式可以确保你的代码更加准确无误。
下面我们总结几条“strict mode”的优势：
1. 让Debug更加容易：在正常模式下很多错误都会被忽视掉，“strict mode”模式会让Debug极致更加严谨。
2. 防止默认的全局变量：在正常模式下，给一个为经过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下，我们取消了这个默认机制。
3. 取消this的默认转换：在正常模式下，给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下，我们取消了这个默认机制。
4. 防止重复的变量声明和参数声明：在strict模式下进行重复的变量声明会被抱错，如(e.g., var object = {foo: "bar", foo: "baz"};) 同时，在函数声明中重复使用同一个参数名称也会报错，如 (e.g., function foo(val1, val2, val1){}),
5. 让eval()函数更加安全。
6. 当遇到无效的delete指令的事后报错：delete指令不能对类中未有的属性执行，在正常情况下这种情况只是默默地忽视掉，而在strict模式是会报错的。
