ES6---箭头函数与function定义函数有什么区别？在箭头函数中，this指向，构造函数，变量提升是如何表现的？

╰半夏微凉° 2022-05-24 07:09 76阅读 0赞

*  简洁

///function定义函数
    function aaa(a,b){ 
        return a+b;
    }
    
    ///箭头函数定义函数
    var aaa=(a,b)=>{
       return a+b;}

--------------------

*  this指向
    
    function传统定义的函数，this指向随着调用环境的改变而改变，而箭头 函数中的指向则是固定不变，一直指向定义环境的。

///function定义函数中的this指向
    function aaa(){ 
        console.log(this)
    }
    var obj={
        aaa:aaa
    };
    aaa();//此时输出window对象
    obj.aaa();//此时输出obj对象
    
    
    ///箭头函数中的this指向
    var aaa=()=>{
        console.log(this)
    };
    var obj={
        aaa:aaa
    }
    aaa();//此时指向window
    obj.aaa();//此时指向window

--------------------

*  构造函数   
    箭头函数固然好用，但是不能用于构造函数，即不能被new一下；

///使用function方法定义构造函数
    function per(){
        this.name='aaa';
        this.sex='man'
    };
    var ming=new per();
    console.log(ming); /// {name: "aaa", sex: "man"}
    
    
    ///使用箭头函数定义构造函数
    var per=>{
        this.name='bbb';
        this.sex='women';
    };
    var gang=new per();
    ///运行便会报错：Uncaught TypeError: per is not a constructor

--------------------

*  变量提升
    
    由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let const定义的时候更不必说)关键词，而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前！

///function定义函数时候的位置
    aaa();//aaa
    function aaa(){ 
        console.log('aaa')
    }
    
    
    ///箭头函数定义的位置
    var aaa=()=>{
        console.log('aaa')
    };
    aaa();//aaa
    bbb();///报错bbb is not a function
    var bbb=()=>{
        console.log('bbb')
    }