JavaScript 常见错误介绍和代码示例

JavaScript是一种容易上手的语言, 但是要精通该语言, 需要付出大量的努力, 时间和耐心。初学者经常犯一些众所周知的错误, 这些错误会再次出现并被它们咬住。在本文中, 我们将介绍人们常犯的一些最常见的学习错误, 并找出解决方法。这些技巧中的许多技巧将适用于JavaScript甚至Web开发之外。

区分大小写

变量和函数名称区分大小写。并且, 请记住, JavaScript中的本机javascript函数和CSS属性是camelCase。

例子：

// it should be 'Id' not 'ID'
getElementById( 'lsbin' ) != getElementByID( 'lsbin' ); 
  
// 'lsbin' again does not equal 'lsbin'
getElementById( 'lsbin' ) != getElementById( 'lsbin' );

错误地使用" IF"语句比较运算符

我们正在谈论" =="运算符和" ="运算符。第一个比较, 第二个为变量赋值。创建的错误取决于语言。某些语言会引发错误, 但是JavaScript实际上会评估该语句并返回true或false。

例子：

// This if statement returns false (as expected) because x is not equal to 5:
var x = 0;
if (x == 5);
  
// This if statement returns true (not expected) and Assigns 5 to x:
var x = 0;
if (x = 5);

Java语言是松散类型的, 但switch语句中除外。在进行大小写比较时, JavaScript的类型不是宽松的。

例子：

var myVar = 5;
if (myVar == '5' ){ 
   // returns true since Javascript is loosely typed
   alert( 'Welcome to lsbin' ); 
}
  
switch (myVar){
   case '5' :
   // this alert will not show since the data types don't match
   alert('Welcome to lsbin'); 
}

忘记使用" this"

另一个常见的错误是忘记使用" this"。在JavaScript对象上定义的函数无法访问该JavaScript对象的属性, 并且无法使用" this"引用标识符。

例子：

// the following is incorrect:
  
function myFunction() {
   var myObject = {
      objProperty: "lsbin welcomes you" , objMethod: function () {
         alert(objProperty);
         }
      };
   myObject.objMethod();
} 
myFunction();
  
// the following is correct:
  
function myFunction() {
   var myObject = {
      objProperty: "lsbin welcomes you" , objMethod: function () {
         alert( this .objProperty);
         }
      };
   myObject.objMethod();
} 
myFunction();

未定义！= null

在JavaScript中, 未定义表示变量已被声明但尚未分配值, null是分配值。可以将其分配给变量, 以表示没有值。

例子：

// undefined
let TestVar;
console.log(TestVar); // shows undefined
console.log( typeof TestVar); // shows undefined
  
// null
let TestVar = null ;
console.log(TestVar); // shows null
console.log( typeof TestVar); // shows object
  
// it is clear that undefined and null are two distinct types:
// undefined is a type itself (undefined) while null is an object.
  
null === undefined // false
null == undefined // true
null === null // true

令人困惑的加法和串联

增加是关于加数字, 而串联是关于增加字符串。在JavaScript中, 两个操作都使用相同的" +"运算符。因此, 将数字添加为数字将产生与将数字添加为字符串不同的结果, 并且许多初学者对此感到困惑。

例子：

// the result in x is 30
var x = 5 + 25;  
  
// the result in x is '525'
var x = 5 + '25' ;

不了解范围的工作原理:

初学者很难理解的一个概念是JavaScript的范围规则和闭包。函数在其父作用域中保留对变量的可见性。但是因为我们使用setTimeout延迟了执行, 所以当函数实际运行的时间到了时, 循环已经结束, 并且I变量增加到6。

注释中的自执行函数起作用, 因为它按值复制I变量, 并为每个超时函数保留一个私有副本。

例子：

// Output will be 6
for ( var i = 0; i < 5; i++){
     setTimeout( function (){
         console.log(i+1);
     }, 100*i);
}

总结

你越了解JavaScript为何起作用以及如何起作用以及不起作用的代码, 你的代码将越牢固, 你就越能有效地利用语言的真正力量并进行改进。相反, 缺乏对JavaScript范例和概念的正确理解确实是许多JavaScript问题所在。

---