1 链式赋值的陷阱

   1:  function func(){2:      var innerVar = globalVar = 20;    3:  }4:  func();5:  console.log(typeof globalVar);    //输出结果为?

上面最后的输出结果是?相信不少人会毫不犹豫地说undefined,确定?

真相是:number

原因:从右至左操作符的优先级。首先,优先级较高的是表达式b=0,此时b未经声明。表达式的返回值为0,它被赋给var声明的局部变量a,如以下代码所示

var a = (b = 0);

建议:对链式赋值的所以变量都进行声明,再进行赋值

   1:  function foo() {
   2:      var a, b;
   3:      a = b = 20;    //都是局部变量
   4:  }

2 变量释放时的副作用

隐含全局变量与明确定义的全局变量有细微的不同,不同之处在于能否使用delete操作符撤销变量

  • 使用var创建的全局变量(这类变量在函数外部创建),不能删除
  • 不使用var创建的隐含全局变量(尽管它是在函数内部创建),可以删除

这表明隐含全局变量严格来讲不是真正的变量,而是全局对象的属性。属性可以通过delete操作符删除,但变量不可以

//定义三个全局变量
var global_var = 1;
global_novar = 2;  //反模式
(function(){global_fromfunc = 3;  //反模式
})();//企图删除
delete global_var;  //false
delete global_novar;  //true
delete global_fromfunc;  //true//测试删除情况
typeof global_var;  //'number'
typeof global_novar;  //'undefined'
typeof global_fromfunc;  //'undefined'

在ES5 strict模式中,为没有声明的变量赋值会抛出错误

3 for-in的陷阱

   1:  function func(){2:      var innerVar = globalVar = 20;    3:  }4:  func();5:  console.log(typeof globalVar);    //输出结果为?

将上述代码稍微修改下又如何呢?
   1:  var person = {
   2:      name: 'casper',
   3:      age: 11
   4:  };
   5:  Object.prototype.getName = function(){};  
   6:  for(var key in person){
   7:      console.log(key);
   8:  }

输出结果变成:

输出:name输出:age输出:getName

建议:不要增加内置对象的原型,除非必要,同时需在团队内进行良好的沟通,确保其他团队成员不会因此而遇到一些奇怪的错误

4 注意eval与new Function之间的差别

  1. eval()会影响到作用域
  2. new Function()中的代码将在局部函数空间中运行,因此代码中任何采用var定义的变量不会自动成为全局变量
  3. 无论在哪里执行Function,它都仅能看到全局作用域
   1:  console.log(typeof un);  //'undefined'
   2:  console.log(typeof deux);  //'undefined'
   3:  console.log(typeof trois);  //'undefined'
   4:   
   5:  var jsstring = "var un  = 1; console.log(un);";
   6:  eval(jsstring);  //logs "1"
   7:   
   8:  jsstring = "var deux = 2; console.log(deux);";
   9:  new Function(jstring)();  //logs "2"
  10:   
  11:  jsstring = "var trois = 3; console.log(trois);";
  12:  (function(){
  13:      eval(jsstring);
  14:  })();  //logs  "3"
  15:   
  16:  console.log(un);  //'number'
  17:  console.log(typeof deux);  //'number'
  18:  console.log(typeof trois);  //'undefined'

从上面代码示例可以很清楚地看出前两点,关于第三点,请看下面代码示例:

   1:  (function(){
   2:      var local = 1;
   3:      eval("local = 2; console.log(local);");  //logs 3
   4:      console.log(local);  //logs 3
   5:  })();
   6:   
   7:  (function(){
   8:      var local = 1;
   9:      new Function("console.log(typeof local);")();  //logs 'undefined'
  10:  })();

本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3164261.html,如需转载请自行联系原作者

《javascript模式》 容易踩中的那些坑相关推荐

  1. VCSA6.7-VCSA7.0部署经常踩中的坑【 两个 】

    VCSA6.7-VCSA7.0部署经常踩中的坑[ 俩! ] 坑1:vcsa[安装80%报错]·无法进入第二阶段 vcsa安装到达80%后,无法进入第二阶段,通过"IP:5480"进 ...

  2. 基于Vue2实现的仿手机QQapp(支持对话功能,滑动删除....)—— 聊聊开发过程中踩到的一些坑与解决方案,以及个人感悟...

    使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 目前 ...

  3. SEO网站排名刷量代码中的一些坑

    今天上半年为了满足客户网站的排名需求,在大环境不好的情况下开辟一些新客户,公司特别组织我们几个资深研发人员成立了一个研发小组,来专门研发了这款网站SEO网站排名刷量工具,目的是帮助客户网站迅速提升热度 ...

  4. mysql表分区占用存储_MySQL 分区分表应用场景分析和分区中可能遇到的坑点

    MySQL的分区和分表应用场景分析 在日常工作中当我们的某张表的数据量过大的时候,首当其冲的可能就是进行分区和分表,但是是如何分区或者分表都要结合一点的业务场景下进行分析,才会显著的提升性能,来聊一聊 ...

  5. 安装python爬虫scrapy踩过的那些坑和编程外的思考

    '转载地址:http://www.cnblogs.com/rwxwsblog/p/4557123.html' 这些天应朋友的要求抓取某个论坛帖子的信息,网上搜索了一下开源的爬虫资料,看了许多对于开源爬 ...

  6. JavaScript将在企业环境中引发巨大变革

    根据Forrester公司的报告,JavaScript与Node.js将给Java等企业常用的技术方案带来巨大转变. JavaScript目前已经广泛普及,而服务器端Node.js运行时环境则已经成为 ...

  7. Vue2.0配置mint-ui踩过的那些坑

    Vue2.0配置mint-ui踩过的那些坑 最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错, ...

  8. 常用的JavaScript模式

    常用的JavaScript模式 模式是解决或者避免一些问题的方案. 在JavaScript中,会用到一些常用的编码模式.下面就列出了一些常用的JavaScript编码模式,有的模式是为了解决特定的问题 ...

  9. Javascript模式阅读笔记 · 简介

    JavaScript是一门基于Web的语言.它最初是作为在网页中操作一些特定类型元素(例如图像和表格字段)的方法,现在该语言的发展已经远远超出了预期.除了作为客户端浏览器所使用的脚本,现在JavaSc ...

最新文章

  1. 软考总结——虚存管理
  2. 发票统计者 V1.0
  3. 台湾国立大学郭彦甫Matlab教程笔记(13) 3D
  4. 科大星云诗社动态20210830
  5. WebRTC 的 AudioSource/AudioTrack
  6. UE3 性能调试:动态光照环境
  7. 北京移动联合中兴通讯率先完成SON 4/5G全制式规模部署
  8. 以后外卖还可以买手机了!饿了么与上海迪信通达成合作
  9. 使用Span T 提高C#代码的性能
  10. 胡伟武计算机体系结构2版pdf_最新重大版重庆高中英语必修模块1/2/3/4课文听力单词录音MP3音频+电子课本PDF+课件+教案+试题...
  11. 数据结构与算法:十大排序算法之归并排序
  12. Centos下yum update与yum upgrade的区别
  13. 计算机四级网络工程师(计算机网络单选)- 知识点
  14. 计算机考试多选试题及答案,计算机中级职称考试试题及答案 [2018职称计算机考试WPS_Office多选试题及答案]...
  15. java屏幕共享实现原理_远程桌面共享技术实现
  16. docker容器的前台后台运行
  17. 电动汽车相关功率计算
  18. 北京工作居住证续签注意的问题
  19. 多个excel工作簿、工作表合并
  20. ColorOS 13流畅吗?看OPPO在系统上做了哪些升级?

热门文章

  1. SAP PM 入门系列18 - IP25为维护计划 Set Deletion Flag
  2. SAP PP COR3不能看工单后续的备料TO单号?
  3. 如何使用SMOD和CMOD进行SD的用户增强
  4. 了解机器学习回归的3种最常见的损失函数
  5. 十个机器学习的成功案例
  6. torch.nn.functional.pad
  7. 无生命的AI算不上「智能」
  8. 影响和改变世界的50件发明专利,猜下中国有几个?
  9. 回顾2018,正在改变未来游戏规则的技术
  10. 36氪研究 | 智慧零售行业研究报告