es6---箭头函数

最新推荐文章于 2024-07-18 10:24:18 发布

_语墨

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量362

点赞数 3

分类专栏：进阶学习文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_44247866/article/details/122670373

版权

进阶学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.上下文 this指向

   //上下文形成的原因 箭头函数并不会形成独立上下文，内部this指向了window
    const obj2 = {
        teacher: 'aa',
        leader: 'bb',
        list: ['ccc', 'ddd'],
        getTeacher: function() {
            console.log('teacher is:', this.teacher);
            return this.teacher;
        },
        getLeader: () => {
            console.log('leader is:', this.leader);
            return this.leader;
        }
    }
    obj2.getTeacher()   //teacher is: aa
    obj2.getLeader()    //leader is: undefined

2.类操作

    //箭头函数无法成为完整构造类
    function Obj(teacher, leader) {
        this.teacher = teacher;
        this.leader = leader;
    }

    const Obj2 = (teacher, leader) => {
        this.teacher = teacher;
        this.leader = leader;
    }

    //实例验证
    const o1 = new Obj('aa', 'bb');
    const o2 =new Obj2('aa','bb')
    console.log(o1);   // {teacher: 'aa', leader: 'bb'}
    console.log(o2);   //报错： Obj2 is not a constructor

    //箭头函数无法构造原型方法
      function Obj(teacher, leader) {
        this.teacher = teacher;
        this.leader = leader;
    }
    
    Obj.prototype.learn = function() {
        console.log(this.teacher, this.leader);
    }
    Obj.prototype.learn = () => {
        console.log(this.teacher, this.leader);
    }

    o1.learn()    //undefined undefined

3.箭头函数的参数特性

    //无法使用arguments
    const test = function(teacher) {
        console.log(arguments);
    }

    const test1 = teacher => {
        console.log(arguments);
    }
    test(1,2,3) // Arguments(2) [1, 2.3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    test1(1,2,3) //报错： arguments is not defined