JavaScript中日常收集常見(jiàn)的10種錯(cuò)誤(推薦)
1 對(duì)于this關(guān)鍵詞的不正確使用
Game.prototype.restart = function () {
this.clearLocalStorage();
this.timer = setTimeout (function() {
this.clearBoard();
}, 0);
};
運(yùn)行上面的代碼將會(huì)出現(xiàn)如下錯(cuò)誤：
uncaught typeError：undefined is not a function
為什么會(huì)有這個(gè)錯(cuò)？ this是指代當(dāng)前對(duì)象本身，this的調(diào)用和它所在的環(huán)境密切相關(guān)。上面的錯(cuò)誤是因?yàn)樵谡{(diào)用setTimeout函數(shù)的時(shí)候，實(shí)際調(diào)用的是window.setTimeout，而在window中并沒(méi)有clearBoard();這個(gè)方法；
下面提供兩種解決的方法。
1，將當(dāng)前對(duì)象存儲(chǔ)在一個(gè)變量中，這樣可以在不同的環(huán)境被繼承。
Game.prototype.restart = function() {
this.clearLocalStorage();
var self = this;
this.timer = setTimeout(function(){
self.clearBoard(); }, 0);
}; //改變了作用的對(duì)象
2，使用bind()方法， 不過(guò)這個(gè)相比上一種會(huì)復(fù)雜，bind方法官方解釋: msdn.microsoft.com/zh-cn/library/ff841995
Game.prototype.restart = function () {
this.clearLocalStorage();
this.timer = setTimeout(this.reset.bind(this)),
};
Game.prototype.reset = function() {
this.clearBoard();
};
2 傳統(tǒng)編程語(yǔ)言的生命周期誤區(qū)
在js中變量的生存周期與其他語(yǔ)言不同，舉個(gè)例子
for (var i=0; i<10;i++){
/* */
}
console.log(i); //并不會(huì)提示 未定義，結(jié)果是10
在js中這種現(xiàn)象叫：variable hoisting(聲明提前)
可以使用let關(guān)鍵字。
3 內(nèi)存泄漏
在js中無(wú)法避免會(huì)有內(nèi)存泄漏，內(nèi)存泄漏：占用的內(nèi)存，但是沒(méi)有用也不能及時(shí)回收的內(nèi)存。
例如以下函數(shù)：
var theThing = null;
var replaceThing = function() {
var priorThing = theThing;
var unused = function() {
if (priorThing) {
console.log(‘hi');
};
};
theThing = {
longStr: new Array(1000000).join(‘*'),
someMethod: function () {
console.log(someMessage);
}
}
setInterval(replaceThing, 1000);
如果執(zhí)行這段代碼，會(huì)造成大量的內(nèi)存泄漏，光靠garbage collector是無(wú)法完成回收的，代碼中有個(gè)創(chuàng)建數(shù)組對(duì)象的方法在一個(gè)閉包里，這個(gè)閉包對(duì)象又在另一個(gè)閉包中引用，，在js語(yǔ)法中規(guī)定，在閉包中引用閉包外部變量，閉包結(jié)束時(shí)對(duì)此對(duì)象無(wú)法回收。
4 比較運(yùn)算符
console.log(false == ‘0'); // true console.log(null == undefinded); //true console.log(” \t\r\n” == 0);
以上所述是小編給大家介紹的JavaScript中日常收集常見(jiàn)的10種錯(cuò)誤(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了微信小程序動(dòng)畫效果的實(shí)現(xiàn)方法與原理解析。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
javascript同頁(yè)面多次調(diào)用彈出層具體實(shí)例代碼
一個(gè)在同一個(gè)頁(yè)面可多次調(diào)用的javascript彈出層效果，有需要的同學(xué)可以參考一下2013-08-08
這篇文章主要為大家介紹了webpack打包的3種hash值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
一文詳解Javascript內(nèi)存機(jī)制與垃圾回收
這篇文章主要給大家詳細(xì)介紹了Javascript的內(nèi)存機(jī)制與垃圾回收，文中又詳細(xì)的代碼示例，對(duì)我們學(xué)習(xí)Javascript有一定的幫助，需要的同學(xué)可以借鑒閱讀2023-06-06
對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解
今天小編就為大家分享一篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
淺談JS中的!=、== 、!==、===的用法和區(qū)別
下面小編就為大家?guī)?lái)一篇淺談JS中的!=、== 、!==、===的用法和區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
ESLint是一個(gè)流行的JavaScript代碼檢查工具,它可以幫助團(tuán)隊(duì)確保代碼質(zhì)量,避免常見(jiàn)的錯(cuò)誤和格式問(wèn)題,這篇文章主要給大家介紹了關(guān)于前端技巧之ESLint忽略檢查行和文件的相關(guān)資料,需要的朋友可以參考下2023-11-11
詳解Bootstrap創(chuàng)建表單的三種格式（一）
在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單，對(duì)bootstrap 表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-03-03