ES6 函数扩展（参数解构、length和name属性、参数作用域、严格模式、参数的尾逗号、new.target属性、toString、...args参数）和箭头函数（this指向、其它注意点）

目录

函数扩展

函数参数可以通过解构赋值和可以等号赋予默认值。

函数的length属性

函数的name属性 

参数作用域 

...args参数  

new.target属性 

严格模式

函数参数的尾逗号

Function.prototype.toString() 

 catch 命令的参数省略

箭头函数

this指向

不可以当作构造函数

不可以使用arguments对象

不可以使用yield命令

---

函数扩展

函数参数可以通过解构赋值和可以等号赋予默认值。

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

m1函数参数当接收一个对象，从该对象中解构出来x，y的值，当x，y的值为空或undefined时赋值为0；当接收为空或undefined时，赋值为空对象，并再从空对象中解构出x，y（会赋默认值0）。

函数的length属性

返回没有指定默认值的参数个数，注意指定了默认值之后的参数都不会记录，即可能会失真，且不包括...args。

(function (a, b = 1, c) {}).length // 1
(function(...args) {}).length // 0

函数的name属性 

返回函数申明时的名字，注意bind返回的函数，name属性值会加上bound前缀。匿名函数名字特殊。

(new Function).name // "anonymous"
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "
const bar = function foo() {};
bar.name //foo

参数作用域 

当参数设置了默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context），当作用域不存在参数的默认值时会去全局找。等到初始化结束，这个作用域就会消失。在不设置参数默认值时，是不会出现的。

当作用域不存在参数的默认值时会去全局找。

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2
f()//1

let aaa = 'outer';
function bar(func = () => aaa) {
  let aaa = 'inner';
  console.log(func());
}
bar(); // outer

foo函数的参数形成一个单独作用域。这个作用域里面，首先声明了变量x，然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，指向foo的第一个参数x。函数foo内部又声明了一个内部变量x，该变量与第一个参数x由于不是同一个作用域，所以不是同一个变量，因此执行y后，内部变量x和外部全局变量x的值都没变。如果将var x = 3的var去除，函数foo的内部变量x就指向第一个参数x，与匿名函数内部的x是一致的，所以最后输出的就是2，而外层的全局变量x依然不受影响。

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3
x // 1

...args参数  

将函数多余的参数赋值到args数组中，该参数只能为最后一个参数。

new.target属性 

一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

例如下面代码：确保构造函数只能通过new命令调用。

function Person(name) {
  if (new.target !== undefined) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}
// 另一种写法
function Person(name) {
  if (new.target === Person) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}
var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

严格模式

函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错（可以通过闭包解决，放入立即执行函数中）。因为：函数执行的时候，先执行函数参数，然后再执行函数体。而只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}
// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};
// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};
const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

函数参数的尾逗号

和数组、对象属性一样，在最后可以添加逗号而不报错。

function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }
let arr=[1,2,]
arr.length //2
let obj={name:'sod',}

Function.prototype.toString() 

返回一个字符串，该字符串包括函数foo的原始代码包含注释，函数名foo和圆括号之间有空格，es2019的toString()方法完全显示不会省略。

function /* foo comment */ foo () {let pyf='handsome'}

foo.toString()
// "function /* foo comment */ foo () {let pyf='handsome'}"

catch 命令的参数省略

es2019允许catch语句省略参数。

try {
  // ...
} catch {
  // ...
}

箭头函数

this指向

箭头函数没有自己的this，内部的this是定义时上层作用域中的this，是固定的，而对普通函数来说，内部的this指向函数运行时所在的对象。

下面代码所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。不管怎么嵌套，t1、t2、t3都输出同样的结果。如果这个例子的所有内层函数都写成普通函数，那么每个函数的this都指向运行时所在的不同对象。

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

m属性指向的箭头函数的上层作用域是window（可以理解为对象不作为作用域，函数才有作用域） 

globalThis.s = 21;
const obj = {
  s: 42,
  m: () => console.log(this.s)
};
obj.m() // 21

不可以当作构造函数

不可以对箭头函数使用new命令，否则会抛出一个错误。

不可以使用arguments对象

该对象在函数体内不存在。如果要用，可以用...args参数代替。

不可以使用yield命令

因此也不能用作 Generator 函数。