JavaScript 函数

函数(Function)

  • 函数也是一个对象,也具有普通对象的功能
  • 函数中可以封装一些代码,在需要的时候可以去调用函数来执行这些代码
  • 使用typeof检查一个函数时会返回function

    1. 创建函数

    • 函数声明
      function 函数名([形参1,形参2...形参N]){语句...
      }
      
      • 函数表达式
        var 函数名 = function([形参1,形参2...形参N]){语句...
        };
        

        2. 调用函数

        • 语法:函数对象([实参1,实参2…实参N]);

          fun() sum() alert() Number() parseInt()

        • 当我们调用函数时,函数中封装的代码会按照编写的顺序执行

        • 形参和实参

          • 形参:形式参数
          • 定义函数时,可以在()中定义一个或多个形参,形参之间使用,隔开
          • 定义形参就相当于在函数内声明了对应的变量但是并不赋值,
          • 形参会在调用时才赋值。
          • 实参:实际参数

            • 调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参,调用函数时JS解析器不会检查实参的类型和个数,可以传递任意数据类型的值。
            • 如果实参的数量大于形参,多余实参将不会赋值,
            • 如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined

              3. 返回值,就是函数执行的结果。

              • 使用return 来设置函数的返回值。
              • 语法:return 值;
              • 该值就会成为函数的返回值,可以通过一个变量来接收返回值
              • return后边的代码都不会执行,一旦执行到return语句时,函数将会立刻退出。
              • return后可以跟任意类型的值,可以是基本数据类型,也可以是一个对象。
              • 如果return后不跟值,或者是不写return则函数默认返回undefined。

                4. break、continue和return

                • break

                  退出循环

                • continue

                  跳过当次循环

                • return

                  退出函数

                  参数,函数的实参也可以是任意的数据类型。

                  5.立即执行函数

                  • 函数定义完,立即被调用
                  • 如果只想调用函数一次的话可以使用立即执行函数,即用一个括号将匿名函数包裹起来,并且在其后面再加**();**即可。
                  • 立即函数往往只会执行一次
                  • 语法:
                    //无参数
                    (function(){alert("我是一个匿名函数");
                    })();
                    //有参数
                    function(a,b){console.log(a);
                    	console.log(b);
                    }(1,2);
                    

                    6. 方法(method)和枚举对象中的属性

                    6.1 方法(method)

                    • 可以将一个函数设置为一个对象的属性,当一个对象的属性值是一个函数时,我们称这个函数是该对象的方法。
                    • 调用函数就说调用对象的方法(method)
                    • 只是名称上的区别,没有其他的区别
                    • 举例:
                      var obj = new Object();
                      //向对象添加属性
                      obj.name = "孙悟空";
                      obj.age = 18;
                      //对象的属性值可以是任何的数据类型,也可以是个函数
                      obj.sayName(){alert(obj.name);
                      };
                      //console.log(obj.name)
                      obj.sayName();
                      

                      6.2 枚举对象中的属性

                      • 枚举对象中的属性,使用for … in 语句
                      • for…in 语句对象中有几个属性,循环体就会执行几次,每次执行时,会将对象中的一个属性的名字赋值给一个变量
                      • 可以设定一个对象名.[n]来输出属性里面的值
                      • 语法:
                        for(var 变量 in 对象){}
                        
                        • 举例
                          //创建对象
                          var obj = {name:"孙悟空";
                          	age:18;
                          	gender:"男";
                          	address:"花果山";
                          }
                          //枚举对象中的属性
                          for(var n in obj){//枚举属性名
                          	console.log(n);
                          	//枚举属性值
                          	console.log(obj.[n]);
                          }
                          

                          7. 作用域

                          • 作用域简单来说就是一个变量的作用范围。
                          • 在JS中作用域分成两种:

                            7.1 全局作用域

                            • 直接在script标签中编写的代码都运行在全局作用域中
                            • 全局作用域在打开页面时创建,在页面关闭时销毁。
                            • 全局作用域中有一个全局对象window,window对象由浏览器提供,可以在页面中直接使用,它代表的是整个的浏览器的窗口。
                            • 在全局作用域中创建的变量都会作为window对象的属性保存
                            • 在全局作用域中创建的函数都会作为window对象的方法保存
                            • 在全局作用域中创建的变量和函数可以在页面的任意位置访问。
                            • 在函数作用域中也可以访问到全局作用域的变量。
                            • 尽量不要在全局中创建变量

                              7.2 函数作用域

                              • 调用函数时创建函数作用域,函数执行完毕后,函数作用域销毁
                              • 函数作用域是函数执行时创建的作用域,每次调用函数都会创建一个新的函数作用域,他们之间都是相互独立的
                              • 在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量
                              • 当在函数作用域中使用一个变量时,它会先在自身作用域中寻找,如果找到了则直接使用,如果没有找到则到上一级作用域中寻找,如果找到了则使用,找不到则继续向上找,直到找到全局作用域,如果全局作用域中依然没有找到,则会报错
                              • 在函数中要访问全局变量可以使用window对象,例如console.log(window.a)
                              • 变量的声明提前:
                                • 在全局作用域中,使用var关键字声明的变量会在所有的代码执行之前被声明,但是不会赋值。所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
                                • 函数的声明提前:
                                  • 使用函数声明形式创建的函数function 函数(){},它会在所有的代码执行之前就被创建,所以我们可以在函数声明前调用该函数
                                  • 使用函数表达式var fun = function(){}创建的函数,不会被声明提前,所以不能在声明前调用
                                  • 在函数作用域中,也具有该特性,使用var关键字声明的变量会在函数所有的代码执行前被声明,如果没有使用var关键字声明变量,则变量会变成全局变量
                                  • 例如:
                                    function fun(){console.log(a);
                                    	var a = 10;
                                    }
                                    //控制台会显示a = undefined
                                    //因为var声明提前,所以a有定义,但是赋值不提前,所以是undefined
                                    
                                    • 定义形参就相当于在函数作用域中声明了变量
                                      function fun(e){alert(e);
                                      }
                                      //相当于
                                      function fun(){var e;
                                      	alert(e);
                                      }
                                      

                                      debug

                                      • 当我们想要看到程序执行步骤的时候可以给目标行代码打上断点或者添加监控,这样子可以一步步排查bug

                                        8. this(上下文对象)

                                        • 我们每次调用函数时,解析器都会将一个上下文对象作为隐含的参数传递进函数。
                                        • 使用this来引用上下文对象,根据函数的调用形式不同,this的值也不同。
                                        • this的不同的情况:

                                          1.以函数的形式调用时,this是window

                                          2.以方法的形式调用时,this就是调用方法的对象

                                          3.以构造函数的形式调用时,this就是新创建的对象

                                          9. 构造函数

                                          • 构造函数是专门用来创建对象的函数

                                          • 一个构造函数我们也可以称为一个类

                                          • 通过一个构造函数创建的对象,我们称该对象时这个构造函数的实例

                                          • 通过同一个构造函数创建的对象,我们称为一类对象

                                          • 构造函数就是一个普通的函数,只是他的调用方式不同,如果直接调用,它就是一个普通函数,如果使用new来调用,则它就是一个构造函数

                                          • 例子:

                                            function Person(){
                                            }
                                            
                                            • 构造函数的执行流程:

                                              1.创建一个新的对象

                                              2.将新的对象作为函数的上下文对象(this)

                                              3.执行函数中的代码

                                              4.将新建的对象返回

                                              10. instanceof 用来检查一个对象是否是一个类的实例

                                              • 语法:对象 instanceof 构造函数
                                              • 如果该对象时构造函数的实例,则返回true,否则返回false
                                              • Object是所有对象的祖先,所以任何对象和Object做instanceof都会返回true

                                                11. 枚举对象中的属性

                                                • for…in
                                                • 语法:
                                                  for(var 属性名 in 对象){}
                                                  
                                                  • for…in语句的循环体会执行多次,对象中有几个属性就会执行几次,每次讲一个属性名赋值给我们定义的变量,我们可以通过它来获取对象中的属性