浅谈JavaScript的对象类型之function

樹先生

一、Function


定义函数

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

复制代码

例如：

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

复制代码

调用函数

1. 函数名(实参);

复制代码

例如：

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

复制代码

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

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

复制代码

默认参数

java中（spring）要实现默认参数的效果

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

复制代码

js实现的效果

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

复制代码

匿名函数

语法：

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

复制代码

例如：

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

复制代码

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

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

复制代码

第二种场景：作为其他对象的方法，例如：
页面有元素：

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

复制代码

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

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

复制代码

箭头函数

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

复制代码

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

复制代码

例如：

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

复制代码

二、函数是对象

1、可以参与赋值，例如，匿名函数也能参与赋值

1. function abc() {
   
2.     console.log("bb");
   
3. }
   
4. document.getElementById("p1").onclick = abc;

复制代码

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

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

复制代码

1. 其中带有 f 标记的是方法，不带的是属性
   
2. 带有 ➡ 符号的可以继续展开，限于篇幅省略了
   
3. 带有 [code][[ ]]

复制代码

的是内置属性，不能访问，只能查看相对重要的是

1. [[Prototype]]

复制代码

和

1. [[Scopes]]

复制代码

会在后面继承和作用域时讲到[/code]3、可作为方法参数

1. function a() {
   
2.     console.log('a')
   
3. }
   
4. function b(fn) {          // fn 将来可以是一个函数对象
   
5.     console.log('b')
   
6.     fn();                 // 调用函数对象
   
7. }
   
8. b(a)

复制代码

4、可作为方法返回值

1. function c() {
   
2.     console.log("c");
   
3.     function d() {
   
4.         console.log("d");
   
5.     }
   
6.     return d;
   
7. }
   
8. c()()

复制代码

三、函数作用域

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

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

复制代码

例如：

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

复制代码

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

复制代码

四、闭包

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

复制代码

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

复制代码

五、let、var与作用域

如果函数外层引用的是let变量，那么外层普遍的{}也会作为作用于边界，最外层的let也占一个script作用域

1. let x = 10;
   
2. if(true) {
   
3.     let y = 20;
   
4.     function b() {
   
5.         console.log(x,y);
   
6.     }
   
7.     console.dir(b);
   
8. }

复制代码

如果函数外层引用的是var变量，外层普遍的{}不会视为边界

1. var x = 10;
   
2. if(true) {
   
3.     var y = 20;
   
4.     function b() {
   
5.         console.log(x,y);
   
6.     }
   
7.     console.dir(b);
   
8. }

复制代码

如果var变量出现了重名，则他俩会被视为同一作用域中的同一变量

1. var e = 10;
   
2. if(true) {
   
3.     var e = 20;
   
4.     console.log(e);        // 打印 20
   
5. }
   
6. console.log(e);                // 因为是同一个变量，还是打印 20

复制代码

如果是let，则视为两个作用域中的两个变量

1. let e = 10;
   
2. if(true) {
   
3.     let e = 20;       
   
4.     console.log(e);        // 打印 20
   
5. }
   
6. console.log(e);                // 打印 10

复制代码

要想里面的e和外面的e能区分开来，最简单的办法是改成let，或者用函数来界定作用域范围

1. var e = 10;
   
2. if(true) {
   
3.     function b() {
   
4.         var e = 20;
   
5.             console.log(e);
   
6.     }
   
7.     b();
   
8. }
   
9. console.log(e);

复制代码

到此这篇关于浅谈JavaScript的对象类型之function的文章就介绍到这了,更多相关JavaScript 对象类型function内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/2844403me.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！