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

我就是我 2022-11-13 04:14 156阅读 0赞

### 文章目录 ###

*  一、箭头函数
 *  二、与普通函数的区别
 *   *  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的指向在它被定义的时候就已经确定了，之后永远不会改变。

来看个例子：

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

再来看另一个例子：

*  对象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 并没有什么影响：

## 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_www.jianshu.com_p_eca50cc933b7]

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/115208019][https_blog.csdn.net_qq_39903567_article_details_115208019]

[https_www.jianshu.com_p_eca50cc933b7]: https://www.jianshu.com/p/eca50cc933b7
[https_blog.csdn.net_qq_39903567_article_details_115208019]: https://blog.csdn.net/qq_39903567/article/details/115208019