1.object最后一个逗号
定义object直接量或json,最后一个逗号多写了,在ie下会报错,高级浏览器则不会,给只使用chrome调试的同学敲个警钟。踩了无数次这个坑了。
 
2.自动加分号
 
自动加分号的机制把很多人惯坏了,就常常不写分号,但是自动加分号的机制并不是无条件的,如果语句以括号开始,就不会自动加分号,这个打包的时候经常遇到,两个js都没问题,但是合并成一个就有问题,原因是前一个js文件结尾没写分号,下一个文件的开始字符是一个大闭包,编译器会认为文件1的最后一行和文件2的第一行是同一个语句没结束,就会产生语法错误。为了独善其身,各扫门前雪,很多同学都习惯在自己的闭包之前加分号,所以看到这个不要很奇怪,只是在做防御性编程。
;(function (){
 
})()
3.this的引用不确定
call和apply可以绑定this,另外在对象方法中再定义闭包函数,闭包函数直接调用时this是指向window的,所以一般的方法是定义一个self或that变量把this存起来,利用闭包作用域访问暂存的变量。
var MyObject={
Name:"hello",
test:function test(){
  var self=this;
   (function (){
     console.log(this.Name); //undeinfed
    console.log(self.Name);//hello
   })()
}
}
MyObject.test()
 
另外注意一点,我这里Name大写了,如果小写的name,第一个console.log输出一个空字符串,原因是引用到window.name了,window.name是一个神奇的存在,它的值可以存储在浏览器进程级别,刷新浏览器也不会消失。
 
4.replace默认只替换一次
用正则,不解释
 
5.parseInt的进制
如果值是0开始的,默认会按8进制解析,这个问题IE8以上已经修正,所以要用低版本IE才能测出这个问题,当初做日期控件时候踩到过这个坑,当时还是IE6的时代啊。
 
6.for..in会遍历原型
这也是为啥绝对禁止改写Object.prototype,如果哪位同学不小心手贱改了Object.protype就会殃及池鱼了,不是每个人在写for..in时都有习惯去用hasOwnProperty检则是否原型属性的。
 
 
7.attachEvent的this绑定到window
IE绑定事件的时候没把this指向到当前的dom元素,如果自己封装事件绑定函数可以用apply传进去,当然最好还是用jquery。
 
 
8.在循环体中定义闭包的作用域问题
 

var links=document.links;

 for(var i=0;i<links.length;i++){ 
   links[i].onclick=function(){ 
     alert(i); 
   } 
}
 
在onclick的事件中,alert(i);运行的时候查找当前作用域没有i,去上一级的变量对象中查找i,因为当按钮点击时,循环早已执行完,所以上一层的变量对象中i的值是最后一次循环的值。
 
解决方法是多定义一层闭包并立即执行,在每一次循环都生成一个独立的闭包作用域把i值初始化进去。
 
var links=document.links;
 for(var i=0;i<links.length;i++){ 
   (function (i){
   links[i].onclick=function(){ 
     alert(i); 
   } 
   })(i)
}

 
9.不加var变量会声明到全局window
漏写了var 就会定义到window,由于编译器会自动查找作用域链,对程序的功能无影响,所以很难发现这个问题,会污染全局全量,可能就要jslint之类的review工具来检查了。
 
10.函数的提前声明与var的提前声明
 
函数不管在哪里声明,都会提前到当前作用域的最前面,而且是已经赋过值的(函数表达式则不是),var 声明的变量会提前到最前面,但是初始值是undefined,赋值语句要等执行到那一行才会赋值。
 
来看这个例子

function fn(a) {
console.log("a第一次值:",a); //输出值是function a,因为函数提前定义了
var a = 2;
  function a() { //定义一个空函数a

}
console.log("a第一次值:",a);  //输出值为2,第二行代码重新给a赋值了
}
fn("hello");

 
11.arguments不是数组
arguments虽然看起来像数组,但是千万不要当数据来push,pop啊,你不知道arguments还有callee,caller属性吗,它不是数组,也没有从Array.prototype继承,
 
function test(){
console.log(arguments instanceof Array);//false
}
test()
 
如果要当数组使用就先转换成数组再用吧。
 
12 操作符的隐式转换
 
双等号,+号都会隐式转换,具体的转换规则很算杂,有一个类似乘法口决表的表格。
 
13 日期对象的month从0开始
 
月份又不是数组,不知为啥从0开始,year和date又是从1开始的,同时日期的年月日,感觉不是一个妈生的,实现不一致啊,不符合正常人的思维,每次使用时都要+1
 
new Date().getMonth()+1
 
14 getYear与getFullYear
getYear得到的是从1970年开始的日期差值,但是在IE9以下getYear得到的却是完整年份,如果你只在IE9下写程序测试,到chrome下运行结果完全不对了,反之也是一样,今年2016年得到的getYear()是116,但是ie9以下却能得到2016。任何情况下都不要用getFullYear吧,getYear就是个多余的错误设计。
 

那些年我们一起踩过的坑(javascript常见的陷阱)的更多相关文章

  1. Dcloud开发webApp踩过的坑

    Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...

  2. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  3. 【转载】Fragment 全解析(1):那些年踩过的坑

    http://www.jianshu.com/p/d9143a92ad94 Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使 ...

  4. 使用vue开发项目需要注意的问题和可能踩到的坑

    最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...

  5. JavaScript 常见使用误区

    JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...

  6. Selenium与PhantomJS踩过的坑

    Selenium与PhantomJS踩过的坑 Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动化操作, ...

  7. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  8. 项目中踩过的坑之-sessionStorage

    总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...

  9. "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"

    欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...

随机推荐

  1. Codeforces 1249E By Elevator or Stairs? 题解

    这题其实和 NIKKEI 2019-2-D Shortest Path on a Line 差不多的啦,都是一种最短路的变形,把多个点和边关联了起来. 题面 你要从一楼到 \(n\) 楼去,每层楼可以 ...

  2. Python之第一次自夸

    有一个好玩的代码 import win32com.client g = win32com.client.Dispatch("SAPI.SPVOICE") g.Speak(" ...

  3. 【快学springboot】5.全局异常捕获,异常流处理业务逻辑

    前言 上一篇文章说到,参数校验,往往需要和全局的异常拦截器来配套使用,使得返回的数据结构永远是保持一致的.参数异常springboot默认的返回结构: { "timestamp": ...

  4. zabbix server 安装部署

    一:安装zabbix服务端 1.部署准备 命令:iptables -F     #关闭防火墙命令:systemctl stop firewalld    #关闭防火墙 设置解析,自建yum源 命令:c ...

  5. 多进程之multiprocessing模块、守护进程、互斥锁

    目录 1. multiprocessing 模块介绍 2. Process类的介绍 3. Process类的使用 4. 守护进程 5. 进程同步(锁) 1. multiprocessing 模块介绍 ...

  6. RCTF crypto100(1)

    题面是一个文件,里面是用base64加密的字符串,如下所示: IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI ...

  7. ROS学习笔记5-理解节点(Node)

    本文内容来源于:http://wiki.ros.org/ROS/Tutorials/UnderstandingNodes 图(Graph)概念概览 节点(Nodes):一个节点是ROS下面一个可执行程 ...

  8. sdfsdsf

    1 $('.advert-title').each(function(){ 2 var TXTlength = $(this).text().length; // 当前文本的长度 3 if(TXTle ...

  9. eclipse js文件无法保存错误

    错误信息如下 Save Failedjdk.nashorn.internal.runtime.ECMAException.getEcmaError()Ljava/lang/Object; 网上多番查找 ...

  10. 剑指offer 把数组排成最小的数 atoi和itoa,pow

    pow(x,y)在#include<math.h>文件中,计算x的y次方. C++引入头文件:#include <stdlib.h> 或者 #include <cstdl ...