乐趣区

关于es6:ES6学习-第七章-函数的扩展

jiezi

前言

本章介绍函数的扩大。有些不罕用的常识理解即可。
本章原文链接：函数的扩大。

函数参数的默认值

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

留神：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}; // 箭头函数

箭头函数简写

没错，箭头函数还能够简写

  1. 当参数只有一个时，能够省略箭头右边的括号，但没有参数时，括号不能够省略。
  2. 当函数体只有一个表达式时，可省略箭头左边的大括号，但同时必须省略 return 语句 并写在一行。
  3. 当函数体分多于一条语句，就要应用大括号将它们括起来，并且应用 return 语句返回。
// 上面几种函数写法都雷同
let sample = function (item) {return item;};

let sample = (item) => {return item}; // 箭头函数 不省略

let sample = item => {return item}; // 省略右边圆括号

let sample = (item) => item; // 省略左边大括号和 return

let 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();

尾调用优化

有两个概念

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

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 对应的执行上下文能力出栈，以此类推，执行栈中要上一个函数 (内层函数) 的执行上下文，这就是尾调用优化。

// 尾递归
function sampleFn(sample) {if (sample <= 1) return 1;
  return sampleFn(sample - 1) + sample;
}
sampleFn(2);

留神 :

  • 当内层函数没有用到外层函数的外部变量的时候才能够进行尾调用优化。
  • 目前只有 Safari 浏览器反对尾调用优化，Chrome 和 Firefox 都不反对。

ES 6 的小批改

函数参数尾逗号

ES2017 容许函数的最初一个参数有尾逗号（trailing comma）。
这样的规定也使得，函数参数与数组和对象的尾逗号规定，保持一致了。

function sampleFn(
  sample1,
  sample2,
  sample3, // 能够在最初一个参数前面加 逗号 ','
) {}

toString()批改

Function.prototype.toString()
ES2019 对函数实例的 toString() 办法做出了批改。明确要求返回截然不同的原始代码。
toString()办法返回函数代码自身，ES6 前会省略正文和空格。

function sampleFn() {// 正文}

let sample = sampleFn.toString();
console.log(sample);
// 输入 齐全一样的原始代码，包含空格与正文
/*
function sampleFn() {// 正文}
*/

catch 批改

ES2019 扭转了 catch 语句前面必须携带参数的要求。容许 catch 语句省略参数。

try {// ...} catch { // 不带参数
  // ...
}
退出移动版