# 普通函数和箭头函数的区别

285 阅读2分钟

普通函数和箭头函数

写在前面

函数(Function)JavaScript 里的‘一等公民’。是由称为函数体的一系列语句组成。可以当做入参,出参(返回值)使用。和对象一样,有自己的属性和方法。区别之处在于可以被调用。数据类型是 function(用 typeof 判断),用 Object.prototype.toString.call() 判断是 [object Function]。如果没有使用 retrun 语句,则默认返回 undefined。反之则函数必须使用 return 语句来指定一个要返回的值。(使用 new 关键字调用一个构造函数除外,不再是实例化一个对象)。函数执行时,this 关键字并不会指向正在运行的函数本身,而是指向调用该函数的对象。 函数表达式不会提升,因此在使用之前必须先声明。和用 var 声明变量不一样。

产生原因

箭头函数的产生原因就是在于 this 关键字指向问题。它很容易让人产生疑惑,尤其是当函数调用层级比较多的时候。和传统函数定义相比,语法也相对简洁。并且没有自己的thisargumentssupernew.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。箭头函数 this 指向的固定化,并不是因为函数内部做了处理,而是因为箭头函数在创建的时候根本就没有自己的 this

使用箭头函数需要注意的点

1,函数体内的 this 对象,是定义时所在对象,而不是调用该函数的对象。 2,正因为自己本身没有 this 对象,因此不可以用作构造函数,不能用 call()apply()bind()这些方法去改变 this 的指向。 3,不绑定 arguments 对象,可以使用 rest 参数来解决。 4,严格模式(use strict)中,指定的与 this 相关的规则都将被忽略。

var aaa = () => {
    'use strict';
    console.log(this);
    // window
}

var bbb = function() {
    'use strict';
    console.log(this);
    // undefined
}

5,不能使用 new 操作符,否则会报错

var Func = () => {};
var func = new Func();
// TypeError: Func is not a constructor

6,没有 prototype 属性

var Func = () => {};
console.log(Func.prototype);
// undefined

7,不能用作生成器。 yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。 8,箭头函数的简写,可以直接省略 return,在块体中,必须使用明确的 return 语句。如果需要返回对象字面量的话,记得用圆括号包起来。

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

写在后面

抛一个大佬留下的问题,有箭头函数的 IIEF:

(() => {
console.log('执行看看');
// 执行看看
})(); 

这个是可以的,但是下面的写法就会报错

(() => {
console.log('执行看看');
// Uncaught SyntaxError: Unexpected token (
}());

有知道原因的小伙伴吗?