zoukankan      html  css  js  c++  java
  • CoffeeScript中的外部变量与局部变量的屏蔽

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

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

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

      如下代码:

    a = (callback) ->
        setTimeout callback, 0
    a ()->
        console.log "#{temp} in the callback"
        temp = 3
    
    temp = 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 = 2
    a = 1
    

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

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

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

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



  • 相关阅读:
    插入排序
    JavaMail学习笔记
    汉诺塔问题
    使用Three.js绘制一个虚拟城市
    jquery flotcharts使用简介
    用CSS hack技术解决浏览器兼容性问题.
    IE条件注释详解.
    让IE6也认识!important
    代码重构(转)
    模版+数据分离渲染方式的设计与实现
  • 原文地址:https://www.cnblogs.com/DARKDD/p/4109442.html
Copyright © 2011-2022 走看看