h7ml
前端物语
前端物语
积微成著

JavaScript function 函数对象-数据类型

  • 函数分类
    • 普通命名函数
    • 通过名字调用执行
1function fn() {}
  • 事件处理函数
    • 可以是匿名函数也可以是匿名函数，通过元素对象的事件触发来执行
1btn.onclick = function () {}
  • 构造函数
    • 通过 new 运算符来执行
1function Person() {}
2new Person()
  • 回调函数
    • 在主函数中满足一定条件调用执行 匿名函数也可以是命名函数
  • 表达式函数：将一个函数 赋值给一个变量 通过函数名的调用执行
1const a = function () {}
  • 匿名函数：闭包
1(function (name) {
2  console.log(name)
3  return 'aaa'
4})('mark');
5// 或者
6+(function (name) {
7  console.log(name)
8})('mark')
9// 或者
10!(function (name) {
11  console.log(name)
12})('mark')

callee 与 caller

1function a() {
2  console.log(arguments.callee) // 当前函数
3  console.log(a.caller) // 真正调用此函数的函数
4}

改变 this 指向

1fn.call(obj,a,b,c...);// 多个参数
2fn.apply(obj,[a,b,c...]);// 两个参数，第二个为数组
3fn.bind(obj,a,b,c...);// 与 call 一样，返回的是函数本身

:::tip 注意第一个参数传 null 为不改变 this 指向 :::

函数的 length 属性

1(function (a) {})
2  .length(
3    // 1
4    (a = 5) => {}
5  )
6  .length(
7    // 0
8    (a, b, c = 5) => {}
9  )
10  .length(
11    // 2 有一个默认值， 3-1 = 2
12
13    // 数值为参数的长度，但指定了默认值 length 属性将失真
14    (...args) => {}
15  )
16  .length(
17    // 0
18
19    // 如果设置了默认值的参数不是尾参数，那么 length 属性也不再计入后面的参数了。
20    (a = 0, b, c) => {}
21  )
22  .length(
23    // 0
24    (a, b = 1, c) => {}
25  ).length // 1

name 属性

1function foo() {}
2foo.name(
3  // "foo"
4  // 构造函数 name 为构造出来对象下的值
5  new Function()
6)