JavaScript代码编写中各种各样的坑和填坑方法


Posted in Javascript onJune 06, 2014

坑”这个字,在此的意思是“陷阱”。由于 JavaScript “弱语言”的性质,使得其在使用过程中异常的宽松灵活,但也极为容易“中招”。这些坑往往隐藏着,所以必须擦亮双眼,才能在学习与应用 JS 的道路上走的一帆风顺。

一、全局变量

JavaScript 通过函数管理作用域。在函数内部声明的变量只在这个函数内部,函数外面不可用。另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的。

“未声明直接简单使用”,指的是不用 var 关键字来声明变量。这个我们已经非常清楚,避免造成隐式产生全局变量的方法就是声明变量尽量用 var 关键字。

可你以为用了 var 就 ok 了?来看看这个坑:

function foo() {
    var a = b = 0;
    // body...
}

也许你期望得到的是两个局部变量,但 b 却是货真价实的全局变量。why? Because 赋值运算是自右往左的 ,所以这相当于:

 
function foo() {
    var a = (b = 0);
    // body...
}

所以 b 是全局变量。

填坑:变量声明,最好一个个来,别搞批发~_~;

二、变量声明

先来看坑:

 
myName = "global";function foo() {
    alert(myName);
    var myName = "local";
    alert(myName);
}
foo();

乍看上去,我们预计期望两次 alert 的结果分别为 “global” 与 “local”,但真实的结果是 “undefined” 与 “local”。why? Because 变量在同一作用域(同一函数)中,声明都是被提至作用域顶部先进行解析的。

所以以上代码片段的执行行为可能就像这样:

function foo() {
    var myName;
    alert(myName); // "undefined"
    myName = "local";
    alert(myName); // "local"
}

用另一个坑来测试下你是否真的理解了预解析:
 
if (!("a" in window)) {
    var a = 1;
}alert(a);

a 变量的声明被提前到了代码顶端,此时还未赋值。接下来进入 if 语句,判断条件中 "a" in window 已成立(a 已被声明为全局变量),所以判断语句计算结果为 false,直接就跳出 if 语句了,所以 a 的值为 undefined。
var a; // "undefined"
console.log("a" in window); // trueif (!("a" in window)) {
    var a = 1; // 不执行
}
alert(a); // "undefined"

填坑:变量声明,最好手动置于作用域顶部,对于无法当下赋值的变量,可采取先声明后赋值的手法。

三、函数声明

函数声明也是被提前至作用域顶部,先于任何表达式和语句被解析和求值的

 
alert(typeof foo); // "function"function foo() {
    // body...
}

可以对比一下:
alert(typeof foo); // "undefined"var foo = function () {
    // body...
};

明白了这个道理的你,是否还会踩以下的坑呢?
 
function test() {
    alert("1");
}test();
function test() {
    alert("2");
}
test();

运行以上代码片段,看到的两次弹窗显示的都是 “2”,为什么不是分别为 “1” 和 “2” 呢?很简单,test 的声明先于 test() 被解析,由于后者覆盖前者,所以两次执行的结果都是 “2”。

填坑:多数情况下,我用函数表达式来代替函数声明,特别是在一些语句块中。

四、函数表达式

先看命名函数表达式,理所当然,就是它得有名字,例如:

var bar = function foo() {
    // body...
};

要注意的是:函数名只对其函数内部可见。如以下坑:
 
var bar = function foo() {
    foo(); // 正常运行
};foo(); // 出错:ReferenceError

填坑:尽量少用命名函数表达式(除了一些递归以及 debug 的用途),切勿将函数名使用于外部。

五、函数的自执行

对于函数表达式,可以通过后面加上 () 自执行,而且可在括号中传递参数,而函数声明不可以。坑:

 
// (1) 这只是一个分组操作符,不是函数调用!
// 所以这里函数未被执行,依旧是个声明
function foo(x) {
  alert(x);
}(1);

以下代码片段分别执行都弹窗显示 “1”,因为在 (1) 之前,都为函数表达式,所以这里的 ()非分组操作符,而为运算符,表示调用执行。
// 标准的匿名函数表达式
var bar = function foo(x) {
  alert(x);
}(1);// 前面的 () 将 function 声明转化为了表达式
(function foo(x) {
  alert(x);
})(1);
// 整个 () 内为表达式
(function foo(x) {
  alert(x);
}(1));
// new 表达式
new function foo(x) {
  alert(x);
}(1);
// &&, ||, !, +, -, ~ 等操作符(还有逗号),在函数表达式和函数声明上消除歧义
// 所以一旦解析器知道其中一个已经是表达式了,其它的也都默认为表达式了
true && function foo(x) {
  alert(x);
}(1);

填坑:这个坑的关键在于,弄清楚形形色色函数表达式的实质。

六、循环中的闭包

以下演示的是一个常见的坑:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>when clicking links below, show the number of its sequence</h3>
    <ul>
        <li><a href="#">link #0</a></li>
        <li><a href="#">link #1</a></li>
        <li><a href="#">link #2</a></li>
        <li><a href="#">link #3</a></li>
        <li><a href="#">link #4</a></li>
    </ul>
</body>
</html>
var links = document.getElementsByTagName("ul")[0].getElementsByTagName("a");for (var i = 0, l = links.length; i < l; i++) {
    links[i].onclick = function (e) {
        e.preventDefault();
        alert("You click link #" + i);
    }        
}

我们预期当点击第 i 个链接时,得到此序列索引 i 的值,可实际无论点击哪个链接,得到的都是 i 在循环后的最终结果:”5”。

解释一下原因:当 alert 被调用时,for 循环内的匿名函数表达式,保持了对外部变量 i的引用(闭包),此时循环已结束,i 的值被修改为 “5”。

填坑:为了得到想要的结果,需要在每次循环中创建变量 i 的拷贝。以下演示正确的做法:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>when clicking links below, show the number of its sequence</h3>
    <ul>
        <li><a href="#">link #0</a></li>
        <li><a href="#">link #1</a></li>
        <li><a href="#">link #2</a></li>
        <li><a href="#">link #3</a></li>
        <li><a href="#">link #4</a></li>
    </ul>
</body>
</html>
var links = document.getElementsByTagName(“ul”)[0].getElementsByTagName(“a”);
for (var i = 0, l = links.length; i < l; i++) {
    links[i].onclick = (function (index) {
        return function (e) {
            e.preventDefault();
            alert("You click link #" + index);
        }
    })(i);
}

可以看到,(function () { ... })() 的形式,就是上文提到的 函数的自执行 ,i 作为参数传给了 index,alert 再次执行时,它就拥有了对 index 的引用,此时这个值是不会被循环改变的。当然,明白了其原理后,你也可以这样写:

for (var i = 0, l = links.length; i < l; i++) {
    (function (index) {
        links[i].onclick = function (e) {
            e.preventDefault();
            alert("You click link #" + index);
        }
    })(i);
}

It works too.

Javascript 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
JS触摸与手势事件详解
May 09 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
vue实现div单选多选功能
Jul 16 Javascript
按钮接受回车事件的三种实现方法
Jun 06 #Javascript
jquery统计用户选中的复选框的个数
Jun 06 #Javascript
javascript中的throttle和debounce浅析
Jun 06 #Javascript
单击某一段文字改写文本颜色
Jun 06 #Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 #Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 #Javascript
jQuery插件开发详细教程
Jun 06 #Javascript
You might like
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
js实现导航跟随效果
2018/11/17 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
Python新手实现2048小游戏
2015/03/31 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python中正则表达式的使用方法
2018/02/25 Python
python书籍信息爬虫实例
2018/03/19 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
24式加速你的Python(小结)
2019/06/13 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
优秀广告词大全
2014/03/19 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
违纪学生保证书
2015/02/27 职场文书
2016年教师节慰问信
2015/12/01 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
如何正确理解python装饰器
2021/06/15 Python