ES6学习第七章函数的扩展 es6javascript

前言本章介绍函数的扩展。有些不常用的知识了解即可。
本章原文链接：函数的扩展。
函数参数的默认值 ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
当函数形参没有被赋值时，才会将默认值赋值给函数参数。

// 默认值直接写在行参后面 function sampleFn(sample = 0, sample1 = 0) { return sample + sample1; }

注意：

参数变量是默认声明的，所以不能用let或const再次声明。
使用参数默认值时，函数不能有同名参数。
参数默认值是惰性求值的。
函数的默认值指定后，函数length属性返回的是没有指定默认值的参数的个数。
参数的默认值一旦设定，函数进行声明初始化时，参数会形成一个单独的作用域（context）。

// 默认值直接写在行参后面 function sampleFn(sample = 0, sample1 = 0,sample = 1) { // 不能有同名参数let sample = 1; // 不能再次声明return sample + sample1; }

注意：通常情况下，定义了默认值的参数，应该是函数的尾参数。也就是放在最后面。

解构赋值默认值

// 函数的默认值与结构赋值的默认值可以结合使用 function sampleFn({ sample = 0, sample1 = 0 } = {}) { // 函数参数默认值 return sample + sample1; }console.log(sampleFn({ sample: 23, sample1: 33 })); // 56 参数需对应解构赋值的类型

作用域 【ES6学习第七章函数的扩展】当函数参数设置了默认值，函数进行声明初始化时，函数参数会生成一个单独的作用域，等到初始化结束，该作用域就会消失。而且该行为只在函数参数指定了默认值才会出现。

let sample = 1; /* 在声明的时候出现单独作用域在这个作用域中，变量没有定义，于是指向外层变量函数调用时，函数内部变量影响不到默认值变量 */ function sampleFn(sample1 = sample) { let sample = 2; console.log(sample1); return sample1; }sampleFn() // 1

rest 参数 ES6 引入 rest 参数，用于获取函数的多余参数。
arguments 对象是类数组，rest 参数是真正的数组。
?
形式为：...变量名，函数的最后一个命名参数以...为前缀。

// 下面例子中 ...values 为 rest参数，用于获取多余参数 const sample = function (title, ...values) { let sample = values.filter( (item) => { return item % 2 === 0; } )return (title + sample); }console.log(sample("求偶数", 1, 2, 6, 2, 1)); // 求偶数 2, 6, 2

注意：rest参数只能是函数的最后一个参数，函数的length不包括rest参数

严格模式在JavaScript中，只要在函数中的严格模式，会作用于函数参数和函数体。
ES2016 规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

function sample() { // 参数使用默认值、解构赋值、扩展运算符 'use strict'; // 开启严格模式 }

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

function sample() { }; let sample1 = function () { }; function sample2() {}; console.log(sample.name); // sample console.log(sample1.name); //sample1 // bound sample2使用了 bind 方法，输出会有bound前缀 console.log(sample2.bind({}).name); console.log((new Function).name); // anonymous构造函数的name值为 anonymous

箭头函数简单介绍 ES 6 新增一种函数定义方法，使用箭头连接参数列与函数题。
箭头函数相当于匿名函数，并且简化了函数定义，箭头函数没有prototype。

// 普通函数 let sample = function (item) { return item; }; // 上面函数等同于下面函数// 使用箭头函数 let sample = (item) => { return item}; // 箭头函数

箭头函数简写没错，箭头函数还可以简写

当参数只有一个时，可以省略箭头左边的括号，但没有参数时，括号不可以省略。
当函数体只有一个表达式时，可省略箭头右边的大括号，但同时必须省略return语句并写在一行。
当函数体分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

// 下面几种函数写法都相同 let sample = function (item) { return item; }; let sample = (item) => { return item}; // 箭头函数不省略let sample = item => { return item}; // 省略左边圆括号let sample = (item) => item; // 省略右边大括号和 returnlet sample = item => item; // ?省略左边圆括号和右边花括号和return// 如果不需要返回值的特殊情况 let sample = item => void item; console.log(sample()); // undefined

注意点

箭头函数的 This 默认指向定义它的作用域的 This。
箭头函数不能用作构造函数。
箭头函数不可以使用 arguments 对象，该对象在函数体内不存在。
箭头函数不可以使用yield命令，也就不能作为 Generator 函数。

箭头函数的this
箭头函数会继承自己定义时所处的作用域链上一层的this。
箭头函数 this在定义的时候已经确定了，所以箭头函数this不会改变。
使用 call() 或 apply() 方法时，也不能重新给箭头函数绑定this，bing()方法无效。

window.sample = "window 内 "; function sampleFn() { let thiz = this; let sample = "sampleFn 内 "; let sampleObj = { sample: "sampleObj 内 ",// 普通函数 sampleFn1: function () { console.log(thiz === this); console.log(this.sample); },// 箭头函数 sampleFn2: () => { // 箭头函数的作用域为 sampleObj 上一层为 sampleFn console.log(thiz === this); //箭头函数的 this console.log(this.sample); } }sampleObj.sampleFn1(); // false, sampleObj 内 sampleObj.sampleFn2(); // true, window 内 }sampleFn();

尾调用优化有两个概念

尾调用
尾调用（Tail Call）是函数式编程的一个重要概念，就是指某个函数的最后一步是调用另一个函数。
尾递归
函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

ES6 明确规定，所有 ECMAScript 的实现，都必须部署“尾调用优化”。
这就是说，ES6 中只要使用尾递归，就不会发生栈溢出（或者层层递归造成的超时），相对节省内存。
这是什么意思呢？
尾调用的作用，在原文中是这样写的：

我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

换种方式解释吧

函数被调用的时候会有函数执行上下文被压入执行栈中，直到函数执行结束，对应的执行上下文才会出栈。
在函数A的内部调用函数B，如果函数B中有对函数A中变量的引用，那么函数A即使执行结束对应的执行上下文也无法出栈，如果函数B内部还有调用函数C那么要等函数C执行完，函数A、B对应的执行上下文才能出栈，以此类推，执行栈中要上一个函数(内层函数)的执行上下文，这就是尾调用优化。