首页 > 代码库 > CoffeeScript中的外部变量与局部变量的屏蔽

CoffeeScript中的外部变量与局部变量的屏蔽

  刚接触CoffeeScript时,一直不清楚它存在的意义,搜索过部分资料,可以总结为两点:①语法糖,减少代码量增加可读性②增强js代码的合法性,编译之后的js代码跟手动写的相比基本没语法错误。

其实自我感觉代码量确实减少了,但是也并不是很可观,语法糖确实使用起来很方便,而语法错误这一点,个人感觉只要是对js有一定了解的人不一定会比他差,差也差不太多,个人感觉。

  说一下在使用过程中遇到的比较头疼的一点,就是外部变量与局部变量的屏蔽机制。

  如下代码:

a = (callback) ->    setTimeout callback, 0
a ()->    console.log "#{temp} in the callback"    temp = 3temp = 1;console.log "#{temp} out the callback"

  在这句输出语句中 console.log "#{temp} in the callback",temp一直是undefined,众所周知在coffee的编译中会自动将代码中出现的变量放在函数开头进行声明,而在js中如下代码:

var a, temp;a = function(callback) {  return setTimeout(callback, 0);};a(function() {  console.log("" + temp + " in the callback");  return temp = 3;});temp = 1;console.log("" + temp + " out the callback");

  上述代码中的输出应该是 “1 out the callback", "1 in the callback"

  在callback中是能读取到外部的temp变量的,而在coffee中却读取不到,什么情况呢,于是将编译后的代码仔细阅读一遍发现(看过好几次,奈何项目中该函数内变量太多一直没看到,囧),编译后的代码是

var a, temp;a = function(callback) {  return setTimeout(callback, 0);};a(function() {  var temp;//注意此处,重新声明了temp变量  console.log("" + temp + " in the callback");  return temp = 3;});temp = 1;console.log("" + temp + " out the callback");

  发现在callback中又重新声明了temp变量将外部变量给屏蔽掉了,如何解决这个问题呢,我们只需将temp = 1的赋值提到callback的定义之前即可。

  还记得在一开始接触coffee时,网上有同学问过coffee中如何写出下面的语句:

var a = 1;function b () {  var a = 2;}

  现在有解决方案了,我们只需要将a=1的赋值放在函数b下面即可:

b = ()->  a = 2a = 1

  还有一点需要注意的是,coffee中‘’与”“的编译结果也会不一样的,如:

a = 1‘a is #{a}‘ //输出 a is #{a}"a is #{a}" //输出 a is 1

  事后仔细想了想,或许可能一开始就对coffee带有一种排斥心理,因此也没好好看过官方文档,带来各种”莫名其妙“的错误

  俗话说的好,存在即合理,任何语言都有自己存在的意义,自己去思考吧,不过我一直觉得它的可读性也没有js强啊...╯□╰



CoffeeScript中的外部变量与局部变量的屏蔽