箭头函数的使用

一时失言乱红尘 2022-02-21 15:45 343阅读 0赞

### 箭头函数的使用 ###

*  基本用法
 *  为什么要有箭头函数
 *  和普通函数的区别
 *   *  不绑定this
     *  不绑定arguments
 *  什么时候不能用箭头函数

# 基本用法 #

ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

上面的箭头函数等同于：

var f = function(v) {
        
      return v;
    };

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
    // 等同于
    var f = function () {
         return 5 };
    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
        
      return num1 + num2;
    };

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => {
         return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
    let getTempItem = id => {
         id: id, name: "Temp" };
    // 不报错
    let getTempItem = id => ({
         id: id, name: "Temp" });

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

箭头函数可以与变量解构结合使用。

const full = ({
         first, last }) => first + ' ' + last;
    // 等同于
    function full(person) {
        
      return person.first + ' ' + person.last;
    }

箭头函数使得表达更加简洁。

const isEven = n => n % 2 == 0;
    const square = n => n * n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

# 为什么要有箭头函数 #

我们在日常开发中，可能会需要写类似下面的代码

function Person() {
        
      // Person() 构造函数定义 `this`作为它自己的实例.
      this.age = 0;
    
      setInterval(function growUp() {
        
        // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
        // 与在 Person()构造函数中定义的 `this`并不相同.
        this.age++;
      }, 1000);
    }
    
    var p = new Person();

上例的输出结果是什么呢？此时this指向全局Windows，而其没有定义，因此不能实现每隔一秒+1功能  
通常的写法是**缓存this**,然后在setInterval中用缓存的this进行操作，如下

function Person() {
        
      var that = this;
      that.age = 0;
    
      setInterval(function growUp() {
        
        //  回调引用的是`that`变量, 其值是预期的对象. 
        that.age++;
      }, 1000);
    }

使用上述方法，输出的结果就是大家所期待的了。  
那么，大家可能会觉得这样不科学，明明是写在对象里面的方法，为什么还要使用缓存这个对象才能正确使用。ECMA组织觉得这确实是个问题，之后在es6的新特性里添加了箭头函数，它能很好的解决这个问题。另外箭头函数还用简化代码量的特点。

# 和普通函数的区别 #

从上面的例子中，我们已经可以看出箭头函数的优势。  
和普通函数相比，箭头函数主要就是以下两个方面的特点

不绑定this，arguments  
更简化的代码语法  
第二个特点不需要过多赘述，下面我们来看看不绑定this和arguments这两个特点

## 不绑定this ##

什么叫不绑定this，我个人的理解为\*\*箭头函数的this其实就是在定义的时候就确定好的，以后不管怎么调用这个箭头函数，箭头函数的this始终为定义时的this \*\*

通过 call 或 apply 调用

由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this—译者注），他们的第一个参数会被忽略。

## 不绑定arguments ##

箭头函数不绑定Arguments 对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments：

var arguments = [1, 2, 3];
    var arr = () => arguments[0];
    
    arr(); // 1
    
    function foo(n) {
        
      var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
      return f();
    }
    
    foo(1); // 2

在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

function foo(arg) {
         
      var f = (...args) => args[0]; 
      return f(arg); 
    }
    foo(1); // 1
    
    function foo(arg1,arg2) {
         
        var f = (...args) => args[1]; 
        return f(arg1,arg2); 
    } 
    foo(1,2);  //2

# 什么时候不能用箭头函数 #

前面我们已经看到了很多关于es6箭头函数的好处，也看到了箭头函数的一些不足。那么我们应该在什么时候使用箭头函数，而什么时候最好不要使用呢？  
1.作为对象的方法  
在写这篇博客的例子时，由于本人的水平确实有限，导致了篇头出现的错误。不过我也想由此告诉大家，最好不要在对象的方法中使用箭头函数，这样可能会导致一些问题的产生。除非你很熟悉箭头函数。  
2.不能作为构造函数  
由于箭头函数的this不绑定的特点，所以不能使用箭头函数作为构造函数，实际上如果这样做了，也会报错。  
3.定义原型方法

注：本文并非完全原创，参考别人文章加上一些自己的总结看法。  
贴出来别人的地址：[https://blog.csdn.net/ixygj197875/article/details/79123552][https_blog.csdn.net_ixygj197875_article_details_79123552]  
供自己学习踩坑参考，侵删~

[https_blog.csdn.net_ixygj197875_article_details_79123552]: https://blog.csdn.net/ixygj197875/article/details/79123552