箭头函数和普通函数

一、this 指向不同

• 普通函数的this 是在函数运行时候确定的, 基本满足谁调用指向谁, 特殊情况除外
• 箭头函数的this 是在函数定义就确定了, 因为箭头函数是没有this, 所以内层的this就指向箭头函数上层的作用域, 并且不可以通过call, apply, bind改变this指向。

  var text='哈哈哈哈'
    var person={
        text:'666666',
        fun1:function(){
            console.log(this.text)
        },
        fun2:()=>{
            console.log(this.text)
        }
    }
    person.fun1()
    person.fun2()

 

 打印的结果如上图显示。普通函数fun1中的this因为是被person对象调用, 所以this就指向了person对象，打印出的是6666，箭头函数fun2中的this是在函数定义的时候就确定了, 而且对象不构成独立的作用域, 所以this就指向了顶级作用域window, 打印结果就是'哈哈哈哈'

二、箭头函数没有自己的arguments

var person={
        fun1:function(){

        },
        fun2:()=>{
             
        }
    }
    console.dir(person.fun1,111)
    console.dir(person.fun2,222)

打印的结果如下：

 可以看出普通函数fun1是有arguments和prototype属性的，但是箭头函数fun2是没有这些属性的。

关于arguments的理解可以看一看这篇文章：理解js中的arguments

三、箭头函数不能作为构造函数

从上面打印出的数据可以看出因为箭头函数是没有prototype原型对象的, 因此如果直接使用new 就会报错