开发人员面临的10个最常见的JavaScript问题

た入场券 2023-10-02 23:50 28阅读 0赞

![10114ff044aca1116f896423321401ad.jpeg][]

今天，JavaScript 是几乎所有现代 Web 应用的核心。这就是为什么JavaScript问题，以及找到导致这些问题的错误，是 Web 发者的首要任务。

用于单页应用程序（SPA）开发、图形和动画以及服务器端JavaScript平台的强大的基于JavaScript的库和框架已不是什么新鲜事。在 Web 应用程序开发的世界里，JavaScript确实已经无处不在，因此是一项越来越重要的技能，需要掌握。

起初，JavaScript 看起来很简单。事实上，对于任何有经验的前端开发人员来说，在网页中建立基本的JavaScript功能是一项相当简单的任务，即使他们是JavaScript新手。然而，这种语言比人们最初认为的要细致、强大和复杂得多。事实上，JavaScript的许多微妙之处导致了许多常见的问题，这些问题使它无法工作--我们在这里讨论了其中的10个问题--在寻求成为JavaScript开发大师的过程中，这些问题是需要注意和避免的。

### 问题\#1：不正确的引用 this ###

随着JavaScript编码技术和设计模式多年来变得越来越复杂，回调和闭包中的自引用作用域也相应增加，这是造成JavaScript问题的 "this/that 混乱 "的一个相当普遍的来源。

考虑下面代码：

Game.prototype.restart = function () {
        this.clearLocalStorage();
        this.timer = setTimeout(function() {
        this.clearBoard();    // What is "this"?
        }, 0);
    };
    复制代码

Copy

执行上述代码会出现以下错误:

Uncaught TypeError: undefined is not a function
    复制代码

Copy

上述错误的原因是，当调用 `setTimeout()`时，实际上是在调用 `window.setTimeout()`。因此，传递`给setTimeout()`的匿名函数是在`window`对象的上下文中定义的，它没有`clearBoard()`方法。

传统的、符合老式浏览器的解决方案是将 `this` 引用保存在一个变量中，然后可以被闭包继承，如下所示：

Game.prototype.restart = function () {
        this.clearLocalStorage();
        var self = this;   // Save reference to 'this', while it's still this!
        this.timer = setTimeout(function(){
        self.clearBoard();    // Oh OK, I do know who 'self' is!
        }, 0);
    };
    复制代码

Copy

另外，在较新的浏览器中，可以使用`bind()`方法来传入适当的引用：

Game.prototype.restart = function () {
        this.clearLocalStorage();
        this.timer = setTimeout(this.reset.bind(this), 0);  // Bind to 'this'
    };
    
    Game.prototype.reset = function(){
        this.clearBoard();    // Ahhh, back in the context of the right 'this'!
    };
    复制代码

Copy

### 问题2：认为存在块级作用域 ###

JavaScript开发者中常见的混乱来源（也是常见的错误来源）是假设JavaScript为每个代码块创建一个新的作用域。尽管这在许多其他语言中是对的，但在JavaScript中却不是。考虑一下下面的代码：

for (var i = 0; i < 10; i++) {
        /* ... */
    }
    console.log(i);  // 输出什么？
    复制代码

Copy

如果你猜测`console.log()`的调用会输出 `undefined` 或者抛出一个错误，那你就猜错了。答案是输出`10`。为什么呢？

在大多数其他语言中，上面的代码会导致一个错误，因为变量`i`的 "生命"（即使作用域）会被限制在`for`块中。但在JavaScript中，情况并非如此，即使在for循环完成后，变量`i`仍然在作用域内，在退出循环后仍保留其最后的值。(顺便说一下，这种行为被称为变量提升（variable hoisting）。

JavaScript中对块级作用域的支持是通过`let`关键字实现的。`Let`关键字已经被浏览器和Node.js等后端JavaScript引擎广泛支持了多年。

### 问题\#3：创建内存泄漏 ###

如果没有有意识地编写代码来避免内存泄漏，那么内存泄漏几乎是不可避免的JavaScript问题。它们的发生方式有很多种，所以我们只重点介绍几种比较常见的情况。

内存泄漏实例1:对不存在的对象的悬空引用

考虑以下代码:

Copy

如果你运行上述代码并监测内存使用情况，你会发现你有一个明显的内存泄漏，每秒泄漏整整一兆字节！而即使是手动垃圾收集器（GC）也无济于事。因此，看起来我们每次调用 `replaceThing` 都会泄漏 `longStr`。但是为什么呢？

每个`theThing`对象包含它自己的`1MB longStr`对象。每一秒钟，当我们调用 `replaceThing` 时，它都会在 `priorThing` 中保持对先前 `theThing` 对象的引用。

但是我们仍然认为这不会是一个问题，因为每次通过，先前引用的`priorThing`将被取消引用（当`priorThing`通过`priorThing = theThing;`被重置时）。而且，只在 `replaceThing` 的主体和`unused`的函数中被引用，而事实上，从未被使用。

因此，我们又一次想知道为什么这里会有内存泄漏。

为了理解发生了什么，我们需要更好地理解JavaScript的内部工作。实现闭包的典型方式是，每个函数对象都有一个链接到代表其词法作用域的字典式对象。如果在`replaceThing`里面定义的两个函数实际上都使用了`priorThing，`那么它们都得到了相同的对象就很重要，即使`priorThing`被反复赋值，所以两个函数都共享相同的词法环境。但是一旦一个变量被任何闭包使用，它就会在该作用域内所有闭包共享的词法环境中结束。而这个小小的细微差别正是导致这个可怕的内存泄露的原因。

内存泄漏实例2：循环引用

考虑下面代码：

function addClickHandler(element) {
        element.click = function onClick(e) {
            alert("Clicked the " + element.nodeName)
        }
    }
    复制代码

Copy

这里，`onClick`有一个闭包，保持对`element`的引用（通过`element.nodeName`）。通过将`onClick`分配给`element.click`，循环引用被创建；即：`element` → `onClick` → `element` → `onClick` → `element`...

有趣的是，即使 `element` 被从DOM中移除，上面的循环自引用也会阻止 element 和`onClick`被收集，因此会出现内存泄漏。

避免内存泄漏:要点

JavaScript的内存管理（尤其是垃圾回收）主要是基于对象可达性的概念。

以下对象被认为是可达的，被称为 "根":

*  从当前调用堆栈的任何地方引用的对象（即当前被调用的函数中的所有局部变量和参数，以及闭包作用域内的所有变量）
 *  所有全局变量

只要对象可以通过引用或引用链从任何一个根部访问，它们就会被保留在内存中。

浏览器中有一个垃圾收集器，它可以清理被无法到达的对象所占用的内存；换句话说，当且仅当GC认为对象无法到达时，才会将其从内存中删除。不幸的是，很容易出现不再使用的 "僵尸 "对象，但GC仍然认为它们是 "可达的"。

### 问题4：双等号的困惑 ###

JavaScript 的一个便利之处在于，它会自动将布尔上下文中引用的任何值强制为布尔值。但在有些情况下，这可能会让人困惑，因为它很方便。例如，下面的一些情况对许多JavaScript开发者来说是很麻烦的。

// 下面结果都是 'true'
    console.log(false == '0');
    console.log(null == undefined);
    console.log(" \t\r\n" == 0);
    console.log('' == 0);
    
    // 下面也都成立
    if ({}) // ...
    if ([]) // ...
    复制代码

Copy

关于最后两个，尽管是空的（大家可能会觉得他们是 false），`{}`和`[]`实际上都是对象，任何对象在JavaScript中都会被强制为布尔值 `"true"`，这与ECMA-262规范一致。

正如这些例子所表明的，类型强制的规则有时非常清楚。因此，除非明确需要类型强制，否则最好使用`===`和`!==`（而不是`==`和`!=`），以避免强制类型转换的带来非预期的副作用。(`==` 和 `!=` 会自动进行类型转换，而 `===` 和 `!==` 则相反)

**另外需要注意的是**：将`NaN`与任何东西（甚至是`NaN`）进行比较时结果都是 `false`。因此，不能使用双等运算符（`==`,`==`, `!=`, `!==`）来确定一个值是否是`NaN`。如果需要，可以使用内置的全局 `isNaN()`函数。

console.log(NaN == NaN);    // False
    console.log(NaN === NaN);   // False
    console.log(isNaN(NaN));    // True
    复制代码

Copy

### JavaScript问题5：低效的DOM操作 ###

使用 JavaScript 操作DOM（即添加、修改和删除元素）是相对容易，但操作效率却不怎么样。

比如，每次添加一系列DOM元素。添加一个DOM元素是一个昂贵的操作。连续添加多个DOM元素的代码是低效的。

当需要添加多个DOM元素时，一个有效的替代方法是使用 `document fragments`来代替，从而提高效率和性能。

var div = document.getElementsByTagName("my_div");
    	
    var fragment = document.createDocumentFragment();
    
    for (var e = 0; e < elems.length; e++) {  // elems previously set to list of elements
        fragment.appendChild(elems[e]);
    }
    div.appendChild(fragment.cloneNode(true));
    复制代码

Copy

除了这种方法固有的效率提高外，创建附加的DOM元素是很昂贵的，而在分离的情况下创建和修改它们，然后再将它们附加上，就会产生更好的性能。

### 问题\#6：在循环内错误使用函数定义 ###

考虑下面代码：

var elements = document.getElementsByTagName('input');
    var n = elements.length;    // Assume we have 10 elements for this example
    for (var i = 0; i < n; i++) {
        elements[i].onclick = function() {
            console.log("This is element #" + i);
        };
    }
    复制代码

Copy

根据上面的代码，如果有`10`个 `input` 元素，点击任何一个都会显示 `"This is element #10"`。  
这是因为，当任何一个元素的`onclick`被调用时，上面的`for`循环已经结束，`i`的值已经是`10`了（对于所有的元素）。

我们可以像下面这样来解决这个问题：

Copy

`makeHandler` 是一个外部函数，并返回一个内部函数，这样就会形成一个闭包，`num` 就会调用时传进来的的当时值，这样在点击元素时，就能显示正确的序号。

### 问题\#7：未能正确利用原型继承 ###

考虑下面代码：

BaseObject = function(name) {
        if (typeof name !== "undefined") {
            this.name = name;
        } else {
            this.name = 'default'
        }
    };
    复制代码

Copy

上面代码比较简单，就是提供了一个名字，就使用它，否则返回 `default`:

var firstObj = new BaseObject();
    var secondObj = new BaseObject('unique');
    
    console.log(firstObj.name);  // -> 'default'
    console.log(secondObj.name); // -> 'unique'
    复制代码

Copy

但是，如果这么做呢:

delete secondObj.name;
    复制代码

Copy

会得到：

console.log(secondObj.name); // 'undefined'
    复制代码

Copy

当使用 `delete` 删除该属性时，就会返回一个 `undefined`，那么如果我们也想返回 `default` 要怎么做呢？利用原型继承，如下所示:

BaseObject = function (name) {
        if(typeof name !== "undefined") {
            this.name = name;
        }
    };
    
    BaseObject.prototype.name = 'default';
    复制代码

Copy

`BaseObject` 从它的原型对象中继承了`name` 属性，值为 `default`。因此，如果构造函数在没有 `name` 的情况下被调用，`name` 将默认为 `default`。同样，如果 `name` 属性从`BaseObject`的一个实例中被移除，那么会找到原型链的 `name`，，其值仍然是`default`。所以'

var thirdObj = new BaseObject('unique');
    console.log(thirdObj.name);  // -> Results in 'unique'
    
    delete thirdObj.name;
    console.log(thirdObj.name);  // -> Results in 'default'
    复制代码

Copy

### 问题8：为实例方法创建错误的引用 ###

考虑下面代码：

var MyObject = function() {}
    	
    MyObject.prototype.whoAmI = function() {
        console.log(this === window ? "window" : "MyObj");
    };
    
    var obj = new MyObject();
    复制代码

Copy

现在，为了操作方便，我们创建一个对`whoAmI`方法的引用，这样通过`whoAmI()`而不是更长的`obj.whoAmI()`来调用。

var whoAmI = obj.whoAmI;
    复制代码

Copy

为了确保没有问题，我们把 `whoAmI` 打印出来看一下：

console.log(whoAmI);
    复制代码

Copy

输出：

function () {
        console.log(this === window ? "window" : "MyObj");
    }
    复制代码

Copy

Ok,看起来没啥问题。

接着，看看当我们调用`obj.whoAmI()` 和 `whoAmI()` 的区别。

obj.whoAmI();  // Outputs "MyObj" (as expected)
    whoAmI();      // Outputs "window" (uh-oh!)
    复制代码

Copy

什么地方出错了？当我们进行赋值时 `var whoAmI = obj.whoAmI`,新的变量`whoAmI`被定义在全局命名空间。结果，`this`的值是 `window`，而不是 `MyObject` 的 `obj` 实例!

因此，如果我们真的需要为一个对象的现有方法创建一个引用，我们需要确保在该对象的名字空间内进行，以保留 `this`值。一种方法是这样做:

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();  // Outputs "MyObj" (as expected)
    obj.w();       // Outputs "MyObj" (as expected)
    复制代码

Copy

### 问题9：为 `setTimeout` 或 `setInterval` 提供一个字符串作为第一个参数 ###

首先，需要知道的是为 `setTimeout` 或 `setInterval` 提供一个字符串作为第一个参数，这本身并不是一个错误。它是完全合法的JavaScript代码。这里的问题更多的是性能和效率的问题。很少有人解释的是，如果你把字符串作为`setTimeout`或`setInterval`的第一个参数，它将被传递给函数构造器，被转换成一个新函数。这个过程可能很慢，效率也很低，而且很少有必要。

将一个字符串作为这些方法的第一个参数的替代方法是传入一个函数。

setInterval("logTime()", 1000);
    setTimeout("logMessage('" + msgValue + "')", 1000);
    复制代码

Copy

更好的选择是传入一个函数作为初始参数:

setInterval(logTime, 1000); 
    	
    setTimeout(function() {      
        logMessage(msgValue);     
    }, 1000);
    复制代码

Copy

### 问题10：未使用 "严格模式" ###

"严格模式"（即在JavaScript源文件的开头包括 `"use strict"`；）是一种自愿在运行时对JavaScript代码执行更严格的解析和错误处理的方式，同时也使它更安全。

但是，不使用严格模式本身并不是一个 "错误"，但它的使用越来越受到鼓励，不使用也越来越被认为是不好的形式。

以下是严格模式的一些主要好处：

*  使得调试更容易。原本会被忽略或无感知的代码错误，现在会产生错误或抛出异常，提醒我们更快地发现代码库中的JavaScript问题，并引导更快地找到其来源。
 *  防止意外的全局变量。在没有严格模式的情况下，给一个未声明的变量赋值会自动创建一个具有该名称的全局变量。这是最常见的JavaScript错误之一。在严格模式下，试图这样做会产生一个错误。
 *  消除this 强迫性。在没有严格模式的情况下，对 null 或 undefined 的 this 值的引用会自动被强制到全局。在严格模式下，引用null或undefined的this值会产生错误。
 *  不允许重复的属性名或参数值。严格模式在检测到一个对象中的重复命名的属性（例如，var object = \{foo: "bar", foo: "baz"\};）或一个函数的重复命名的参数（例如，function foo(val1, val2, val1)\{\}）时抛出一个错误，从而捕捉到你的代码中几乎肯定是一个错误，否则你可能会浪费很多时间去追踪。
 *  使得eval()更加安全。eval()在严格模式和非严格模式下的行为方式有一些不同。最重要的是，在严格模式下，在eval()语句中声明的变量和函数不会在包含的范围内创建。(在非严格模式下，它们是在包含域中创建的，这也可能是JavaScript问题的一个常见来源)。
 *  在无效使用delete的情况下抛出错误。delete 操作符（用于从对象中删除属性）不能用于对象的非可配置属性。当试图删除一个不可配置的属性时，非严格的代码将无声地失败，而严格模式在这种情况下将抛出一个错误。

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。**

**最后  
如果您觉得此文章对您有一丁点帮助，点个赞。或者可以添加我15129888268，拉你进开发交流群相互学习，我们会有专业的技术答疑解惑，免费赠送商城源码搭建使用。CRMEB专注移动互联网电商系统多年，有专业的技术团队和售后团队。**

[10114ff044aca1116f896423321401ad.jpeg]: https://img-blog.csdnimg.cn/img_convert/10114ff044aca1116f896423321401ad.jpeg