湖南竞网做网站好吗,wordpress下载页插件下载,快手流量推广软件免费,修改WordPress网站[Java教程]十个JavaScript中易犯的小错误#xff0c;你中了几枪#xff1f;0 2015-06-01 12:00:19序言在今天#xff0c;JavaScript已经成为了网页编辑的核心。尤其是过去的几年#xff0c;互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道你中了几枪0 2015-06-01 12:00:19序言在今天JavaScript已经成为了网页编辑的核心。尤其是过去的几年互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道很多人会觉得js很简单。确实对于很多有经验的工程师或者甚至是初学者而言实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScript的许多细节规定会让你的网页出现很多意想不到的bug搞懂这些bug对于成为一位有经验的JS开发者很重要。常见错误一对于this关键词的不正确引用我曾经听一位喜剧演员说过“我从未在这里因为我不清楚这里是哪里是除了那里之外的地方吗”这句话或多或少地暗喻了在js开发中开发者对于this关键字的使用误区。This指代的是什么它和日常英语口语中的this是一个意思吗随着近些年js编程不断地复杂化功能多样化对于一个程序结构的内部指引、引用也逐渐变多起来下面让我们一起来看这一段代码Game.prototype.restart function () { this.clearLocalStorage(); this.timer setTimeout(function(){ this.clearBoard(); }, 0); };运行上面的代码将会出现如下错误Uncaught TypeError: undefined is not a function这是为什么this的调用和它所在的环境密切相关。之所以会出现上面的错误是因为当你在调用 setTimeout()函数的时候, 你实际调用的是window.setTimeout(). 因此在 setTimeout() 定义的函数其实是在window背景下定义的而window中并没有 clearBoard() 这个函数方法。下面提供两种解决方案。第一种比较简单直接的方法便是把this存储到一个变量当中这样他就可以在不同的环境背景中被继承下来Game.prototype.restart function () { this.clearLocalStorage(); var self this; this.timer setTimeout(function(){ self.clearBoard();}, 0); };第二种方法便是用bind()的方法不过这个相比上一种要复杂一些对于不熟悉bind()的同学可以在微软官方查看它的使用方法https://msdn.microsoft.com/zh-cn/library/ff841995Game.prototype.restart function () { this.clearLocalStorage(); this.timer setTimeout(this.reset.bind(this), 0); }; Game.prototype.reset function(){ this.clearBoard();};上面的例子中两个this均指代的是Game.prototype。常见错误二传统编程语言的生命周期误区另一种易犯的错误便是带着其他编程语言的思维认为在JS中也存在生命周期这么一说。请看下面的代码for (var i 0; i 10; i) { /* ... */ } console.log(i);如果你认为在运行console.log() 时肯定会报出 undefined 错误那么你就大错特错了。我会告诉你其实它会返回 10吗。当然在许多其他语言当中遇到这样的代码肯定会报错。因为i明显已经超越了它的生命周期。在for中定义的变量在循环结束后它的生命也就结束了。但是在js中i的生命还会继续。这种现象叫做 variable hoisting。而如果我们想要实现和其他语言一样的在特定逻辑模块中具有生命周期的变量可以用let关键字。常见错误三内存泄露内存泄露在js变成中几乎是一个无法避免的问题。如果不是特别细心的话在最后的检查过程中肯定会出现各种内存泄露问题。下面我们就来举例说明一下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);如果运行上面的代码你会发现你已经造成了大量的内存泄露每秒泄露1M的内存显然光靠GC(垃圾回收器)是无法帮助你的了。由上面的代码来看似乎是longstr在每次replaceThing调用的时候都没有得到回收。这是为什么呢每一个theThing结构都含有一个longstr结构列表。每一秒当我们调用 replaceThing, 它就会把当前的指向传递给 priorThing. 但是到这里我们也会看到并没有什么问题因为 priorThing 每回也是先解开上次函数的指向才会接受新的赋值。并且所有的这一切都是发生在 replaceThing 函数体当中按常理来说当函数体结束之后函数中的本地变量也将会被GC回收也就不会出现内存泄露的问题了但是为什么会出现上面的错误呢这是因为longstr的定义是在一个闭包中进行的而它又被其他的闭包所引用js规定在闭包中引入闭包外部的变量时当闭包结束时此对象无法被垃圾回收(GC)。关于在JS中的内存泄露问题可以查看http://javascript.info/tutorial/memory-leaks#memory-management-in-javascript常见错误四:比较运算符JavaScript中一个比较便捷的地方便是它可以给每一个在比较运算的结果变量强行转化成布尔类型。但是从另一方面来考虑有时候它也会为我们带来很多不便下面的这些例子便是一些一直困扰很多程序员的代码实例console.log(false 0); console.log(null undefined); console.log( \t\r\n 0); console.log( 0); // And these do too! if ({}) // ... if ([]) // ...最后两行的代码虽然条件判断为空(经常会被人误认为转化为false)但是其实不管是{ }还是[ ]都是一个实体类而任何的类其实都会转化为true。就像这些例子所展示的那样其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 和 ! 来替代 和 ! 以此来避免发生强制类型转化。. 和! 的用法和之前的 和 ! 一样只不过他们不会发生类型强制转换。另外需要注意的一点是当任何值与 NaN 比较的时候甚至包括他自己结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:console.log(NaN NaN); // false console.log(NaN NaN); // false console.log(isNaN(NaN)); // true常见错误五低效的DOM操作js中的DOM基本操作非常简单但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments var div document.getElementsByTagName(my_div); var fragment document.createDocumentFragment(); for (var e 0; e elems.length; e) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true));直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来再把它们全部添加上去就会高效很多。常见错误6:在for循环中的不正确函数调用请大家看以下代码var elements document.getElementsByTagName(input);var n elements.length; for (var i 0; i n; i) { elements[i].onclick function() { console.log(This is element # i); }; }运行以上代码如果页面上有10个按钮的话点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。这是因为当点击事件被触发的时候for循环早已执行完毕i的值也已经从0变成了。我们可以通过下面这段代码来实现真正正确的效果var elements document.getElementsByTagName(input); var n elements.length; var makeHandler function(num) { // outer function return function() { console.log(This is element # num); }; }; for (var i 0; i n; i) { elements[i].onclick makeHandler(i1); }在这个版本的代码中 makeHandler 在每回循环的时候都会被立即执行把i1传递给变量num。外面的函数返回里面的函数而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。常见错误7:原型继承问题很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明BaseObject function(name) { if(typeof name ! undefined) { this.name name; } else { this.name default } };这段代码看起来很简单。如果你有name值则使用它。如果没有则使用 ‘default’:var firstObj new BaseObject(); var secondObj new BaseObject(unique); console.log(firstObj.name); // - 结果是default console.log(secondObj.name); // - 结果是 unique但是如果我们执行delete语句呢:delete secondObj.name;我们会得到:console.log(secondObj.name); // - 结果是 undefined但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单如果我们能够使用原型继承的话:BaseObject function (name) { if(typeof name ! undefined) { this.name name; } }; BaseObject.prototype.name default;在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 default.。这时如果构造函数被调用时没有参数则会自动设置为 default。相同地如果name 属性被从BaseObject移出系统将会自动寻找原型链并且获得 default值var thirdObj new BaseObject(unique); console.log(thirdObj.name); 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 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():var whoAmI obj.whoAmI;接下来为了确保一切都如我们所预测的进行我们可以将 whoAmI 打印出来:console.log(whoAmI);结果是function () { console.log(this window ? window : MyObj); }没有错误但是现在我们来查看一下两种引用的方法obj.whoAmI(); // 输出 MyObj (as expected) whoAmI(); // 输出 window (uh-oh!)哪里出错了呢原理其实和上面的第二个常见错误一样当我们执行 var whoAmI obj.whoAmI;的时候新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj正确的编码方式应该是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(); // 输出 MyObj (as expected) obj.w(); // 输出 MyObj (as expected)常见错误9:用字符串作为setTimeout 或者 setInterval的第一个参数首先我们要声明用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说当你用字符串的时候它会被传进构造函数并且重新调用另一个函数。这样会拖慢程序的进度。setInterval(logTime(), 1000); setTimeout(logMessage( msgValue ), 1000);另一种方法是直接将函数作为参数传递进去setInterval(logTime, 1000); setTimeout(function() { logMessage(msgValue); }, 1000);常见错误10:忽略 “strict mode”的作用“strict mode” 是一种更加严格的代码检查机制并且会让你的代码更加安全。当然不选择这个模式并不意味着是一个错误但是使用这个模式可以确保你的代码更加准确无误。下面我们总结几条“strict mode”的优势1. 让Debug更加容易在正常模式下很多错误都会被忽视掉“strict mode”模式会让Debug极致更加严谨。2. 防止默认的全局变量在正常模式下给一个为经过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下我们取消了这个默认机制。3. 取消this的默认转换在正常模式下给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下我们取消了这个默认机制。4. 防止重复的变量声明和参数声明在strict模式下进行重复的变量声明会被抱错如(e.g., var object {foo: bar, foo: baz};) 同时在函数声明中重复使用同一个参数名称也会报错如 (e.g., function foo(val1, val2, val1){}),5. 让eval()函数更加安全。6. 当遇到无效的delete指令的事后报错delete指令不能对类中未有的属性执行在正常情况下这种情况只是默默地忽视掉而在strict模式是会报错的。结语正如和其他的技术语言一样你对JavaScript了解的的越深知道它是如何运作为什么这样运作你才会熟练地掌握并且运用这门语言。相反地如果你缺少对JS模式的认知的话你就会碰上很多的问题。了解JS的一些细节上的语法或者功能将会有助于你提高编程的效率减少变成中遇到的问题。本文网址http://www.shaoqun.com/a/119118.html*特别声明以上内容来自于网络收集著作权属原作者所有如有侵权请联系我们adminshaoqun.com。JavaScript0
