ECMAScript 6（11）函数的扩展(2) 箭头函数

港控/mmm° 2021-09-19 14:12 241阅读 0赞

## 1.  箭头函数 ##

> 就是 => 这个符号定义函数

var f = v => v;
    
    // 等同于
    var f = function (v) {
      return v;
    };

简单来说，箭头函数分为三部分：

1.  参数部分；
2.  箭头符号（固定的=>）
3.  函数体部分

### 1.1 参数 ###

1.  **没有参数的情况 :**  可以用()或者\_(左下划线) , 或者任意非关键字且不影响使用的变量名 ;
2.  **只有一个参数的情况 :  **一般省略括号
3.  **多个参数 :  **用 () 包起来

### 1.2  函数体部分 ###

1.  **被\{\}包裹的情况:   **大于一条语句,且没有返回值
2.  **不被\{\}包裹的情况:  **只有一条语句,且被返回(默认会被return)
3.  **被()包裹的情况:   **返回值是对象,，必须在对象外面加上括号，否则会报错。

### 1.3  使用注意点 ###

箭头函数有几个使用注意点。

**（1）函数体内的`this`对象，就是定义时所在的对象，而不是使用时所在的对象。(这个需要特别注意)**

（2）不可以当作构造函数，也就是说，不可以使用`new`命令，否则会抛出一个错误。

（3）不可以使用`arguments`对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用`yield`命令，因此箭头函数不能用作 Generator 函数。

### 1.4  不适用的情况 ###

对象的方法

const cat = {
      lives: 9,
      jumps: () => {   //因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。
        this.lives--;  //这里this指的是window
      }
    }

需要动态`this`的时候

var button = document.getElementById('press');
    button.addEventListener('click', () => {
      this.classList.toggle('on');  //同上this指window
    });

## 2.  其他 ##

### 2.1  严格模式 ###

从 ES5 开始，函数内部可以设定为严格模式。

ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

> **那么什么时候使用严格 ?**
> 
> **总而言之，如果要使用严格模式，就在该js文件的顶端添加，不要就别用，免得报错。**

### 2.2  name属性 ###

函数的`name`属性，返回该函数的函数名

这个属性早就被浏览器广泛支持，但是直到 ES6，才将其写入了标准。

需要注意的是，ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，ES5 的`name`属性，会返回空字符串，而 ES6 的`name`属性会返回实际的函数名。

var foo = function(){}
    var bar = foo;
    console.log(foo.name);  //foo
    console.log(bar.name);  //foo

`Function`构造函数返回的函数实例，`name`属性的值为`anonymous`。

(new Function).name // "anonymous"

在es5里，添加了bind方法。这个方法的作用是返回一个改变了this指向目标的原函数，如以下代码：

function foo() {
        console.log(this);
    }
    var bar = foo.bind("this");
    bar();  //"this"，不完全准确，但可以这么理解
    foo();  //Window

注意，foo函数中，this指向的目标并没有改变。

而在bind绑定后，name属性将发生变化，准确的来说，是加上前缀”bound “，如代码：

function foo() {};
    foo.bind({}).name // "bound foo"
    
    (function(){}).bind({}).name // "bound "

###  2.3  尾调用 ###

简单的说就是在函数执行结束的时候，return 返回另外一个执行的函数。如代码：

function foo(){
        return bar();   //这里bar是一个函数
    }

如果没有return，或者return的不是一个单纯的函数，都不叫尾调用。

另外，尾调用的函数中（不包括传给他的参数），里面不能包括原函数中的变量。

以下情况都不是尾调用 :

// 情况一
    function f(x){
      let y = g(x);
      return y;
    }
    
    // 情况二
    function f(x){
      return g(x) + 1;
    }
    
    // 情况三
    function f(x){
      g(x);
    }

### 2.4  尾递归 ###

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。

function sum(x, y) {
      if (y > 0) {
        return sum(x + 1, y - 1);
      } else {
        return x;
      }
    }
    
    sum(1, 100000)
    // Uncaught RangeError: Maximum call stack size exceeded(…)

`sum`递归 100000 次，就会报错，提示超出调用栈的最大次数。

[详细的使用戳阮一峰ES6][ES6]

[ES6]: http://es6.ruanyifeng.com/#docs/function%23name-%E5%B1%9E%E6%80%A7