JS函数function

函数的本质是对象

---

定义函数

function 函数名(参数) {
    // 函数体
    return 结果;
}
1
2
3
4

例

function add(a, b) {
    return a + b;
}
1
2
3

调用函数

函数名(实参);
1

例

add(1, 2);     // 返回 3
1

js 中的函数调用特点：对参数的类型和个数都没有限制，例如

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN
1
2
3

默认参数

java 中（spring）要实现默认参数的效果得这么做：

@RestController 
public class MyController {
    
    @RequestMapping("/page")
    @ResponseBody
    public void page(
        @RequestParam(defaultValue="1") int page, 
        @RequestParam(defaultValue="10") int size
    ){
        // ...
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

js

function pagination(page = 1, size = 10) {
    console.log(page, size);
}
1
2
3

匿名函数

语法

(function (参数) {
    // 函数体
    return 结果;
})
1
2
3
4

例

(function(a,b){
    return a + b;
})
1
2
3

第一种场景：定义完毕后立刻调用

(function(a,b){
    return a + b;
})(1,2)
1
2
3

第二种场景：作为其它对象的方法，例如

页面有元素

<p id="p1">点我啊p>
1

此元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是 null，需要赋值后才能使用

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});
1
2
3

箭头函数

(参数) => {
    // 函数体
    return 结果;
}
1
2
3
4

• 如果没有参数，() 还是要保留
• 如果只有一个参数，() 可以省略
• 如果函数体内只有一行代码，{} 可以省略
• 如果这一行代码就是结果，return 可以省略

例

document.getElementById("p1").onclick = () =>  console.log("aa");
1

函数是对象

以下形式在 js 中非常常见！

1. 可以参与赋值，例，具名函数也能参与赋值

function abc() {
    console.log("bb");
}

document.getElementById("p1").onclick = abc;
1
2
3
4
5

2. 有属性、有方法，执行 console.dir(abc)，输出结果如下

ƒ abc()
    arguments: null
    caller: null
    length: 0
    name: "abc"
    ➡prototype: {constructor: ƒ}
    [[FunctionLocation]]: VM1962:1
    ➡[[Prototype]]: ƒ ()
    ➡[[Scopes]]: Scopes[1]
1
2
3
4
5
6
7
8
9

• 其中带有 f 标记的是方法，不带的是属性

• 带有 ➡ 符号的可以继续展开，限于篇幅省略了

• 带有 [[ ]] 的是内置属性，不能访问，只能查看

• 相对重要的是 [[Prototype]] 和 [[Scopes]] 会在后面继承和作用域时讲到

3. 可以作为方法参数

function a() {
    console.log('a')
}

function b(fn) {          // fn 将来可以是一个函数对象
    console.log('b')
    fn();                 // 调用函数对象
}

b(a)
1
2
3
4
5
6
7
8
9
10

4. 可以作为方法返回值

function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()
1
2
3
4
5
6
7
8
9

函数作用域

函数可以嵌套（js 代码中很常见，只是嵌套的形式更多是匿名函数，箭头函数）

function a() {
    function b() {        
    }
}
1
2
3
4

看下面的例子

function c() {
    var z = 30;
}

var x = 10;
function a() {
    var y = 20;
    function b() {
        // 看这里
        console.log(x, y);
    }
    b();
}
a();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 以函数为分界线划定作用域，所有函数之外是全局作用域
• 查找变量时，由内向外查找
  • 在内层作用域找到变量，就会停止查找，不会再找外层
  • 所有作用域都找不到变量，报错
• 作用域本质上是函数对象的属性，可以通过 console.dir 来查看调试

闭包

var x = 10;
function a() {
    var y = 20;
    function b() {
        console.log(x,y);
    }
    return b;
}
a()();  // 在外面执行了 b
1
2
3
4
5
6
7
8
9

• 函数定义时，它的作用域已经确定好了，因此无论函数将来去了哪，都能从它的作用域中找到当时那些变量
• 别被概念忽悠了，闭包就是指函数能够访问自己的作用域中变量