ES6箭头函数与普通函数的区别：this指向、原型及语法特性详解

一、箭头函数的基本语法示例

在ES6标准中，开发者可以使用箭头符号 => 来创建箭头函数。为了直观理解其语法结构，可以参考以下基础代码示例：

// 箭头函数
let fun1 = (name) => {
    return `Hello ${name} !`; 
};
fun1('我是箭头函数'); //Hello 我是箭头函数 !"
// 箭头函数只有一个参数，可以省去参数括号()
let fun2 = name => {
    return `Hello ${name} !`; 
};
fun2('我是箭头函数'); //Hello 我是箭头函数 !"
// 箭头函数如果函数体只有一句代码，可以省去函数体的大括号{ }
let fun3 = name => `Hello ${name} !`;
fun3('我是箭头函数'); //Hello 我是箭头函数 !"
// 普通函数
let fun4 = function (name) {
    return `Hello ${name} !`;   // 函数体
};
fun4('我是普通函数'); //Hello 我是普通函数 !"

对比上述基本语法示例可以看出，箭头函数的定义方式相较于传统普通函数更为简洁明了，编写起来也更加高效便捷。

二、箭头函数和普通函数的区别

1、箭头函数的this指向问题（重要）

箭头函数内部并不拥有独立的this绑定机制。相反，它会捕获定义时刻所处外层执行环境中的this值，并继承该this。因此，箭头函数内部this的指向在函数定义阶段即已固定，后续无论何时调用都不会发生改变。

var name = 'Global';
function fun1() {
    //返回一个普通函数
     return function () {
          console.log(this.name);
     }
}
function fun2() {
    //返回一个箭头函数
     return () => {
          console.log(this.name);
     }
}
fun1().call({name: 'Obj'});     // 'Obj'
fun2().call({name: 'Obj'});     // 'Global'

通过以下实例可以清晰看到这一机制：

代码中 fun1 返回的是一个普通函数，此时，通过 call 方法改变普通函数的 this 成功的将普通函数的 this 指向了 {name: 'Obj'} 所以输出 Obj

代码中 fun2 返回的是一个箭头函数，由于箭头函数的 this 是在初始化的时候就被定义了，然而它继承了它外层 fun2 的执行环境中的 this ，fun2 里面的this又继承了全局的this，所以输出 Global

再观察另一个具体实例：

var name = 'Global';
var obj = {
  name: 'Obj',
  fun1: function(){
    console.log(this.name);
  },
  fun2: () => {
    console.log(this.name);
  }
};
obj.fun1();    // 'Obj'
obj.fun2();    // 'Global'

从该实例的运行结果可以看出：

对象obj 里面的fun1 是一个普通函数，普通函数作为对象的方法调用时， this 指向它所属的对象。此时 this 指向的是当前对象，所以返回 Obj

对象obj 里面的fun2 是一个箭头函数，箭头函数的this 是在定义初始化的时候继承它所处的执行环境当中的this，当前fun2所处的执行环境是 Window ，所以返回 Global

2、call() apply() bind()无法改变箭头函数中this的指向

由于 this 已经在箭头函数定义时候就被绑定，通过 call() apply() bind() 调用时，只是传入了参数而已，对 this 并没有什么影响

var name = 'Global';
// 箭头函数定义在全局作用域
let fun = () => {
    console.log(this.name)
};
fun();     // 'Global'
// this的指向不会改变，永远指向Window对象
fun.call({name: 'Obj'});     // 'Global'
fun.apply({name: 'Obj'});    // 'Global'
fun.bind({name: 'Obj'})();   // 'Global'

因此箭头函数不能被修改this 指向

3、间接修改箭头函数的this指向

如果我们在某个场景里面非要修改箭头函数的 this指向呢

var name = 'Global';
function fun() {
    //返回一个箭头函数
     return () => {
          console.log(this.name);
     }
}
fun()() // 'Global'
fun.call({ name: 'Obj' })() // Obj

上面实例中看出fun 是一个普通函数，返回一个箭头函数，我们通过call修改fun 这个普通函数的 this，此时箭头函数刚好继承的是这个普通函数的 this，所以返回 Obj，从而达到间接修改箭头函数的this指向问题

3、箭头函数不能被new运算符

尝试通过new关键字去实例化一个箭头函数的时候，JavaScript引擎会抛出错误。

var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

原因：构造函数的new都做了些什么？简单来说，分为四步

js内部首先会先生成一个对象；
再把函数中的this指向该对象；
然后执行构造函数中的语句；
最终返回该对象实例。

由于箭头函数没有自己的this，它的this是继承外部执行环境中的this，这个时候通过new运算符进行实例化时候，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用

4、箭头函数没有原型prototype

let Foo = () => {
    console.log('Hello World !')
};
console.log(Foo.prototype); // undefined

5、箭头函数没有arguments，然而可用 REST参数，扩展运算符（三个点）...解决

// 普通函数
function fun1() { 
   console.log(arguments) 
}
//箭头函数
let fun2 = () => {
   console.log(arguments) 
};
fun1(1,2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
fun2(1,2); // arguments is not defined

可以看出箭头函数是没有arguments得，不过不用担心，箭头函数得替代方法是用扩展运算符（三个点）...解决

let fun = (...args) => {
   console.log(args) 
};
fun(1,2); // [1, 2]

6、箭头函数不能换行

let fun = ()
           => 1; // SyntaxError: expected expression, got '=>'

7、箭头函数一条语句返回对象字面量，需要加括号

let fun = () => { foo: 1 };
fun(); // undefined
let fun1 = () => ({ foo: 1 });
fun1(); // {foo: 1}
let fun2 = () => { foo: function() {} };   
// SyntaxError: function statement requires a name
let fun3 = () => ({ foo: function() {} });

8、箭头函数的解析顺序相对||靠前

let fun = false || function() {}; // ok
let fun1 = false || () => {};   // Malformed arrow function parameter list
let fun2 = false || (() => {});    // ok

9、箭头函数不能用作Generator函数，不能使用yeild关键字

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

三、参考资料

资料一资料二资料三

四、结束语

到此这篇关于浅谈ES6中箭头函数与普通函数的区别的文章就介绍到这了,更多相关ES6 箭头函数与普通函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

ES6箭头函数与普通函数的核心差异解析