好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

分号导致的问题

分号导致的问题

在 JavaScript 中分号是可选的,解释器会 自动 对分号进行补全。

如果选择不写分号,需要注意一些使用上的问题。

不写分号,相当于将插入分号的权利递交给解释器,对于某些情况,可能会出现非预期的 效果 :

函数 返回值换行

  var   fn   =   function  (  )   { 
   return 
     '我怎么没被返回呢??' 
 } 

console .  log  (  fn  (  )  )   //  输出 :undefined 
 

由于 return 已经是可以被作为完整的语句,所以解释器会 自动 在 return 后插入 一个 分号,上面这段 代码 在被处理后可能是这样的:

  var   fn   =   function  (  )   { 
   return  ; 
     '我怎么没被返回呢??'  ; 
 }  ; 

console .  log  (  fn  (  )  )  ; 
 

所以 输出 的是 undefined 。

某个变量或者 属性 突然被当作 函数 调用

  var  number  =  

 var  result  =    +   number 

 (  function  (  )   { 
  console .  log  (  ) 
 }  )  (  ) 

 // 报错 number is not a function 
 

这种情况,解释器会以为是要 调用 number,但 number 是个数值,并不是 一个 函数 ,所以报错了,这段 代码 被处理后,可能是这样的:

  var  number  =   ; 

 var  result  =    +   number  (  function  (  )   { 
  console .  log  (  )  ; 
 }  )  (  )  ; 
 

碰到这个问题的大部分场景都是写自执行的匿名 函数 ,所以通常不写分号的情况下,要养成在自执行匿名 函数 前写 一个 分号的习惯:

  var  number  =  

 var  result  =    +  number

 ;  (  function  (  )   { 
  console .  log  (  ) 
 }  )  (  ) 
 

数据被当作数组成员或对象成员进行访问

  var  number  =  

 var  result  =    +  number

 [  ,   ,   ]  .  forEach  (  function  ( item )   { 
  result  +=  item
 }  ) 

 // 报错:Cannot read property 'forEach' of undefined 
 

这个报错原因和上 一个 点类似,也是 number 被误当作有成员的对象或者数组了,上面 代码 被处理后可能是这样的:

  var  number  =   ; 

 var  result  =    +  number [  ,   ,   ]  .  forEach  (  function  ( item )   { 
  result  +=  item ; 
 }  )  ; 
 

显然 number[3] 是取不到东西的。

其他还有许许多多情况,场景与之都类似,所以在不写分号的时候一定要注意,条件允许的情况下借助 eslint 来帮助检查 代码 。

对象属性访问问题 ? ?JavaScript 关键字

查看更多关于分号导致的问题的详细内容...

  阅读:34次

上一篇

下一篇

第1节:什么是 JavaScript    第2节:学习环境准备    第3节:调试方案    第4节:JavaScript 变量    第5节:JavaScript 数据类型    第6节:JavaScript if 语句    第7节:for 语句    第8节:JavaScript 算数运算符    第9节:JavaScript 比较运算符    第10节:JavaScript 逻辑运算符    第11节:JavaScript 函数    第12节:JavaScript 表达式    第13节:JavaScript 对象    第14节:JavaScript 字符串    第15节:JavaScript 数字    第16节:JavaScript 数组    第17节:JavaScript switch 语句    第18节:JavaScript while 语句    第19节:JavaScript 的 break 与 continue    第20节:JavaScript with    第21节:document.cookie    第22节:JavaScript Function    第23节:JavaScript Math    第24节:JavaScript Date    第25节:JavaScript RegExp    第26节:JavaScript JSON    第27节:什么是 DOM    第28节:DOM 和 JavaScript 的关系    第29节:获取和操作 DOM 节点    第30节:DOM 与事件    第31节:DOM 事件绑定    第32节:DOM 事件对象    第33节:DOM 事件流    第34节:事件相关的优化    第35节:自定义事件    第36节:表单校验    第37节:什么是 BOM    第38节:常用的 BOM 相关对象    第39节:BOM 常用属性和方法    第40节:AJAX    第41节:异常处理    第42节:三元运算符    第43节:逗号操作符    第44节:void    第45节:typeof    第46节:delete 操作符    第47节:debugger    第48节:getter & setter    第49节:new 运算符与构造函数    第50节:JavaScript 原型    第51节:JavaScript instanceof    第52节:JavaScript this    第53节:严格模式    第54节:作用域    第55节:闭包    第56节:变量提升    第57节:对象包装器    第58节:Lodash    第59节:moment    第60节:swiper    第61节:ECMAScript 6    第62节:Node.js    第63节:Babel    第64节:CSS 预处理器    第65节:代码规范    第66节:TypeScript    第67节:WebComponents    第68节:Vue、React、Angular    第69节:小程序    第70节:JavaScript 关键字    第71节:分号导致的问题    第72节:对象属性访问问题    第73节:this 使用问题    第74节:浮点数精度问题    第75节:独一无二的 NaN    第76节:避免全局污染    第77节:控制台观察对象问题    第78节:根据环境选择语言特性    第79节:相关资源