ES6 学习(7) ---函数

1、函数的默认值

　　ES6 中函数的参数是可以设置默认值的，同时，参数可以是一个表达式。

　　函数的参数，不能再函数内再次使用 let 和 const 再次声明

// ES6 写法
function log(x, y = "World") {
  console.log(x, y)
}  

// ES5 写法
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

//
let x = 99;
funtion foo(Y = x + 1) {
  console.log(Y)  
}
foo() // 100 每次调用都会重新计算 X + 1

　　参数的默认值可以与解构赋值一起使用

// 1, 参数必须是一个对象
function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

// 2, 第二种方法可以解决，第一种方法不传参会报错的现象
// 这种方法是解构后 参数使用默认值
function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

// 3, 默认值是一个有具体属性的参数，直接解构赋值参数
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

　　参数默认值的位置。 函数传参，参数是一一对应的，除了定义了默认值的尾参数可以省略，如果非尾部设置默认值，则参数不可以省略

function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

// 上面代码中，有默认值的参数不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。

// 只有传参是 undefined 的时候才能出发函数使用默认值

　　函数的 length 属性 // 如果参数没有指定默认值是，返回函数的参数，如果指定了默认值，则返回默认值之前参数的个数

// 返回函数参数的个数
(function (a) {}).length // 1

// 返回 默认值参数之前参数的个数
(function (a = 1) {}).length // 0
(function (a, b, c = 1) {}).length // 2
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

// ...rest, ...args 不计入参数的个数
(function(...args) {}).length // 0

　　作用域 // 当函数参数设置了默认值时，函数的参数就会有着独特的作用域，当函数初始化后，此作用域就会消失。此作用域为暂时性死区相当于{ let x }

var x = 1;

function f(x, y = x) { // 此处的 x 为参数，实参赋值给形参 x， x 赋值给 y， 此时参数形参的作用域相当于 {let x;  y = x}
  console.log(y);
}

f(2) // 2

let x = 1;

function f(y = x) { // 参数形参的作用域中 x 未定义，因此 x 指向外层作用域的 x
  let x = 2;
  console.log(y);
}

f() // 1

function f(y = x) { // 此时 参数形成的作用域及window下 x 均为定义会报错
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

var x = 1;

function foo(x = x) { // 参数形成的作用域相当于 {let x = x}
  // ...
}

foo() // ReferenceError: x is not defined

let foo = 'outer';

function bar(func = () => foo) { // 参数为函数，同上，参数形成的作用域 { func = () => foo} 此作用域内没有 foo 变量就要往上一层作用域中找
  let foo = 'inner';
  console.log(func());
}

bar(); // outer

var x = 1;
function foo(x, y = function() { x = 2; }) { // 参数形成的作用域相当于 { let x;function(){ x = 2}}; y 函数执行,x 的赋值，只是给作用域的x赋值，并不会影响 全局和函数内的变量x
  var x = 3;
  y();
  console.log(x);
}

foo() // 3
x // 1

var x = 1;
function foo(x, y = function() { x = 2; }) { // 参数形成的作用域同上，但函数内的 x 指向参数x，因此 x = 3 赋值给参数 x， 当 y函数执行时，有给参数 x赋值为2，因此打印x为2
  x = 3;
  y();
  console.log(x);
}

foo() // 2
x // 1

　　总结：函数的作用域链 { global { 传参 { 函数体 } } }

2、 rest 参数

　　ES6 引入 rest参数(...rest) 这样就不用使用arguments了，rest 是一个数组，而arguments 是一个伪数组，因此rest可以调用数组的使用方法

　　注意：rest 可以不是第一个参数，但是只能是最后一个参数

 3、 name 属性  // 函数的 name属性, 返回函数名

// 当匿名函数赋值给变量的时候，返回的是 变量
var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

// 当具名函数赋值给变量的时候，返回的是具名函数的名
const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

// Function构造函数返回的函数实例，name属性的值为anonymous。
(new Function).name // "anonymous"

// bind返回的函数，name属性值会加上bound前缀。
function foo() {};
foo.bind({}).name // "bound foo"

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

 4、箭头函数 // ES6 允许使用 箭头( => ) 来定义函数

　　当一个函数不需要或者需要多个参数时, 就使用一个括号来代表参数部分，箭头后没有 {} 表示返回( return ) 箭头后的部分

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

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

　　当箭头后只有一条语句，同时需要返回时，就可以省略函数的大括号。否则就需要用大括号把它们括起来。

　　主要注意的是，返回对象的时候不能省略函数的大括号，因为浏览器会将对象的大括号解析成函数的大括号，会报错。当返回一个对象是，

可以省略大括号，而是用小括号括起来表示返回一个对象。

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

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

　　当函数只有一条语句同时不需要返回值时，可以用 button.onclick = () => void doSomething();

　　void 运算符在箭头函数中避免泄露，箭头函数标准中，允许在函数体不使用括号来直接返回值。 如果右侧调用了一个原本没有返回值的函数，其返回值改变后，则会导致非预期的副作用。 安全起见，当函数返回值是一个不会被使用到的时候，应该使用 void 运算符，来确保返回 undefined，这样，当 API 改变时，并不会影响箭头函数的行为。(这样doSomething 函数执行不管是否有返回，button的点击事件都不会有返回值)

　　箭头函数很大程度上简化了代码

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

　　使用箭头函数注意点：

　　　　1、箭头函数中是没有自己的this， 而是引用外层的 this，一般情况下，函数的this是可变的，但箭头函数的this的指向是固定的

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

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

　　　　4、不可以使用yield命令

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000); // this 的指向是 Timer中的 this指向
  // 普通函数
  setInterval(function () { // this 的指向是 window
    this.s2++;
  }, 1000);
}

var timer = new Timer(); // new 操作符 改变了 Timer中 this的指向，使 this指向 Timer

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

　　箭头函数不宜使用的地方：

　　　　1、定义对象中的方法，一般函数，this是指向这个对象，但是使用箭头后，this就会指向window

　　　　2、箭头函数的this是固定的，因此当需要动态的this时，不能用箭头函数

const cat1 = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}
const cat2 = {
  lives: 9,
  jumps: function() { // 动态this，谁调用指向谁
    this.lives--;
  }
}
cat1.jumps() // this 指向 window
cat2.jumps() // this 指向 cat2

5、尾调用优化 // https://es6.ruanyifeng.com/#docs/function#%E5%B0%BE%E8%B0%83%E7%94%A8%E4%BC%98%E5%8C%96

6、尾逗号 // ES2017 允许函数的最后一个参数有尾逗号，这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。

　　此前，函数定义和调用时，都不允许最后一个参数后面出现逗号，否则会报错。

7、Function.prototype.toString() // ES2019 对函数实例的toString()方法做出了修改。toString()方法返回函数代码本身，以前会省略注释和空格。修改后的toString()方法，明确要求返回一模一样的原始代码。

// 修改前，会省略注释和函数名和（）之间的空格
function /* foo comment */ foo () {}

foo.toString()
// function foo() {}

// 修改后，返回原代码
function /* foo comment */ foo () {}

foo.toString()
// "function /* foo comment */ foo () {}"

8、 try...catch 语句参数省略 

// 以前明确要求catch命令后面必须跟参数，接受try代码块抛出的错误对象。
try {
  // ...
} catch (err) {
  // 处理错误
}

// ES2019 做出了改变，允许catch语句省略参数。
try {
  // ...
} catch {
  // ...
}

-----不生产代码，只是代码的搬运工