7函数的扩展

OLD函数默认参数

// 缺点：布尔值为false的变量都会被赋为默认值
function fn(x) {
    x = x || 'hello'
}
// 比较麻烦
function fn (x) {
    if (typefo x === 'undefined') {
        x = 'hello'
    }
}

基本用法

在 ES2017 中，允许定义和调用函数时，最后一个参数有,

惰性求值

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101

报错情景

1. 当函数参数x有默认值，再在函数中声明就会报错
2. 当函数参数都没有默认值，允许参数同名。只要函数参数有一个就没有默认值，就不允许函数参数同名。
3. 当函数参数有对象解构的情况，函数对象中的属性不能和其它参数同名

// 情景3 ---- 报错
function fn (x,{x = 1,n = 2}={}) {
        console.log(x,n)
    }
fn('yy');

函数参数对象

function fn({x,y=1}) {
    console.log(x,y)
}
fn({}) // undefined,1
fn() // 报错

1. 报错原因，当没有参数时，其实默认参数为undefined。对象和undefined发生解构报错。
2. 正确原因，传入对象，发生解构，x没有默认解构值，则为undefined,y有默认解构值，则为1

function fn({x,y=1} = {}) {
    console.log(x,y)
}
fn({}) // undefined,1
fn() // undefined,1

1. fn()执行过程如下

• 调用fn，没有参数，使用函数默认参数{}
• 发生对象解构，x没有解构默认值，y有默认解构值

// 分析以下案例
// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

默认值位置

1. 应该时函数的尾参数
2. 有默认值，会影响fn.length

• 一般是fn.length - 默认参数个数
• 当默认参数不是尾参数，fn.length是第一个默认参数之前的参数的个数
• 当参数是...rest,fn.length是0

作用域

当函数有默认值时，参数会形成一个独立的作用域

简单案例

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

function ff (y = x) {
    console.log(y);
}

1. 函数f的参数形成一个默认作用域。函数初始化过程

• 参数x被赋值为2
• 参数y被赋值为x，在当前作用域中找x，找到x = 2，因此y = 2

2. 函数初始化过程

• 没有参数x
• 参数y被赋值为x，在当前作用域中没有x，找到全局变量x，因此y = 1

参数为函数的案例

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3
x // 1

1. 函数初始化

• 参数x没有默认值，因此，在函数foo中再声明x不会报错
• 在函数foo的参数作用域中，x先为undefined，在调用y时，x是参数而不是全局变量x，此时参数x改为2
• 但是由于，在函数再次声明了x，这个x完全不是参数，因此函数foo打印x为3

2. 当去掉var x = 3，函数foo的参数，其实相当于声明并赋值参数x，没有函数内部变量x，参数x就会被打印。

rest参数

1. 形式，function fn(...rest)
2. rest参数是数组，之后不允许有参数

严格模式

1. 函数中可以使用use strict设置严格模式
2. 当函数参数有默认值，解构赋值，扩展运算符时，不允许使用严格模式
3. 有两种方法可以规避以上规则

• 全局严格模式
• 在立即调用的函数中使用严格模式

name属性

1. name属性使用方式fnName.name

function fn() {} // fn.name--->fn
var fn = function () {} // fn.name--->fn
var fn = function fun() {} // fn.name----->fun
fn.bind({},1) // fn.name---->bound fn
(new Function).name // ----> anonymous
(function () {}).name //---->''

箭头函数

箭头函数结构

functionName = (arg1,arg2) => {arg1 + arg2};

1. 其中函数名省略，则为匿名函数
2. 根据参数情况也可以省略

• 当没有参数或者两个及两个以上参数时，(小括号不可省略
• 当有一个参数时，小括号可以省略

3. 当函数体只有一条语句，可以省略{大括号，并默认有return返回。当不需要返回值时

• 即使一条语句也加上{，这样就没有返回值
• 使用void (一条语句)，这样也没有返回值

var fn = (x,y) => x + y;
// 等价于
function fn (x,y) {
    return x + y;
} 

箭头函数

1. this固定，指向定义时的this
2. 箭头函数不能做构造函数
3. 不能使用arguments
4. 不能使用yield，也就是箭头函数不能做Generator

注意点

1. 箭头函数中没有自己的this，只是引用外层的this
2. 箭头函数无法使用call(),apply(), bind()改变this执行

分析过程(一)

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// result: 42

1. 当执行foo.call({id: 42})内部的this指向{id: 42}
2. 此时，箭头函数没有自己的this。外部的this就是{id:42}
3. 即使100毫秒后，在setTimeout中，this也不改变为window

分析过程(二)

function foo() {
  setTimeout(function() {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// result: 21

1. 普通函数，this指向运行时的上下文环境
2. setTimeout伪代码function setTimeout() {//delay... callback();},可以看到callback函数，也就是普通函数的没有绑定到其它对象上

尾调用

1. 最后一步调用其它函数，称为尾调用
2. 尾调用函数定义时，不使用外层函数的变量
3. 尾调用，有利于节约内存

// 这种情况没有使用外层函数的变量
function f() {
  let m = 1;
  let n = 2;
  return g(m + n);  // 最后一步用
}
f();
// 这种情况使用了外层函数的变量
function f() {
  let m = 1;
  function g(n) {
      return m + n;
  }
  return g(2);  // 最后一步用
}
f();