你真的了解 ES6 中的函数特性么？

￡神魔★判官ぃ 2022-10-22 11:55 183阅读 0赞

以下文章来源于 前端娱乐圈，作蛙人  
仅用于学习交流，侵联删！

> 本篇文章中代码截图均为验证问题，自写代码，如有问题，请联系作者！

## 前言 ##

函数是所有编程语言中重要的组成部分，在 ES6 出现之前 JavaScript 的函数语法一直没有太大的变化，从而遗留了很多问题和隐晦的做法，导致实现一些功能需要编写很多代码。

## 函数形参默认值 ##

JavaScript 函数有一个特别的地方，就是无论在函数形参里定义了多少参数，都可以传入任意数量的参数，但是有的情况下，我们的参数只是可填，这样的话我们还在函数体内些一堆逻辑从而导致代码冗余，还好 ES6 版本出现了函数默认值。

我们用 ES5 和 ES6 代码来对比一下

**ES5 处理默认参数**

function person(name, age) { 
        name = typeof(name) != "undefined" ? name : `奥力给${ + new Date()}`
        age = typeof(age) != "undefined" ? age : 24
        
    }
    person()

上面例子中 ES5 是这样处理默认参数值的，例如我们参数多的话，这么写代码的话会造成非常多的容易，于是 ES6 就出现函数参数默认值。

**ES6 处理默认参数**

function person(name = "奥力给", age = 24) { 
        console.log(name, age)
    }
    person()  // 奥力给 24
    person("张三", 30) // 张三 30
    person(null, null) // null null

![在这里插入图片描述][20210317145436652.png]

上面的例子是 ES6 中处理的默认参数，可以看到代码非常简化，上面代码可以看到参数传入了 null，对于默认参数 null 也是一个合法值，这种情况下只有函数参数为 undefined 时才会使用默认值。

## 函数参数表达式 ##

关于默认参数值，最有趣的特性可能就是非原始值传参了，也可以把默认参数定义为`函数` or `变量`。

function defaultName() { 
        return "奥力给"
    }
    function person(name = defaultName()) { 
        console.log(name)
    }
    person("张三") // 张三
    person() // 奥力给

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

> 需要注意的是，默认参数的表达式不是一创建函数就立刻执行的，而是当该函数 `person` 被调用的时候并且没有传入参数才会执行。

上面的例子中，如果不传参才会调用默认值的 `defaultName` 函数。

下面来看一下默认参数传入变量。

let defaultName = "奥力给"
    function person(name = defaultName) { 
         console.log(name)
    }
    person("张三") // 张三
    person() // 奥力给

![在这里插入图片描述][20210317143552877.png]

function person(name, nickName = name) { 
         console.log(name, nickName)
    }
    person("张三") // 张三 张三
    person("奥力给", "奥力给斌") // 奥力给 奥力给斌

![在这里插入图片描述][20210317143822530.png]

上面的例子中，第一个代码块的里面我们都能看得懂，只不过把之前的函数换成了变量。看第二个代码块里的代码，我们吧 `nickName` 参数默认值设置成了第一个参数 `name` 参数，这里在引用参数默认值的时候，只允许引用前面参数的值，相当于函数参数就是定义的变量，我们后面的变量可以访问前面变量的，但是只限制在于当前作用域中，这个函数形参里就是当前作用域。我们再看一个例子。

function person(name = nickName, nickName) { 
         console.log(name, nickName)
    }
    person("张三") // 张三 undefined

![在这里插入图片描述][20210317143846330.png]

上面例子中，第一个参数默认值是第二个参数，这时运行会抛出一个错误，因为这时在定义第二个变量前去访问，会造成暂时死区。

## 函数参数默认值对 arguments 的影响 ##

> 当使用函数默认参数时，arguments 对象的行为会与以往不同。

**ES5 非严格模式下使用 arguments**

ES5 非严格模式下，函数命名参数的变化会体现在 `arguments` 对象上，`arguments` 获取的是当前函数的实参，`arguments` 在非严格模式下它跟形参是映射关系，就是形参有变化 `arguments` 跟着变。

function test(a, b) { 
        console.log(a == arguments[0]) // true
        console.log(b == arguments[1]) // true
        a = "a"
        b = "b"
        console.log(arguments) // ["a", "b"]
    }
    test(1, 2)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

上面例子中，在非严格模式下，命名参数的变化会同步更新到 arguments 对象中，当 a 参数的变化，会映射到 arguments\[0\] 对象上。

**ES5 严格模式下使用 arguments**

下面我们再来看一下严格模式下的 arguments

function test(a, b) { 
        'use strict';
    
        console.log(arguments)  // [1, 2]
        b = 10
        console.log(arguments) // [1, 2]
    }
    test(1, 2)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

上面例子是严格模式下的，可以看出当我们改变参数 `b` 时，再次打印 `arguments` 对象，它还是初始值。在严格模式下 `JavaScript` 中取消了 `arguments` 对象这个令人困惑的行为，无论参数如何变化，`arguments` 对象不再随之改变。

**ES6 中使用默认参数值对 arguments 的影响**

在 ES6 中，如果一个函数使用了默认参数值，那么 `arguments` 对象的行为都将与 `JavaScript` 中的严格模式下保持一致。

function test(a, b = 2) { 
        a = 12
        b = 10
        console.log(arguments) // [1]
    }
    test(1)

![在这里插入图片描述][20210317144008557.png]

上面例子中，`arguments` 对象打印出 `[1]` 是因为 `arguments` 对象获取的是实参，我们可以看到实参参数就传了一个值，所以 `arguments` 对象就只有一个值。再看第二点，`a` 和 `b` 的参数都改变了值，但是 `arguments` 对象还是没有改变，就是上面说的，`如果一个函数使用了默认参数值，那么 arguments 对象的行为都将与 JavaScript 中的严格模式下保持一致。`

## 处理无命名参数 ##

在 js 中函数参数数量是任意的，当传入更少的数量，默认参数的特性可以有效的简化函数声明的代码。当传入更多的数量，ES6 也同样提供了更好的方案。

**ES5 中获取无命名参数**

function test(a, b, c) { 
        console.log(arguments) // [1, 2, 3]
    }
    test(1, 2, 3)

![在这里插入图片描述][20210317144125475.png]

上面例子中，`arguments` 对象虽然也可以实现获取所有的参数，但是如果我们想获取第二个参数之后的所有参数，那么还得循环去排除。

**ES6 中获取无命名参数**

function test(...parmas) { 
        console.log(parmas) // [1, 2, 3, 4]
    }
    test(1, 2, 3, 4)

![在这里插入图片描述][20210317144244333.png]

function test(a, b, ...params) { 
        console.log(params) // [3,4]
    }
    test(1, 2, 3, 4)

![在这里插入图片描述][20210317115430925.png]

上面的例子中，第一个代码块里实现了在 ES6 中获取全部的参数，可是还不满足我们的需求。那么看第二个代码块里的代码就实现了，我们获取第二个参数后面的所有参数。

**ES6 获取无命名参数的弊端**

首选，每一个函数只能声明一个获取不定参数，而且只能放在函数的末尾，否则会报错。

function test(...params, a, b) { 
     
    }
    test()

![在这里插入图片描述][20210317144334960.png]

上面的例子中，会抛出错误，声明了不定参数数之后，就不能继续在后面声明参数。  
还有一点，不定参数不能定义在对象字面量的 `setter` 中，因为 `setter` 函数只接受一个函数，写成不定参数之后就会是一个数组，这样就会导致程序异常。

let obj = { 
      set name(...params) { 
    
      }
    }

![在这里插入图片描述][20210317144352652.png]

## 函数 name 属性 ##

在 `JavaScript` 中所有的函数都有一个 `name` 属性，该属性保存的是该函数名称的字符串 。没有名称的函数也仍然有 `name` 属性，该 `name` 属性值为空字符串。

function person() { }
    let test = function() { }
    
    console.log(person.name) // person
    console.log(test.name) // test

![在这里插入图片描述][20210317144438896.png]

**name 属性的特殊情况**

我原先以为每个函数的 name 名称都是对应着当前的函数名，后来发现并不是这么回事。下面来看一下函数的特殊情况

var person = { 
        get getName() { 
            return "奥力给"
        }
    }
    console.log(Object.getOwnPropertyDescriptor(person, 'getName').get.name)  // get getName
    
    function test() { }
    console.log(test.bind().name) // bound test

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]

上面的例子中，`person.getName` 是一个取值函数 `getter`，所以它的函数名称 `get getName`，如果是 `setter` 函数的话那么名称会有带有前缀 `set`。通过 `bind` 创建的函数，它的名称带有“`bound`”前缀。

## 箭头函数 ##

ES6 中箭头函数是其中最有趣的特性，箭头函数是一种使用箭头 `=>` 定义函数的新语法，但它与传统的 `JavaScript` 函数有些不同，具体看下面几点。

*  没有 `this`、`super`、`arguments`
 *  不能通过 `new` 关键字调用
 *  没有原型 `prototype`
 *  不可以改变 `this` 指向
 *  不支持重复的命名参数

> 箭头函数与传统函数一样都有一个 name 属性，这一点是不变的。

**箭头函数语法**

let person = () => "奥力给"
    
    // 相当于下代码
    
    function person() { 
     return "奥力给"
    }

上面例子中，当箭头函数右侧的表达式求值后悔立即返回。

**箭头函数参数**

let getName = val => val
    
    // 相当于下代码
    
    function getName(val) { 
        return val
    }

当箭头函数只有一个参数时，就可以省略括号，直接写参数名。如果要传入两个或多个参数，则就需要带上括号，看下面例子

let sum = (a, b) => a + b
    
    // 相当于下代码
    
    function sun(a, b) { 
        return a + b
    }

如果你想返回一个对象字面量，可以这样写

let getObj = () => ({ name: "奥力给", age: 24}) // {name: "奥力给", age: 24}
    
    // 相当于下代码
    
    function getObj() { 
        return { 
         name: "奥力给",
            age: 24
        }
    }

**箭头函数没有 this**

箭头函数的 `this` 值，取决于函数外部费箭头函数的 `this` 值，如果上一层还是箭头函数，那就继续往上找，如果找不到那么 `this` 就是 `window` 对象。

let person = { 
        test: () => { 
            console.log(this)
        },
        fn() { 
            return () => { 
                console.log(this)
            }
        }
    }
    person.test()  // window
    person.fn()()  // person对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]

上面例子中，可以清楚的看到箭头没有 `this`，那么它的 `this` 只会去找外层的非箭头函数的函数。

**箭头函数没有 arguments 对象**

同样箭头函数也没有 arguments 对象，但是如果它外层还有一层非箭头函数的话，就会去找外层的函数的 arguments 对象，如下

let test1 = () => console.log(arguments)  // 执行该函数会抛出错误
    
    
    function test2(a, b, c) { 
        return () => { 
            console.log(arguments) // [1, 2, 3]
        }
    }
    test2(1, 2, 3)()

![在这里插入图片描述][20210317144817479.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]

上面例子中，可以清楚的看到当前的箭头函数没有 `arguments` 对象，然后就去它的外层去找非箭头函数的函数。注意：`箭头函数找`arguments`对象只会找外层非箭头函数的函数，如果外层是一个非箭头函数的函数，就可以找到，如果它也没有 arguments 对象也会中断返回，就不会再往外层去找了`。看下面的例子

function test(a) { 
        return function() { 
            return () => { 
                console.log(arguments) // []
            }
        }
    }
    test(1)()()

![在这里插入图片描述][20210317144857586.png]

上面的例子中可以看到，里面的箭头函数往外层找费箭头函数的函数，然后不管外层这个函数有没有 arguments 对象都会返回。只有它是非箭头函数就可以，如果外层是箭头函数还会继续往外层找。

**箭头函数不能用 new 关键字声明**

let test = () => { }
    new test() // 抛出错误，找不到constructor对象

**箭头函数没有原型 prototype**

切记，箭头函数没有原型，有可能面试官会问，JavaScript 中所有的函数都有 prototype 属性吗？

let test = () => { }
    test.prototype // undefined

> 个人观点：关于有没有这个原型，存在一定的讨论，这篇原文章评论下面存在争议，我们把争议的部分都测试了一边，大家自己鉴别。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 6]

**箭头函数不能改变 this 指向**

let person = { }
    let test = () => console.log(this)
    
    test.bind(person)()
    test.call(person)
    test.apply(person)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 7]

上面例子中，改变 this 指向的方法都不会抛出错误，但是都无效，都不能改变 this 指向。

**箭头函数不能重复命名参数**

let sum = (a, a) => { } // 抛出错误，参数不能重复

[20210317145436652.png]: /images/20221022/7987a57bc9714480b819bf70a84f2694.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20221022/a6ff877715f241fca27a83a16329f6ab.png
[20210317143552877.png]: /images/20221022/1975df5d02ab4e8b84e72aa8fc562bba.png
[20210317143822530.png]: /images/20221022/868bd0eb87a749588e658826f73647f4.png
[20210317143846330.png]: /images/20221022/8f82e5585edd4e04a01f95f3157f9c20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221022/15c599f98ad243749b434f31548e3b7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221022/dff609a94a664279871bfaa5509cb755.png
[20210317144008557.png]: /images/20221022/e22c5928fee5463290667030ba0cf054.png
[20210317144125475.png]: /images/20221022/9918e4e4a3844fe0975260f5cf788ac6.png
[20210317144244333.png]: /images/20221022/0c5ac0c8eb6645448dda2e4669f71893.png
[20210317115430925.png]: /images/20221022/c9ac62318db64460adcdd9009664a66b.png
[20210317144334960.png]: /images/20221022/9116ce8bfa19483dbabd6ef2d6d9bdd1.png
[20210317144352652.png]: /images/20221022/745cefa8b96a41d9990e3b453ba65c7d.png
[20210317144438896.png]: /images/20221022/d36ba6c47fcd48be99bb1c9bdd0e1304.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]: /images/20221022/956dacbc26f1400d82240f1e3a05967a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]: /images/20221022/0aafe3f791b444c8b4bb3a7216ebe24e.png
[20210317144817479.png]: /images/20221022/4da2fe95d8c44fd9a42af06609121b74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]: /images/20221022/95ac659f3856439c95dbbfaf26278456.png
[20210317144857586.png]: /images/20221022/8f61a0d50b4a48ff8d800471f6cb4a29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 6]: /images/20221022/d20c07c69848442e8343aa890784dcb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 7]: /images/20221022/2131a2430d334ce0a5ace0049f8e76c8.png