箭头函数【JavaScript基础面试题】

约定不等于承诺〃 2024-03-22 13:12 48阅读 0赞

## 箭头函数不能用于构造函数 ##

先看看普通函数是否能当作构造函数用

var Student=function(age){
        this.age=age;
    }
    var obj=new Student(20);
    console.log(obj.age);//20

如果将构造函数改为箭头函数，看看会输出什么结果？发现报错（//Box is not a constructor）

var Box=age=>{
        this.myAge=age;
    }
    var obj=new Box(20);//Box is not a constructor
    console.log(obj.myAge);

![485a1c38d2884cf991492d4c16718976.png][]

## 箭头函数没有 prototype 属性 ##

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

##  ##

## 箭头函数没有arguments  ##

先看看普通函数的 arguments 。可以发现，在普通函数中， arguments 是一个数组，该数组内存放的是调用函数时，外界传进来的参数。

var f = function(i){
    
          return arguments[0]+i;
    
        };
    
        console.log(f(2))//输出4

如果在箭头函数中使用arguments会发生什么？由此可以得出结论，箭头函数内没有 arguments 参数。

var f = (i) => arguments[0]+i;
    
        console.log(f(2))

![96a0ac76888d453eb29558a843f9734a.png][]

## 箭头函数内不能绑定this ##

箭头函数的 `this`完全取决于**外层作用域**。

**示例 1 ：**

我们发现，下述代码中，`greet()`中打印的this，和 `outer()` 中打印的 this **是一样的**。这说明箭头函数的 this 和外层作用域中的 this 是一样的。

**示例 2 :**

箭头函数的 this 在**定义的时候决定**，而**非调用的时候决定**。

从下面代码可以看出，arrow() 在 outer() 内部被调用，但是 arrow 的 this 指向的是 window，和 outer 的 this 不同。这说明，在定义 arrow 的时候，它的 this 就已经固定了，是 window。因此，不管在哪里调用 arrow 函数，它内部的 this 始终指向的是 window。

## 无法通过 call（）、apply（）改变箭头函数的调用者 ##

通过以下例子可以发现，即使用 apply 显示绑定了sayColor() 的调用者，但在实际执行的时候，this 仍指向 red。这说明 apply 绑定失效了。

window.color = "red";
    let color = "green";
    let obj = {
    　　color: "blue"
    };
    let sayColor = () => {
    　　return this.color;
    };
    sayColor.apply(obj);//red

[485a1c38d2884cf991492d4c16718976.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/33d6cf6298514b15b45c251b8c3894d8.png
[96a0ac76888d453eb29558a843f9734a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bf75a54d3b574013b31478dc13cb9cc9.png