扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >JavaScript中常见的BUG及其修复方法分享
  • 696

0
分享到

JavaScript中常见的BUG及其修复方法分享

2023-06-04 11:06:34 696人浏览 薄情痞子
摘要

这篇文章主要讲解了“javascript中常见的BUG及其修复方法分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中常见的BUG及其修复方法分享”吧！如今网站几乎100

这篇文章主要讲解了“javascript中常见的BUG及其修复方法分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中常见的BUG及其修复方法分享”吧！

如今网站几乎100%使用JavaScript。JavaScript看上去是一门十分简单的语言，然而事实并不如此。它有很多容易被弄错的细节，一不注意就导致BUG。

1. 错误的对this进行引用

在闭包或则回调中，this关键字的作用域很容易弄错。举个例子：


Game.prototype.restart = function () {

this.clearLocalStorage();

this.timer = setTimeout(function() {

this.clearBoard(); // 此处this指的是?

}, 0);

};

如果执行上面的代码，我们会看到报错：


Uncaught TypeError: undefined is not a function

出错的原因在于：当你调用setTimeout函数，你实际上调用的是window.setTimeout()。在setTimeout中传入的匿名函数是在window这个对象环境下，所以this是指向window，但是window并没有clearBoard方法。

如何解决呢？定义新的变量引用指向Game对象的this，然后就可以使用啦。


Game.prototype.restart = function () {

this.clearLocalStorage();

var self = this; // 将this指向的对象绑定到self

this.timer = setTimeout(function(){

self.clearBoard();

}, 0);

};

或则使用bind()函数：


Game.prototype.restart = function () {

this.clearLocalStorage();

this.timer = setTimeout(this.reset.bind(this), 0); // bind to 'this'

};

 

Game.prototype.reset = function(){

this.clearBoard(); // 此处this的引用正确

};

 还有一些JavaScript中错误的正确处理方式，欢迎点击参考阅读l。

2. 和块作用域(block scope)有关的BUG

在大多数程序语言中，每一个函数块都有一个独立的新的作用域，但是在JavaScript中并不是。例如：


for (var i = 0; i < 10; i++) {

}

console.log(i); // 会输出什么呢？

通常在这种情况下，调用console.log()会输出undefined或则报错。不过呢，这里会输出10。在JavaScript中，即使for循环已经结束，变量i依然存在，并且记录最后的值。有些开发者会忘记这一点，然后导致许多bug。我们可以使用let而不是for来杜绝这一问题。

3. 内存泄漏

你需要监控内存使用量，因为泄露很难避免。内存泄露可能由于引用不存在的对象或则循环引用导致。

  • 如何避免：关注对象的可访问性(reachability)。

  • 可访问的对象：

    • 现有的call stack任何位置可以访问的对象

    • 全局对象

当一个对象可以通过引用访问到，那么会在内存中保存。浏览器的垃圾回收器仅仅会把那些不可访问的对象回收。

4. 混淆的相等判断

JavaScript自动将所有在布尔环境下的变量类型转换为布尔类型，但是可能导致bug。举例：


// 所有都是true

console.log(false == '0');

console.log(null == undefined);

console.log(" \t\r\n" == 0);

console.log('' == 0);

 

// 注意：下面两个也是

if ({}) // …

if ([]) // …

{}和[]都是对象，他们都会被转换为true。为了防止bug出现，推荐使用===和!==来做比较，因为不会隐式做类型转换。

5. 低效的DOM操作

在JavaScript中，你可以轻松操作DOM(添加、修改和删除)，但是开发者往往很低效地去操作。这会导致bug出现，因为这些操作非常耗费计算资源。为了解决这个问题，推荐使用文档碎片(Document Fragment)，如果你需要操作多个DOM元素。

6. 在for循环中错误的定义函数

举例：


var elements = document.getElementsByTagName('input');

var n = elements.length; // 假设我们有10个元素

for (var i = 0; i < n; i++) {

elements[i].onclick = function() {

console.log("元素编号#" + i);

};

}

如果我们有10个元素，那么点击任何一个元素都会显示“元素编号#10”！因为在onclick被调用的时候，for循环已经结束，因此所有的i都是10。

解法：


var elements = document.getElementsByTagName('input');

var n = elements.length; // 假设有10个元素

var makeHandler = function(num) { // outer function

return function() { // inner function

console.log("元素编号##" + num);

};

};

for (var i = 0; i < n; i++) {

elements[i].onclick = makeHandler(i+1);

}

makeHandler在for循环执行的时候立即被调用，获取到当前的值i+1，并且存储在变量num中。makeHandler返回一个函数使用num变量，该函数被绑定到元素的点击事件。

7. 通过原型错误地继承

开发者如果没能正确理解继承的原理，那么就可能写出有bug的代码：


BaseObject = function(name) {

if(typeof name !== "undefined") {

this.name = name;

} else {

this.name = 'default'

}

};

var firstObj = new BaseObject();

var secondObj = new BaseObject('unique');

 

console.log(firstObj.name); // -> 输出'default'

console.log(secondObj.name); // -> 输出'unique'

但是，如果我们做如下操作：


delete secondObj.name;

那么：


console.log(secondObj.name); // -> 输出'undefined'

而我们实际上想要的结果是打印默认的name。


BaseObject = function (name) {

if(typeof name !== "undefined") {

this.name = name;

}

};

 

BaseObject.prototype.name = 'default';

每一个BaseObject都继承name属性，并且默认值为default。此时如果secondObj的name属性被删除掉，通过原型链查找会返回正确的默认值。


var thirdObj = new BaseObject('unique');

console.log(thirdObj.name); // -> 输出'unique'

 

delete thirdObj.name;

console.log(thirdObj.name); // -> 输出'default'

8. 实例方法中的无效引用

我们来实现一个简单的构造函数用来创建对象：


var MyObject = function() {}

 

MyObject.prototype.whoAmI = function() {

console.log(this === window ? "window" : "MyObj");

};

 

var obj = new MyObject();

为了使用方便，我们定义变量whoAmI来引用obj.whoAmI：


var whoAmI = obj.whoAmI;

打印出来看看：


console.log(whoAmI);

控制台会输出：


function () {

console.log(this === window ? "window" : "MyObj");

}

现在我们来对比一下两者调用的区别：


obj.whoAmI(); // 输出"MyObj" (和期望一致)

whoAmI(); // 输出"window" (竟然输出了window)

当我们把obj.whoAmI赋值给whoAmI的时候，这个新的变量whoAmI是定义在全局下，因此this指向全局的window，而不是MyObj。如果我们真的要获取对MyObj的函数的引用，需要在其作用域下。


var MyObject = function() {}

 

MyObject.prototype.whoAmI = function() {

console.log(this === window ? "window" : "MyObj");

};

 

var obj = new MyObject();

obj.w = obj.whoAmI; // 任然在obj的作用域

 

obj.whoAmI(); // 输出"MyObj"

obj.w(); // 输出"MyObj"

9. setTimeout/setInterval函数第一个参数误用字符串

如果你将一个字符串作为setTimeout/setTimeInterval，它会被传给函数构造函数并构建一个新的函数。该操作流程很慢而且低效，并导致bug出现。


var hello = function(){

console.log("hello, fundebug !");

}

setTimeout("hello", 1000);

一个好的替代方法就是传入函数作为参数：


setInterval(logTime, 1000); // 将logTime函数传入

 

setTimeout(function() { // 传入一个匿名函数

logMessage(msgValue);

}, 1000);

10. 未能成功使用strict mode

使用strict model会增加很多限制条件来加强安全和防止某些错误的出现，如果不使用strict mode，你就相当于少了一个得力的助手帮你避免错误：

  • 更加容易debug

  • 避免不小心定义了不该定义的全局变量

  • 避免this隐式转换

  • 避免属性名字或则参数值的重复使用

  • eval()更加安全

  • 无效地使用delete会自动抛出错误

感谢各位的阅读，以上就是“JavaScript中常见的BUG及其修复方法分享”的内容了，经过本文的学习后，相信大家对JavaScript中常见的BUG及其修复方法分享这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: JavaScript中常见的BUG及其修复方法分享

本文链接: https://lsjlt.com/news/237642.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中常见的BUG及其修复方法分享
    这篇文章主要讲解了“JavaScript中常见的BUG及其修复方法分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中常见的BUG及其修复方法分享”吧！如今网站几乎100...
    99+
    2023-06-04
  • 分享常见的JavaScript测验及解答
    这篇文章主要介绍“分享常见的JavaScript测验及解答”，在日常操作中，相信很多人在分享常见的JavaScript测验及解答问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • JavaScript 错误处理中的常见陷阱：及其解决方案
    ...
    99+
    2024-04-02
  • 【总结分享】常见php变量命名错误及其解决方案
    PHP是一种非常流行的编程语言，随着网站和应用程序的需求不断增加，对于PHP开发人员仍然是非常重要的。其中一个重要的概念是变量，它是将值存储在程序中的一种方式。变量在PHP中的使用非常广泛，但是在变量名称上的错误语法可能会导致程序失败或产生...
    99+
    2023-05-14
    php
  • 总结分析Git pull 常见的错误及其解决方法
    在使用 Git 进行项目协作时，我们经常会使用 git pull 命令来同步远程仓库中的代码到本地。尽管这个命令非常简单易用，但有时候可能会遇到各种各样的错误，甚至导致项目无法正常运行。本文将分析 Git pull 常见的错误及其解决方法。...
    99+
    2023-10-22
  • JavaScript中数组常见的操作技巧分享
    这篇文章主要讲解了“JavaScript中数组常见的操作技巧分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中数组常见的操作技巧分享”...
    99+
    2024-04-02
  • 常见JSP中文乱码的场景及其解决方法
    本篇内容介绍了“常见JSP中文乱码的场景及其解决方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！JSP开发应用是，中文乱码是个比较常见的问...
    99+
    2023-06-17
  • Golang中反射的常见用法分享
    目录根据类型做不同处理标准库 json 中的示例基本类型的反射数组类型的反射chan 反射map 反射迭代反射 map 对象slice 反射string 反射interface/Po...
    99+
    2023-01-04
    Golang反射常见用法 Golang反射用法 Golang反射
  • PHP怎么修改文件路径？常见方法分享
    PHP是一种广泛使用的动态编程语言，可用于创建Web应用程序和动态网页。当我们使用PHP编写Web应用程序时，通常需要在代码中读取和操作文件。在这个过程中，我们可能会遇到需要修改文件路径的情况，这时我们需要了解如何在PHP中正确地修改文件路...
    99+
    2023-05-14
    php
  • 好程序员分享JavaScript学习笔记ES5中常见的数组方法
    　　好程序员分享JavaScript学习笔记ES5中常见的数组方法，ES5中常见的数组常用方法之前我们讲过的数组常用方法都是ES3的方法，今天来说一些ES5中的方法。indexOf· indexOf 用来找到数组中某一项的索引·&...
    99+
    2023-06-03
  • python 中的 f 字符串及其常见用法
    有个小伙伴看到之前写的Faker库相关文章中出现了f'{}' 这个东东，他问我是啥意思？ 实际上，这个是使用到了 f-string 作为格式化的方法，为此简单罗列了一下 f-string 及其常见用法，给小伙伴们作为参考。 一、f-stri...
    99+
    2023-08-31
    python 开发语言
  • C++ 函数内存分配的常见错误及其解决方法
    函数内存分配的常见错误包括：1) 裸指针悬垂；2) 内存泄漏；3) 野指针；4) 释放无效指针。解决方法：1) 使用智能指针；2) 使用raii；3) 使用内存池。 C++ 函数内存分...
    99+
    2024-04-22
    c++ 内存分配 作用域 内存占用
  • 常见的Golang注释错误及其解决方法
    Golang中常见注释错误及解决方法 引言：在编程过程中，注释是非常重要的一部分，它可以提供对代码逻辑的解释、功能的说明以及协作开发时的沟通等作用。然而，即使是注释这样简单的东西，也可能会出现一些错误。本文将...
    99+
    2024-01-29
  • Python和JavaScript编程中常见的日志错误及其解决方案
    Python和JavaScript作为现今最常用的编程语言之一，具有广泛的应用场景。在开发过程中，我们经常会遇到各种错误。其中，日志错误是最常见的问题之一。在本文中，我们将讨论。 一、Python编程中常见的日志错误 日志格式化错误 在...
    99+
    2023-08-16
    javascript 日志 编程算法
  • 常用的JavaScript方法和技巧分享
    这篇文章主要讲解了“常用的JavaScript方法和技巧分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“常用的JavaScript方法和技巧分享”吧！常用...
    99+
    2024-04-02
  • 分享几个Ecshop中二次开发的常见方法
    收货人信息的省市区设成非必选项 一般面向国外用户的ECSHOP商城，可能会有这方面的需求：【将Ecshop中收货人信息的省市区设成非必选项】，其实也就是只留一个“请选择国家”的下拉选择框。 修改相...
    99+
    2022-06-12
    Ecshop 二次开发
  • 【总结分享】golang中常见的类型转换方法
    Golang是一种强类型的编程语言，因此在处理不同类型之间的数据时，需要进行类型转换。本文将介绍Golang中常见的类型转换方法。数字类型转换在Golang中，数字类型转换是最常见的类型转换。常见的数字类型包括int、float32和flo...
    99+
    2023-05-14
    类型转换 Golang go语言
  • JavaScript原型链及常见的继承方法
    目录原型链原型链的概念原型链的问题几种常见的继承方法盗用构造函数组合继承原型式继承寄生式继承寄生组合式继承原型链 原型链的概念 在JavaScript中，每一个构造函数都有一个原型，...
    99+
    2024-04-02
  • Python中常见的反爬机制及其破解方法总结
    一、常见反爬机制及其破解方式 封禁IP，使用cookie等前面文章已经讲过 现在主要将下面的： ​ ~ 验证码 ​ —> 文字验证码 —> OCR...
    99+
    2024-04-02
  • PHP开发中常见的错误类型及其解决方法
    php开发中常见的错误类型及其解决方法：语法错误：仔细检查代码语法，确保符合php规范。运行时错误：notice：可以忽略或禁止显示。warning：需要修复代码。fatal error...
    99+
    2024-05-10
    解决方法 php错误
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作