10个JavaScript普遍BUG及修补方式

  • 栏目:公司新闻 时间:2020-10-20 10:17 分享新闻到:
<返回列表


10个JavaScript普遍BUG及修补方式


短视頻,自新闻媒体,达人种草1站服务

现如今网站基本上100%应用JavaScript。JavaScript看上去是1门10分简易的語言,但是客观事实其实不这般。它有许多非常容易被弄错的细节,1不留意就致使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的引入正确

};

2. 和块功效域(block scope)相关的BUG

在大多数数程序流程語言中,每个涵数块都有1个单独的新的功效域,可是在JavaScript中其实不是。比如:

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

/* ... */

}

console.log(i); // 会輸出甚么呢?

一般在这类状况下,启用 console.log() 会輸出 undefined 或则出错。但是呢,这里会輸出 10 。在JavaScript中,即便for循环系统早已完毕,自变量 i 仍然存在,而且纪录最终的值。一些开发设计者会忘掉这1点,随后致使很多bug。大家可使用 let 而并不是 for 来避免这1难题。

3. 运行内存泄露

你必须监管运行内存应用量,由于泄漏很难防止。运行内存泄漏将会因为引入不存在的目标或则循环系统引入致使。

怎样防止:关心目标的可浏览性(reachability)。

可浏览的目标:

现有的call stack任何部位能够浏览的目标

全局性目标

当1个目标能够根据引入浏览到,那末会在运行内存中储存。访问器的废弃物收购器仅仅会把那些不能浏览的目标收购。

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元素。

广告宣传: 你的网上编码真的沒有BUG吗?欢迎完全免费应用 Fundebug !大家能够协助您第1時间发现BUG!

6. 在for循环系统中不正确的界定涵数

举例:

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

var n = elements.length; // 假定大家有10个元素

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

elements[i].onclick = function() {

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

};

}

假如大家有10个元素,那末点一下任何1个元素都会显示信息 元素序号#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 i++) {

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

}

makeHandler 在for循环系统实行的情况下马上被启用,获得到当今的值 i+1 ,而且储存在自变量 num中。 makeHandler 回到1个涵数应用 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. 案例方式中的失效引入

大家来完成1个简易的结构涵数用来建立目标:

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");

}

如今大家来比照1下二者启用的差别:

obj.whoAmI(); // 輸出"MyObj" (和期待1致)

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涵数第1个主要参数误用标识符串

假如你将1个标识符串做为setTimeout/setTimeInterval,它会被发送给涵数结构涵数并搭建1个新的涵数。该实际操作步骤很慢并且低效,并致使bug出現。

var hello = function(){

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

}

setTimeout("hello", 1000);

1个好的取代方式便是传入涵数做为主要参数:

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

setTimeout(function() { // 传入1个密名涵数

logMessage(msgValue);

}, 1000);

10. 未能取得成功应用strict mode

应用strict model会提升许多限定标准来提升安全性和避免一些不正确的出現,假如不应用 strict mode ,你就非常于少了1个得力的小助手帮你防止不正确:

更为非常容易debug

防止一不小心界定了不应该界定的全局性自变量

防止this隐式变换

防止特性姓名或则主要参数值的反复应用

eval()更为安全性

失效地应用delete会全自动抛错误误

版权申明:

转载时请注明作者Fundebug和本文详细地址:


分享新闻到:

更多阅读

废弃物內容会变成1个网站的“内伤”

公司新闻 2020-11-26
短视頻,自新闻媒体,达人种草1站服务我看到太多的SEO实际操作者1般只干两件事,那便是升级...
查看全文

“加上至百度搜索主页”按钮1些疑虑的本

公司新闻 2020-11-26
短视頻,自新闻媒体,达人种草1站服务1不留意,百度搜索居然在1些站点下面有了加上至百度...
查看全文

南汇企业网站建设企业

公司新闻 2020-11-26
南汇公司企业网站建设公司...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 制作图片 顽兔抠图哪里下载 html网站地图 xml网站地图 免抠图 在线抠图 区域网站地图 区域网站地图 凡科微商城 点点软件园

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号