es6 初级之箭头函数

1.先看一个例子：

<script>
        function show() {
            console.log('aluoha');
        }
        show();
</script>

2. 改写成简单的箭头函数：

   var show = () => console.log('箭头:aluoha');
   show();

vue中箭头函数，3. 1 包含return 的常规函数：

        function show() {
            return 10;
        }
        console.log(show());

3.2 包含return 的箭头函数：

错误写法：

     var show = () =>return 10;
     console.log(show());

运行结果：

es6函数？

正确写法：

        var show = () => {
            return 10;
        };
        console.log(show());
    

小结：在箭头函数中，有return 返回值时，需要使用{}把函数体包裹起来

 

es6字符串？4.1 箭头函数的参数

       var show = val => val;
       console.log(show(100));

4.2 只有一个参数也可以写成：

       var show = val => {
            return val;
        }
        console.log(show(10));    

4.3 一个参数，也可以加括号（）包含：

       var show = (val) => {return val;}console.log(show(100));

js箭头函数中的this、

 

4.4 箭头函数，多个参数：

       var add = (a, b) => {
            return a + b;
        }
        console.log(add(10, 20));    

4.5 箭头函数不可实例化：

        var show = () => console.log('aluoha');
        show();
        new show(); //报错    

es6箭头函数this、

正常函数可以实例化：

        function show() {
            console.log('aluoha');
        }
        show();
        new show();

5.1 this指向：

        var show = () => {
            console.log(this); //this->window
        }
        show();

箭头函数的作用域，5.2 this调用：实际调用 window.a  

        var a = 101;
        var show = () => {
            console.log(this.a);
        }
        show();

5.3.1 this指向宿主对象：（不传参）

        var userName = 'global';
        function User(name) {
            this.userName = name;

            this.showUserInfo = () => {
                return this.userName;
            };
            this.showName = function() {
                return this.userName;
            };
        }
        var oUser = new User();
        console.log(oUser.showUserInfo());
        console.log(oUser.showName());

5.3.2 传参调用：

        var userName = 'global';
        function User(name) {
            this.userName = name;

            this.showUserInfo = () => {
                return this.userName;
            };
            this.showName = function() {
                return this.userName;
            };
        }
        var oUser = new User("aluoha");
        console.log(oUser.showUserInfo());
        console.log(oUser.showName());

es6箭头函数？