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

当筵意气临九霄，星离雨散不终朝。这篇文章主要讲述ES6学习第七章函数的扩展相关的知识，希望能为你提供帮助。
前言本章介绍函数的扩展。有些不常用的知识了解即可。
本章原文链接：函数的扩展。
函数参数的默认值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 参数需对应解构赋值的类型

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

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

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

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

name 属性【ES6学习第七章函数的扩展】函数的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();

尾调用优化有两个概念