函数的扩展

基本用法#

通过给形参赋初始值，具有默认值的参数, 一般位置要靠后(潜规则)，只有当传入的参数的值为undefined时才会使用默认值

1
  function log(x, y = "World") {
2
    console.log(x, y)
3
  }
4

5
  log("Hello") // Hello World
6
  log("Hello", "China") // Hello China
7
  log("Hello", "") // Hello

使用参数默认值时，函数不能有同名参数

1
    // 不报错，但是先传入的同名参数会被后面覆盖
2
    function fun(x, x, y) {
3
        // ...
4
    }
5

6
    // 报错
7
    function fun(x, x, y = 1) {
8
        // ...
9
    }
10
    // SyntaxError: Duplicate parameter name not allowed in this context

与解构赋值默认值结合使用#

参数默认值可以与解构赋值的默认值，结合起来使用

1
  function fun({ x, y = 5 }) {
2
    console.log(x, y);
3
  }
4

5
  fun({}); // undefined 5
6
  fun({ x: 1 }); // 1 5
7
  fun({ x: 1, y: 2 }); // 1 2
8
  fun(); // TypeError: Cannot read property 'x' of undefined

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值

只有当函数fun的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数fun调用时没提供参数，变量x和y就不会生成，从而报错

1
  function fun({ x, y = 5 } = {}) {
2
    console.log(x, y)
3
  }
4

5
  fun() // undefined 5

上面代码指定，如果没有提供参数，函数fun的参数默认为一个空对象

例：

1
  function fetch(url, { body = "", method = "GET", headers = {} }) {
2
    console.log(method);
3
  }
4

5
  fetch("https://example.com", {});
6
  // "GET"
7

8
  fetch("https://example.com");
9
  // 报错

上面代码中，如果函数fetch的第二个参数是一个对象，就可以为它的三个属性设置默认值。 这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

1
  function fetch(url, { body = "", method = "GET", headers = {} } = {}) {
2
    console.log(method);
3
  }
4

5
  fetch("https://example.com");
6
  // "GET"

上面代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET

问：以下代码有何区别

1
  // 写法一
2
  function m1({ x = 0, y = 0 } = {}) {
3
    return [x, y]
4
  }
5

6
  // 写法二
7
  function m2({ x, y } = { x: 0, y: 0 }) {
8
    return [x, y]
9
  }

上面两种写法都对函数的参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值 写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值

1
  // 函数没有参数的情况
2
  m1() // [0, 0]
3
  m2() // [0, 0]
4

5
  // x 和 y 都有值的情况
6
  m1({ x: 3, y: 8 }) // [3, 8]
7
  m2({ x: 3, y: 8 }) // [3, 8]
8

9
  // x 有值，y 无值的情况
10
  m1({ x: 3 }) // [3, 0]
11
  m2({ x: 3 }) // [3, undefined]
12

13
  // x 和 y 都无值的情况
14
  m1({}) // [0, 0];
15
  m2({}) // [undefined, undefined]

函数的 length 属性#

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数

1
    (function (a) {}).length // 1
2
    (function (a = 5) {}).length // 0
3
    (function (a, b, c = 5) {}).length // 2

因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了

1
  (function (a, b = 1, c) {}).length  // 1

作用域#

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域(context)。等到初始化结束，这个作用域就会消失

1
  let x = 1
2

3
  function fun(x, y = x) {
4
      console.log(y)
5
  }
6

7
  fun(2) // 2

上面代码中，参数y的默认值等于x，调用fun()时，此时形成了封闭的作用域，默认值x指向第一个参数x，也就是2

1
    let x = 1
2

3
    function fun(y = x) {
4
        let x = 3
5
        console.log(y)
6
    }
7

8
    fun() // 1

上面代码中，函数f调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x。

如果此时，全局变量x不存在，就会报错

基本用法#

1
    let fun = function (a) {
2
        return a * a
3
    }
4

5
  // 等价于
6
    let fun = (a) => {
7
        return a * a
8
    }

如果箭头函数当形参有且只有一个的时候，可以省略() 当代码体只有一条语句的时候, 可以省略{}，但此时 return 必须省略，return 返回该条语句执行结果

1
    let fun = (a) => {
2
        return a * a
3
    }
4

5
  //等价于
6
  let fun = a => a * a

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错

1
  // 报错
2
  let getTempItem = id => { id: id, name: "Temp" }
3

4
  // 不报错
5
  let getTempItem = id => ({ id: id, name: "Temp" })

注意事项#

• this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值

  1
   function getName() {
  2
       console.log(this.name)
  3
   }
  4
  
  5
   let getName2 = () => {
  6
       console.log(this.name)
  7
   }
  8
  
  9
   window.name = "window"
  10
   const obj = {
  11
       name: "obj"
  12
   }
  13
  
  14
   // 直接调用
  15
   getName() //window
  16
   getName2() //window
  17
  
  18
   // call 方法调用
  19
   getName.call(obj) //obj
  20
   getName2.call(obj) //window

  展开收起

  上面代码中都是定义在全局作用域中，而箭头函数getName2() this始终指向全局作用域，不随 call() 的调用而改变

  如在回调函数中使用 let div = document.getElementById(“test-div”) div.onclick = function () { // setTimeout(function () { // console.log(this) // 此时this是window // this.style.background = “red” // },2000)

  1
       setTimeout(() => {
  2
       // 此时this是外部作用域div
  3
           this.style.background = "red"
  4
       }, 2000)
  5
   }

• 不能作为构造实例化对象,也就是说，不可以使用new命令，否则会抛出一个错误

  1
    let Person = (name, age) => {
  2
        this.name = name
  3
        this.age = age
  4
    }
  5
    let me = new Person('tom',30)
  6
    //Uncaught TypeError: Person is not a constructor
  7
    console.log(me)

• 不能使用 arguments 变量,该对象在函数体内不存在。如果要用，可以用 rest 参数代替

  1
    let fun = () => {
  2
        console.log(arguments);
  3
    }
  4
    fun(1, 2)
  5
    // ReferenceError: arguments is not defined