ES6 函数扩展

水深无声 2022-02-21 19:44 279阅读 0赞

## 参数默认值 ##

如果没有向某个形参传入对应的实参(即实参为`undefined`)，该参数就会取值为定义好的默认值(如果有的话)。  
`null`被认为是有效的值传递。

function foo(name, age) {
      console.log(name, age);
    }
    foo();  // undefined undefined
    
    function bar(name="无名氏", age=18) {
      console.log(name, age);
    }
    bar();  // 无名氏 18

## 不定参数 ##

当不确定参数个数时，可以使用不定参数。  
不定参数由`...`加上一个`具名参数标识符`组成。  
在函数的参数列表中，如果有不定参数，则只能放在最后一个位置。  
参数列表中最多只能有一个不定参数。

## 函数自调用 ##

这是函数的一个特性，但在ES6之前就有了。

function foo(name) {console.log("hello", name);}
    foo("张三");  // hello 张三
    // 这是有名函数，可多次调用。
    
    // 如果某个函数只执行一次
    (function bar(name) {console.log("你好", name);})("哈哈哈");  // hello 张三

格式：  
`func` 是一个函数定义  
`(func)` 表示函数|函数名  
`(func)(argsList)` 表示函数自调用一次

## 箭头函数表达式 ##

箭头函数提供了一种更简洁的函数书写方式。

详细语法见：[箭头函数表达式][Link 1]

几个注意点：

*  箭头函数需要返回对象是，为与代码块区分，用`()`把对象包起来。
    
        var foo = (name) => {user:name};
        foo("张三")   // undefined
        var foo = (name) => ({user:name});  // 用()把返回的对象包起来
        foo("张三")   // {user: "张三"}
 *  没有`new.target`绑定，所以箭头函数不能作为构造函数使用，不能用`new`关键字。
    
        function foo() {}
        new foo()   // foo {}
        var bar = function() {}
        new bar()   // bar {}
 *  箭头函数中没有定义隐式的`arguments`。即为`undefined`。
    
        (function() {console.log(arguments);})()
        // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
        
        (() => {console.log(arguments);})()
        // Uncaught ReferenceError: arguments is not defined
 *  箭头函数表达式不支持使用`Function`对象的方法`call, apply, bind`等换绑定函数运行时内部的`this`对象。  
    箭头函数内部的`this`对象，是定义函数时的对象，而不是调用时动态传入的`thisArg`对象。
    
    ES6之前，经常有`var that = this`或`var self = this`等操作，  
    指向this对象，以在内部函数调用中使用想用的`this`对象。现在使用箭头函数比较方便。
    
        var person = {
          name: "内部",
          foo: function() {
            setTimeout(function() {
              // 这里的this指向全局对象window。
              console.log(this.name);
            });
          }
        }
        var name = "外部";
        person.foo();   // 外部
        
        // 使用箭头函数
        var person = {
          name: "内部",
          foo: function() {
            setTimeout(() => {
              // 箭头函数内部的this和上下文相关。
              console.log(this.name);
            });
          }
        }
        var name = "外部";
        person.foo();   // 内部

## 不适合使用箭头函数的场景 ##

*  定义对象的成员方法，其中含有this(需要指向对象)。
    
        var person = {
          foo: () => {console.log(this);},      // window
          bar: function() {console.log(this);}  // {foo: ƒ, bar: ƒ}
        };
        person.foo();
        person.bar();
 *  需要动态this时
    
        var btn = document.getElementById("xxx");
        btn.addEventListener("click", () => {
          this.classList.toggle("on");
        });

btn的监听函数时箭头函数，所以其中的this指向的是`定义的时候，外层的this对象`，即`Window`对象，导致无法操作被点击的按钮对象。

[Link 1]: https://blog.csdn.net/wuyujin1997/article/details/88829555