vue：es6函数扩展之作用域问题（遇到的）

html版本：

<script>
  let foo = 'outer';
  function bar(func = () => foo) {
    let foo = 'inner';
    console.log("我是html:"+func());
  }

  bar(); // outer
</script>

我的理解：执行bar()；会拿到全局的foo=‘outer’；并输出；

vue版本：

mounted:function () {


          let foo = 'outer';

          function bar(func = () => foo) {
            let foo = 'inner';
            console.log("我是vue；在mounted中执行的："+func());
          }

          bar(); // inner

 },

html：部分浏览器能直接解析es6；

vue能取到inner原因：es6转es5的写法；

es6语法：

let foo = '你好'
function bar(func = () => foo) {
  let foo = 'inner-yiciceshi';
  console.log(func());
}
bar();

转成es5后的语法

 

"use strict";

var foo = '你好';

function bar() {
  var func = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
    return foo;
  };
  var foo = 'inner-yiciceshi';
  console.log(func());
}

bar();

　转换网址:　

https://www.babeljs.cn/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DYUwLgBAZg9jEF4IHJAG8oX01kCgoFcB2AxmAJYz4QBGAhgE4AUeRiE9AlIgHzRwcDeWCBFCRY8JMhL58IWgFoAniULKQAZwAWJZAG5BEQuTUxQAOmAwA5owKF2bPQF8sNBg6A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.5.5

 有些es6转换成es5后和原来是不一样的！未来会更好！