13.ES6新特性：函数扩展_箭头函数

最新推荐文章于 2024-10-09 11:19:11 发布

想成为数据分析师的开发工程师

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量102

点赞数 1

分类专栏： Vue 文章标签： javascript 前端 html ES6

本文链接：https://blog.csdn.net/m0_63953077/article/details/127196443

版权

Vue 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>
    <script>
        // test1：当只有一条语句时候，不用写{}，箭头指向相当于return
        var add = function() {
            return x;
        }
        // 等同于
        var add = () => x;

        var add = function (x,y) {
            return x+y;
        }
        //等同于
        var add = (x,y) => x+y;

        // 大括号杯解释为代码块，所以如果箭头函数直接返回一个对象，外面必须加括号
        var add = function (x,y) {
            return {
                x:10,
                y:10
            }
        }
        //等同于
        var add = (x,y)=>{(x,y)}


        //test2: 当多于一条语句时候，需要大括号{}，并且使用return
        var add = function(x,y){
            var z = 10;
            return x+y+z;
        }
        //等同于
        var add = (x,y) =>{
            var z = 10;
            return x+y+z;
        }

        /*
            使用注意点：
            对于普通函数，内部的this指向函数运行时所在的对象，但是对于箭头函数不成立
            箭头函数没有自己的this对象，内部的this就是定义时作用域中的this
        */
       var name = 'itbaizhan'
       var user = {
        name : 'iwen',
        getname(){
            var that = this
            setTimeout(function () {
                console.log("普通函数"+this.name);// 指向的就是itbaizhan
                console.log("普通函数"+that.name);//只有这样才能指向内部的name，方法2：用内部函数代替
            })
        },
        getName(){
            setTimeout(()=>{
                console.log("箭头函数"+this.name);
            })
        }
       }

       user.getname()
       user.getName()

    </script>
</body>
</html>