ES6箭头函数和ES5普通函数一样吗

时间:2020-05-01

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

更简短的函数并且不绑定this

<script>
    function Person(age) {
        this.age = age;
        setTimeout(function () {
            console.log('test1');
            console.log(this);
        }, 1000);

        setTimeout(() => {
            console.log('test2');
            console.log(this);
        }, 1000);
    }

    new Person(12);
</script>

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

严格模式中与 this 相关的规则都将被忽略

由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this---译者注),他们的第一个参数会被忽略。(这种现象对于bind方法同样成立---译者注)

<script>
    var f = () => {
        console.log(this);
        return 1;
    };
    var f1 = function () {
        console.log(this);
        return 2;
    };
    console.log(f.bind(String)());
    console.log(f1.bind(String)());
</script>

箭头函数不绑定Arguments 对象

<script>
    var f = () => {
        console.log(arguments);
    };
    f(1, 2, 3);
</script>

箭头函数不能用作构造器,和 new一起用会抛出错误

箭头函数没有prototype属性

yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。

箭头函数可以有一个“简写体”或常见的“块体”

在一个简写体中,只需要一个表达式,并附加一个隐式的返回值。在块体中,必须使用明确的return语句。

var func = x => x * x;                  
// 简写函数 省略return

var func = (x, y) => { return x + y; }; 
//常规编写 明确的返回值

返回对象字面量

var func = () => ({foo: 1});

箭头函数在参数和箭头之间不能换行

但是,可以通过在 ‘=>’ 之后换行,或者用 ‘( )’、'{ }'来实现换行

箭头函数具有与常规函数不同的特殊运算符优先级解析规则

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

空的箭头函数返回 undefined

let empty = () => {};