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. Sublime设置html头部

    1.Ctrl + N,新建一个文档:2.Ctrl + Shift + P,打开命令模式,再输入 sshtml 进行模糊匹配,将语法切换到html模式:3.输入 !,再按下 Tab键或者 Ctrl + ...

  2. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  3. 设计模式---JDK动态代理和CGLIB代理

    Cglig代理设计模式 /*测试类*/ package cglibProxy; import org.junit.Test; public class TestCglib { @Test public ...

  4. 【转】stm32 IAP升级程序

      一.什么是IAP,为什么要IAP       IAP即为In Application Programming(在应用中编程),一般情况下,以STM32F10x系列芯片为主控制器的设备在出厂时就已经 ...

  5. 微信小程序request请求实例,网络请求。

    最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参 ...

  6. Day9 - J - 吉哥系列故事——恨7不成妻 HDU - 4507

    单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥观察了214和77这两个数,发现: 2+1+4=7 7+7=7*2 77=7 ...

  7. centos搭建单节点hadoop

    由于本地机器资源有限,搭建单节点hadoop供开发.测试. 1.安装java mkdir /usr/local/java cd /usr/local/java tar zxvf jdk-8u181-l ...

  8. ubuntu18.04 LAMP DVWA

    一.基本擦作: sudo apt-get install lamp-server^ sudo chmod 777 /var/www #也有可能是/var/www/html,访问127.0.0.1验证是 ...

  9. 侧边栏下拉时箭头的旋转动画(treeView控件)

    //点击菜单时箭头旋转 let treeView = document.getElementsByClassName("treeview");//let解决闭包问题 let las ...

  10. arm linux 移植 MQTT (paho、mosquitto)

    前言 我们在这里做2件事情: 1)编译 paho.mqtt.mosquitto 2个开源项目的c版本库(mosquitto库没有用上) 2)编译好 依赖 paho.mqtt的库编写例程 + mosqu ...