开发者最常犯的8个JavaScript错误

译文
开发 前端
开发人员在使用JavaScript时最常犯的错误之一是误用this关键字。this关键字引用当前代码执行的环境对象。这个对象可以是全局对象、DOM元素或任何其他对象。在大多数情况下,this关键字引用当前代码执的环境对象。

​译者 | 布加迪

审校 | 孙淑娟

说到编写JavaScript,有几个错误是开发人员常犯的。本文介绍几个最常见的JavaScript错误以及如何避免它们。

1、误用this关键字

开发人员在使用JavaScript时最常犯的错误之一是误用this关键字。this关键字引用当前代码执行的环境对象。这个对象可以是全局对象、DOM元素或任何其他对象。在大多数情况下,this关键字引用当前代码执的环境对象。

然而,在一些情况下this关键字可能被误用。一个常见的错误是在嵌套函数中使用this关键字。在这里,this关键字将引用全局对象,而不是代码执行的环境对象。

为了避免这个错误,确保仅在引用当前代码执行的环境对象时才使用this关键字。

2、不使用严格模式

开发人员常犯的另一个错误是不使用严格模式。严格模式是一种选择加入受限制的JavaScript变体的方法。在严格模式下,不允许某种语法,某些行为被更改。

比如说,在严格模式下,不能使用未声明的变量。

严格模式在默认情况下未启用,所以您必须选择启用它。为此,您可以在JavaScript文件的顶部添加以下代码行:

"use strict";

添加这行代码后,您告诉JavaScript引擎为后面的代码启用严格模式。

3、在全局作用域中声明变量

严格模式的主要用途之一是防止在全局作用域中声明变量。在JavaScript中,全局作用域是默认作用域。这意味着在函数外部声明的任何变量都自动被添加到全局作用域。

这可能导致问题,因为很容易无意中覆盖全局作用域中的现有变量。比如说,如果您声明一个与现有全局变量同名的变量,将覆盖现有变量。

为了避免这种情况,确保总是在函数内部声明变量。这将确保它们不被添加到全局作用域。

4、使用==而不是===

在JavaScript中,有两种方法来检查两个值是否相等:==和===。==操作符检查值是否相等,而===操作符检查值和类型是否相等。

大多数情况下,您希望使用===操作符,因为它更严格。然而,在一些情况下==可能很有用。比如说,如果您在比较两个可能不同类型的值,==就很有帮助,因为它会在比较之前将值转换成相同的类型。

5、记绑定this

在使用JavaScript的面向对象特性时,您常常需要在方法内部引用当前对象。为此,应使用this关键字。

然而,this的值可以根据调用方法的方式进行改变。比如说,如果您在一个对象上调用一个方法,this将引用该对象。但如果您使用另一个对象调用相同的方法,this将转而引用该对象。

这可能是个问题,因为很难跟踪this引用什么。为了避免这种情况,确保将this的值绑定到当前对象。可以通过使用bind方法来实现:

var obj = {
foo: function() {
console.log(this);
}
};
var bar = obj.foo.bind(obj);
bar(); // prints the obj object

在上述代码中,我们用foo方法创建了一个对象。然后,我们创建一个名为bar的新变量,并将其设置为在foo上调用bind的结果。这将foo中的this的值设置为obj对象。当我们调用bar时,它将obj打印输出到控制台。

6、修改字符串而不是创建新的字符串

在JavaScript中,字符串是不可变的。这意味着一旦创建了字符串,就不能更改它。

然而,有几个方法可以用来修改字符串。比如说,replace方法可用于将字符串的一部分替换成另一个字符串。

var str = "Hello world!";
str.replace(" world", " JavaScript"); // returns "Hello JavaScript!"

replace方法实际上并不修改原始字符串,只是返回经过修改的新字符串。记住这一点很重要,因为当您打算创建新字符串时,很容易无意中修改字符串。

为了避免这种错误,确保在修改现有字符串时创建了新字符串。可以使用slice方法来做到这一点:

var str = "Hello world!";
var newStr = str.slice(0, 5) + " JavaScript!"; // returns "Hello JavaScript!"

在上述代码中,我们使用slice方法来创建新字符串,其中含有原始字符串的前五个字符。然后我们将其与字符串“JavaScript!”连接起来,这创建了一个新字符串,我们可以将其赋予给newStr变量。

7、导致内存泄漏

内存泄漏是用JavaScript编程时可能发生的问题。当您坚持引用不再需要的对象时,就会出现这种情况。

比如说,以下列代码为例:

var arr = [1, 2, 3, 4, 5];
var foo = function() {
arr.push(6);
};
setInterval(foo, 1000);

在上述代码中,我们创建了一个数组和一个往数组添加新元素的函数。然后,我们设置一个计时器,每秒钟调用一次函数。

这段代码将导致内存泄漏,因为arr数组永远不会被垃圾回收。这是由于foo函数引用arr数组,foo函数每秒钟都被调用一次。

为了避免这个错误,确保删除对不再需要的对象的引用。在上述例子中,我们可以使用clearInterval方法来做到这一点:

var arr = [1, 2, 3, 4, 5];
var foo = function() {
arr.push(6);
};
var interval = setInterval(foo, 1000);
clearInterval(interval);

在上述代码中,我们将setInterval的返回值存储在一个变量中。这个返回值是对已创建的间隔时间的引用。然后可以使用clearInterval方法来清除间隔时间,并删除对arr数组的引用。

8、不使用IIFE

IIFE(立即调用的函数表达式)是一个立即执行的函数。IIFE通常在JavaScript中用于创建本地作用域。

比如,以下列代码为例:

var foo = "foo";
(function() {
var foo = "bar";
})();
console.log(foo); // prints "foo"

在上述代码中,我们有一个名为foo的全局变量,其值为“foo”。然后我们创建一个具有同名的局部变量的IIFE。这个局部变量只能在IIFE内部访问。

当我们将foo的值记录到控制台时,它会输出“foo”。这是由于IIFE创建了一个与全局作用域不同的新作用域。

为了避免这个错误,确保在想要创建新作用域时使用IIFE。

原文链接:https://hackernoon.com/the-9-mistakes-javascript-developers-make-the-most

责任编辑:武晓燕 来源: 51CTO技术栈
相关推荐

2014-10-09 09:29:25

AngularJS

2013-12-27 09:03:47

开发项目

2020-10-09 09:44:25

JavaScript 开发 应用

2011-03-17 15:25:31

2015-04-21 12:54:21

2011-03-16 09:38:05

2011-03-16 09:33:45

数据库开发错误

2023-03-10 09:00:49

Swift开发者工具

2009-04-29 11:20:24

.NET开发常见错误

2011-04-18 12:55:04

JavaScript开发者

2022-10-25 18:46:36

JavaScript

2015-12-14 10:20:57

Python程序员错误

2016-12-05 09:20:37

机器学习算法

2014-02-01 21:31:10

JavaScriptJS框架

2020-09-23 22:40:31

Python 开发编程语言

2011-11-17 14:17:09

IDE

2019-08-07 15:08:48

开发者技能工具

2011-04-21 13:02:29

2020-11-20 20:49:49

Python开发代码

2012-10-31 11:22:26

Windows 8
点赞
收藏

51CTO技术栈公众号