ES6新增特性——函数的扩展

·  阅读 1039

一、函数参数的默认值

1、基本用法

ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

// ES6 之前
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

// ES6
function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
复制代码

除了简洁,ES6 的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接口中,彻底拿掉这个参数,也不会导致以前的代码无法运行。

注意:

  • 参数变量是默认声明的,所以不能用letconst再次声明。
  • 使用参数默认值时,函数不能有同名参数。
  • 参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。

2、与解构赋值默认值结合使用

当函数的参数是一个对象,且没提供具体变量时,变量只有通过解构赋值才会生成。如果函数调用时没提供参数,变量就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo() // TypeError: Cannot read property 'x' of undefined

// 函数参数默认值与解构赋值默认值结合使用
function foo({x, y = 5} = {}) {
  console.log(x, y);
}
foo() // undefined 5
复制代码

两者结合后,当函数foo没有参数时,函数参数的默认值{}就会生效,然后才是解构赋值的默认值生效,变量才会取到默认值。

3、参数默认值的位置

通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。

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

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
复制代码

4、应用

利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter
复制代码

另外,可以将参数默认值设为undefined,表明这个参数是可以省略的。

function foo(optional = undefined) { ··· }
复制代码

二、属性

1、length属性

函数的length属性,返回该函数的参数个数。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
复制代码

注意: 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数(指定默认值参数位置需要是尾参数)。也就是说,指定了默认值后,length属性将失真。

2、name属性

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

function foo() {}
foo.name // "foo"
复制代码

这个属性早就被浏览器广泛支持,但是直到 ES6,才将其写入了标准。

注意: ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。


三、rest 参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(a, ...values) {
  let sum = 0;
  
  for (var val of values) {
    sum += val;
  }
  
  return sum;
}

let a = "a"

add(a, 2, 5, 3)   // 10
复制代码

下面是一个 rest 参数代替arguments变量的例子。

// arguments变量的写法
function sortNumbers() {
  return Array.from(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
复制代码

上面代码的两种写法,比较后可以发现,rest 参数的写法更自然也更简洁。arguments对象是类似数组的对象。所以为了使用数组的方法,必须使用Array.from先将其转为数组。rest 参数就不存在这个问题,它就是一个真正的数组,数组特有的方法都可以使用。

注意: rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。函数的length属性,不包括 rest 参数。


四、严格模式

从 ES5 开始,函数内部可以设定为严格模式。

ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

两种方法可以规避这种限制。第一种是设定全局性的严格模式,这是合法的。

'use strict';

function doSomething(a, b = a) {
  // code
}
复制代码

第二种是把函数包在一个无参数的立即执行函数里面。

const doSomething = (function () {
  'use strict';
  return function(value = 42) {
    return value;
  };
}());
复制代码

五、箭头函数

1、基本用法

ES6 允许使用“箭头”(=>)定义函数。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
复制代码

(1)如果箭头函数不需要参数,就使用一个圆括号代表参数部分。只有一个参数时,可以省略圆括号。

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

var sum = n => n * 2;
// 等同于
var sum = function(n) {
  return n * 2;
};
复制代码

(2)如果箭头函数只有一行语句,可以不用写return和大括号。

var sum = (num1, num2) => num1 + num2;
复制代码

(3)如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

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

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

(4)箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}
复制代码

(5)箭头函数可以与 rest 参数结合使用。

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)   // [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)   // [1,[2,3,4,5]]
复制代码

2、箭头函数与普通函数的区别

  1. 箭头函数更简洁;

  2. 箭头函数没有自己的 this ,没有 prototype,也没有自己的 arguments、super、new.target;

  3. 箭头函数可以继承上层作用域中的 this,但是继承来的 this 指向永远不能改变,call()、apply()、bind() 方法都不能改变箭头函数的 this 指向;

  4. 箭头函数不能作为构造函数使用;

  5. 箭头函数不能用作 Generator 函数,不能使用 yeild 关键字。

3、不适用箭头函数的场合

(1)定义对象的方法,且该方法内部包括this

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}
复制代码

上面代码中,cat.jumps()方法是一个箭头函数,这是错误的。调用cat.jumps()时,如果是普通函数,该方法内部的this指向cat;但是写成上面那样的箭头函数,使得this指向全局对象,因此不会得到预期结果。这是因为对象不构成单独的作用域,导致jumps箭头函数定义时的作用域就是全局作用域。

(2)需要动态this的时候,也不应使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});
复制代码

上面代码运行时,点击按钮会报错,因为button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。

(3)其他场合

如果函数体很复杂,有许多行,或者函数内部有大量的读写操作,不单纯是为了计算值,这时也不应该使用箭头函数,而是要使用普通函数,这样可以提高代码可读性。


六、尾调用优化

1、什么是尾调用?

尾调用(Tail Call)就是指某个函数的最后一步执行的是调用另一个函数。

function f(x){
  return g(x);
}
复制代码

以下三种情况,都不属于尾调用。

// 情况一:调用函数 g 之后,还有赋值操作,所以不属于尾调用,即使语义完全一样。
function f(x){
  let y = g(x);
  return y;
}

// 情况二:调用后还有操作,即使写在一行内。
function f(x){
  return g(x) + 1;
}

// 情况三:调用函数 g 之后,还有 return 操作。
function f(x){
  g(x);
}
// 等同于
function f(x){
  g(x);
  return undefined;
}
复制代码

尾调用不一定出现在函数尾部,只要是最后一步操作即可。

function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}
复制代码

上面代码中,函数mn都属于尾调用,因为它们都是函数f的最后一步操作。

2、尾调用优化

“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。

我们知道,函数调用会在内存形成一个“调用记录”,又称“调用帧”(call frame),保存调用位置和内部变量等信息。如果在函数A的内部调用函数B,那么在A的调用帧上方,还会形成一个B的调用帧。等到B运行结束,将结果返回到AB的调用帧才会消失。如果函数B内部还调用函数C,那就还有一个C的调用帧,以此类推。所有的调用帧,就形成一个“调用栈”(call stack)。

尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。如果所有函数都是尾调用,那么完全可以做到每次执行时,调用帧只有一项,这将大大节省内存。这就是“尾调用优化”的意义。

function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {
  return g(3);
}
f();

// 等同于
g(3);
复制代码

上面代码中,如果函数g不是尾调用,函数f就需要保存内部变量mn的值、g的调用位置等信息。但由于调用g之后,函数f就结束了,所以执行到最后一步,完全可以删除f(x)的调用帧,只保留g(3)的调用帧。

注意: 目前只有 Safari 浏览器支持尾调用优化,Chrome 和 Firefox 都不支持。

3、尾递归

函数调用自身,称为递归。如果尾调用自身,就称为尾递归。

递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。

4、严格模式

ES6 的尾调用优化只在严格模式下开启,正常模式是无效的。


七、其他新增内容

函数除了以上新增特性外,还有函数参数的尾逗号,Function.prototype.toString(),catch 命令的参数省略,具体可点击查看

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改