前端面试系列-JavaScript-箭头函数(与普通函数的区别)

文章目录

• 一、箭头函数
• 二、与普通函数的区别
• • 1.箭头函数不会创建自己的this
  • 2.箭头函数继承而来的this指向永远不变（重要）
  • 3.call()、apply()、bind()无法改变箭头函数中this的指向
  • 4.箭头函数不绑定arguments,取而代之用rest参数…解决
  • 5.不能使用new操作符(作为构造函数使用)
  • 6.不能使用原型属性
  • 7.不能简单返回对象字面量
  • 8.箭头函数不能换行

一、箭头函数

// 箭头函数
let fun = (name) => {
    // 函数体
    return `Hello ${name} !`;
};
           

// 等同于
let fun = function (name) {
    // 函数体
    return `Hello ${name} !`;
};
           

二、与普通函数的区别

1.箭头函数不会创建自己的this

箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

来看个例子：

var id = 'Global';

function fun1() {
    // setTimeout中使用普通函数
    setTimeout(function(){
        console.log(this.id);
    }, 2000);
}

function fun2() {
    // setTimeout中使用箭头函数
    setTimeout(() => {
        console.log(this.id);
    }, 2000)
}

fun1.call({id: 'Obj'});     // 'Global'

fun2.call({id: 'Obj'});     // 'Obj'
           

• 函数fun1中的setTimeout中使用普通函数，2秒后函数执行时，这时函数其实是在全局作用域执行的，所以this指向Window对象，this.id就指向全局变量id，所以输出’Global’。
• 但是函数fun2中的setTimeout中使用的是箭头函数，这个箭头函数的this在定义时就确定了，它继承了它外层fun2的执行环境中的this，而fun2调用时this被call方法改变到了对象{id: ‘Obj’}中，所以输出’Obj’。

再来看另一个例子：

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};

obj.a();    // 'OBJ'
obj.b();    // 'GLOBAL'
           

• 对象obj的方法a使用普通函数定义的，普通函数作为对象的方法调用时，this指向它所属的对象。所以，this.id就是obj.id，所以输出’OBJ’。
• 但是方法b是使用箭头函数定义的，箭头函数中的this实际是继承它定义时的外层执行环境的this，它定义时所处的外层执行环境就是全局环境，所以指向Window对象，所以输出’GLOBAL’。（定义对象的大括号{}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中）

2.箭头函数继承而来的this指向永远不变（重要）

箭头函数继承而来的this指向永远不变。对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。

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

由于 this 已经在词法层面完成了绑定，通过 call() 、 apply() 、bind()方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响：

var id = 'Global';

// 箭头函数定义在全局作用域
let fun1 = () => {
    console.log(this.id)
};

fun1();     // 'Global'
// this的指向不会改变，永远指向Window对象
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'
           

4.箭头函数不绑定arguments,取而代之用rest参数…解决

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

// 例子一
let fun = (val) => {
    console.log(val);   // 111
    console.log(arguments); 
        // Uncaught ReferenceError: arguments is not defined
    // 因为外层全局环境没有arguments对象
};
fun(111);
           

// 例子二
function outer(val1, val2) {
    let argOut = arguments;
    console.log(argOut);    //Arguments(2) [111, 222, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    let fun = () => {
        let argIn = arguments;
        console.log(argIn);  //Arguments(2) [111, 222, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(argOut === argIn);  // true,箭头函数中访问arguments是外层局部（函数）执行环境中的值。
    };
    fun();
}
outer(111, 222);
           

rest参数用于获取函数的多余参数，这样就不需要使用arguments对象了

var foo = (...args) => {
  return args[0]
}
console.log(foo(1))    //1
           

5.不能使用new操作符(作为构造函数使用)

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

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

构造函数的new操作分为四步：

1. 创建一个空对象
2. 链接到原型
3. 绑定this值
4. 返回新对象

但是，箭头函数没有原型属性，没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错。

6.不能使用原型属性

箭头函数没有原型属性。

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

7.不能简单返回对象字面量

var func = () => {  foo: 1  };
// Calling func() returns undefined!
var func = () => {  foo: function() {}  };
// SyntaxError: function statement requires a name
           

如果要返回对象字面量,用括号包裹字面量

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

8.箭头函数不能换行

var func = ()
           => 1; // SyntaxError: expected expression, got '=>'
           

参考:https://www.jianshu.com/p/eca50cc933b7

本文链接：https://blog.csdn.net/qq_39903567/article/details/115208019