美文网首页
箭头函数

箭头函数

作者: xiaoguo16 | 来源:发表于2020-04-30 15:58 被阅读0次

箭头函数是ES6语法中新加的一个定义函数的方法,这节主要介绍它与普通函数的一些区别:

1. 箭头函数没有自己的this

箭头函数不会创建自己的this,它没有自己的this,它会继承作用域链的上一层this。它会捕获函数定义时所处的外部环境的this。因此不会再改变。
普通函数的this值与调用位置有关系。
举例:

        function func1(){
            console.log('普通函数this',this)
        }
        let func2=()=>{
            console.log('箭头函数this',this)
        }
        let obj={
            func2:func2,
            func1:func1
        }
        obj.func1() 
        obj.func2()
运行结果.png

由上可验证上述说法,普通函数func1由于调用时是在obj对象上调用的,所以其this指向的是obj对象。箭头函数func2的this与定义时的位置有关系,所以func2的this指向的是window对象。

2. 不可以改变this的指向

普通函数可以通过call, apply, bind等方法改变this的指向,而箭头函数的this从定义时就确定好了,无法改变指向。
举个例子:

        let obj={
            name: 'aaa'
        }
        var name = 'bbb'
        function func1(){
            console.log(this.name)
        }
        let func2=()=>{
            console.log(this.name)
        }
        func1.call(obj) //aaa
        func2.call(obj) //bbb

上述例子中,想通过call方法打印obj中的name对箭头函数func2是不生效的。

3. 没有arguments数组

普通函数中arguments数组保存了函数的所有参数。但箭头函数没有改数组。

        function func1(a){
            console.log(a+arguments[0])
        }
        let func2=(a)=>{
            console.log(a+arguments[0])
        }
        func1(1) //2
        func2(1) //报错

4.不能作为构造函数使用(不能new, 没有原型对象)

箭头函数没有constructor指针,不能作为构造函数使用。如果调用new方法创建实例会报错,因为new的过程如下:

  1. 创建一个新对象;
  2. 把this指向这个对象;
  3. 执行构造函数中的代码,从而将属性和方法添加到这个对象上;
  4. 返回这个新对象;

因为箭头函数没有自己的this,它的this是外层执行环境的this,不能控制该this的指向,所以第二步执行时会报错。
由于箭头函数不能通过new创建实例,因而也没有原型对象prototype的需求,所以构造函数也没有原型对象。

参考文献:
MDN
箭头函数与普通函数的区别总结

相关文章

  • ES6~箭头函数

    什么是箭头函数 单表达式箭头函数 相当于 多表达式箭头函数 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有...

  • 箭头函数和立即执行函数

    箭头函数 箭头函数和普通函数有什么区别?如果把箭头函数转换为不用箭头函数的形式,如何转换主要是this的差别,箭头...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • 箭头函数

    箭头函数 箭头函数能让this的指向固定化 分析:1)第一个setInterval()中使用了箭头函数,箭头函数使...

  • TS  笔记this

    this 箭头函数在箭头函数创建的地方获得this;非箭头函数,在调用函数的地方获得this如图

  • 箭头函数和数组

    箭头函数&数组 箭头函数 特点: 没有 this 没有 arguments 没有prototype在箭头函数中使用...

  • 箭头函数

    箭头函数 为什么使用箭头函数

  • 箭头函数中this的指向

    箭头函数在平时开发中用着非常爽,箭头函数有什么特点呢 箭头函数不能够当做构造函数使用 箭头函数没有argument...

  • js学习笔记4(函数)

    1.箭头函数 ES6新增属性。箭头函数特别适合嵌入函数的场景。 箭头函数虽然语法简介,但是很多场合不适用。箭头函数...

  • js理解普通函数和箭头函数

    普通函数: 箭头函数: 区别: 构造函数和原型 箭头函数不能作为构造函数 不能new。会报错 箭头函数没有原型属性...

网友评论

      本文标题:箭头函数

      本文链接:https://www.haomeiwen.com/subject/zxvzwhtx.html