JavaScript函数详解

函数的命名方式

JavaScript代码服用单位是函数，函数可以包含一段可执行代码，也可以接受调用者传入的参数。JavaScript定义函数主要有以下三种方式：

1. 第一种方式：命名函数

<script>
  function 函数名(参数列表){//function声明函数的关键字
     要执行的语句块;
   }
   function myAge(age) {
            document.write('我的年龄是' + age)//我的年龄是19 
        }
        myAge(19)//函数不调用，不执行
</script>

2. 第二种：匿名函数

<script>
    function (参数列表) {//同引用函数调用这个函数
        要执行的语句块
     }
     //匿名函数
      var a=function(age) {
          document.write('我的年龄是' + age)//我的年龄是19
       }
       a(19)
    </script>

命名函数和匿名函数不同，命名函数前后都可调用，匿名函数只能在函数后面调用才能出现

3. 第三种：使用function类构建匿名函数

<script>
   new function(参数列表,函数执行体);//构造一个函数，参数列表和函数执行体都要用双引号括起来

   //构建匿名函数
   var a = new Function('name','age',"document.write('我的姓名:'+name+',我的年龄:'+age)")//我的姓名:小红,我的年龄:20
    a("小红",20)
</script>

**强调：**函数的形参不需要做类型声明，也不要加var，这是JavaScript属于弱类型语言的一种表现

大多数优秀的JavaScript框架都使用第二种“匿名函数”语法来定义函数，他的可读性最好，所以我们必须掌握使用它。

函数常用的特殊语句

函数的返回值

return

JavaScript中的函数没有声明返回类型，当函数想要返回值的时候直接加上return“值”语句即可，假如不加就代表此函数没有任何返回值

 <script>
        //return
        function show() {
            return function(){
                alert("美女")//打印美女
            }
        }
        var f=show();
        f();
    </script>

局部变量和局部函数

根据变量的定义范围不同，变量有全局变量和局部变量之分。

在函数外部直接定义的变量是全局变量，在函数中定义的变量成为局部变量，局部变量只能在函数内有效，如果全局变量和局部变量使用相同的变量，则局部变量将覆盖全局变量。

与局部变量对应的是局部函数，局部函数实在函数中定义的，全局变量可以在外部直接访问，内部变量只能在函数内部访问

注意：全局变量不能调用局部变量，局部变量可以调用内部变量

<script>
   //全局变量
    var name="美女"//全局变量
     function show(){
           var name="美女"
           var age=10;
           alert(name+"---"+age);//打印 美女---10
      }
      alert(name)//全局变量和局部变量使用相同的变量，则局部变量将覆盖全局变量。
      alert(age) //全局变量可以在外部直接访问，内部变量只能在函数内部访问
      show();

      //局部变量
        function f1() {
            var name ="张三";
            function f2() {
                var age = 30;
                alert(name);
            }
            //alert(age);//错误的  全局函数是不能访问局部函数内部的局部变量
            f2();
        }
        f1();

      //闭包：闭包是指有权访问另一个函数作用域中变量的函数
        function f3() {
            var n=1;
            function f4() {
                alert(n);
            }
            return f4;
        }
        var f=f3();
        f();
</script>

JavaScript的3种调用函数的方式：

1. 直接调用函数：这种函数的调用是最常见、最普通的方式

对象.函数引用：
//当声明一个函数没有指明分配给哪个对象使用的时候，默认分配给的是window对象。

<scrit>
   function show(name,age) {
            alert("你好"+name+"，今年"+age)
        }
        window.show('张三','20')  //对象.函数名   默认分配给的是window对象
</script>

2. 以call方法调用函数：

函数引用.call(调用者,参数1,参数2,…)

<scrit>
    function show(name,age) {
            alert("你好,我是"+name+"，今年"+age)
        }
        show.call(window,'张三','20');
</script>

3. 以apply方法调用函数:

函数引用.apply(调用者,arguments)
//arguments相当于是数组，用来存放多个参数。和call调用方式类似

<scrit>
   function show(name,age) {
            alert("你好,我是"+name+"，今年"+age)
        }
        show.apply(window,['张三','20']);
</script>

对方法2和方法3的一个扩展小案例

<script>
    function show(arr,func) {
            func.call(window,arr);
        }
        show([1,2,3,4],function (arr) {//用匿名函数传递
            for(i in arr){//遍历这个函数
                document.write(arr[i]+"<br/>")
            }
        })

        document.write("_______"+"<br>")

        function show(arr,func) {
            func.apply(window,[arr]);
        }
        show([1,2,3,4],function (arr) {//以数组形式传参
            for(i in arr){//遍历这个函数
                document.write(arr[i]+"<br/>")
            }
        })
        //第一种比较常用，但第二种和第三种比较灵活
</script>

JavaScript常用的内置对象：Date对象和Math对象

对象是JavaScript的特性之一，它是一种非常重要的数据类型，是自我包含的数据集合。这里介绍两个使用的具体对象Date和Math

Date对象获取时间细节方法：

对象	作用
getDate()	从Date 对象返回一个月中的某一天（1 ~ 31）
getDay()	从Date 对象返回一周中的某一天（0 ~ 6）
getMonth()	从Date 对象返回月份（0 ~ 11）
getFullYear()	从Date 对象以四位数字返回年份
getHours()	返回 Date 对象的小时（0 ~ 23）
getMinutes()	返回 Date对象的分钟（0 ~ 59）
getSeconds()	返回Date 对象的秒数（0~59）
getTime()	返回 1970 年 1 月 1 日至今的毫秒数

一个小案例：

<script>
     //js中如何获取当前日期的年月日星期?写出代码

     /*首先通过new Date()即可得到当前日期对应的一些字符串,但是字符串很多时候并不是我们想要的类型，所以可以通过getFullYear   getMonth   getDate来获取年月日
       注意getMonth的时候记得加1，因为获取的月份是从0开始的*/
          
        //获取时间
        var tempDate=new Date();
        var year=tempDate.getFullYear();
        var month=tempDate.getMonth()+1;
        var date=tempDate.getDate();
        var day=tempDate.getDay();
        switch(day){
            case 0:
            day="星期日";
            break;
            case 1:
            day="星期一";
            break;
            case 2:
            day="星期二";
            break;
            case 3:
            day="星期三";
            break;
            case 4:
            day="星期四";
            break;
            case 5:
            day="星期五";
            break;
            case 6:
            day="星期六";
            break;
           default:
              day="错误日期";
              break;
        }
        document.write("今天是"+year+"年"+month+"月"+date+"日,"+day)
</script>

Date对象设置时间的方法：

方法	作用
setDate()	设置 Date 对象中月的某一天 (1~31)
setMonth()	设置Date 对象中的月份（0~11）
setFullYear()	设置Date 对象中的年份（四位数字）
setHours()	设置Date 对象中的小时（0~23）
setMinutes()	设置Date 对象中的分钟（0~59）
setSeconds()	设置Date 对象中的秒钟（0~59）
setMilliseconds()	设置Date 对象中的毫秒（0~999）

创建时间的一个小案例：

<script>
       //获取时间
        var tempDate=new Date();
        //创建时间只需要加上这三行代码就行了
        tempDate.setFullYear(2021)
        tempDate.setMonth(10);
        tempDate.setDate(25)
        var year=tempDate.getFullYear();
        var month=tempDate.getMonth()+1;
        var date=tempDate.getDate();
        var day=tempDate.getDay();
        switch(day){
            case 0:
            day="星期日";
            break;
            case 1:
            day="星期一";
            break;
            case 2:
            day="星期二";
            break;
            case 3:
            day="星期三";
            break;
            case 4:
            day="星期四";
            break;
            case 5:
            day="星期五";
            break;
            case 6:
            day="星期六";
            break;
           default:
              day="错误日期";
              break;
        }
        document.write("今天是"+year+"年"+month+"月"+date+"日,"+day)
</script>

补充：

获取本地各种时间的一个小例子：

<script>
   var d1=new Date();
   document.write(d1.toString()+"<br>");
   var d2=new Date("2020-09-09 12:12:10");
   document.write(d2.toString()+"<br>");
   var d3=new Date("2009,08,09");
   document.write(d3.toString()+"<br>");
</script>

注意：此处和php时间不一样，php需要转换成本地时间，但JavaScript直接打印出来的就是本地时间

Math对象的常用方法：

方法	作用
abs(x)	返回数的绝对值
ceil(x)	对数进行上舍去
floor(x)	对数进行下舍去
max(x,y)	返回 x 和 y 中的最高值
min(x,y)	返回 x 和 y 中的最低值
pow(x,u)	返回x的y次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把数四舍五入为最接近的整数
sqrt(x)	返回数的平方根

编写几个小案例，以供大家更好理解

<script>
           //abs()绝对值
        document.write(Math.abs(7.25) + "<br />")
        document.write(Math.abs(-7.25) + "<br />")
        document.write(Math.abs(7.25-10)+"<br/>")
        //ceil()上取舍
        document.write(Math.ceil(0.60) + "<br />")
        document.write(Math.ceil(0.40) + "<br />")
        document.write(Math.ceil(5.1) + "<br />")
        document.write(Math.ceil(-5.1) + "<br />")
        //floor()下取舍
        document.write(Math.floor(0.60) + "<br />")
        document.write(Math.floor(5.1) + "<br />")
        document.write(Math.floor(-5.1) + "<br />")
        //max()最高值
        document.write(Math.max(12,2)+"<br />")
        //min()最低值
        document.write(Math.min(15,5)+"<br />")
        //pow()x的y次幂
        document.write(Math.pow(5,2)+"<br />")
        //random()随机数
        document.write(Math.random()+"<br />")
        //round()四舍五入的整数
        document.write(Math.round(12.45)+"<br/>")
        document.write(Math.round(12.56)+"<br/>")
        //sqrt()返回数的平方根
        document.write(Math.sqrt(25)+"<br>")

</script>

效果展示：

JavaScript对象的创建

<body>
    <p>创建 JavaScript 对象。</p>
    <p id="demo"></p> 
    <!-- <h1>我的第一个 Web 页面</h1> -->
    <!-- <p>我的第一个段落。</p> -->
    <script>
        //document.write(Date());
        var person = {
            firstName : "John",
            lastName  : "Doe",
            age       : 50,
            eyeColor  : "blue"
        };
        document.getElementById("demo").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁。";
     </script>
	
</body>   
    

JavaScript中创建对象主要有3种方式

使用new关键字调用构造器创建函数

<script>
  function Student(name,age){
           this.name = name;
           this.age = age;
        }
        var s1=new Student();//没有传入参数
        var s2=new Student("meinv",20);
        document.write(s1.name+"---"+s1.age+"<br/>");//输出undefined--undefined 对象名.属性名访问属性  在JavaScript中访问属性的方式还有一种对象名（属性名）
        document.write(s2.name+"--"+s2.age);//meinv--20
 </script>

当没有给函数传参时返回undefined，对象的本身其实就是一个关联数组，关联数组其实就是由键值对key value组成的，key对应的就是属性，value对应的就是值， 这个值可以是基本数据类型，也可以是function函数，假设当value为函数时，这个函数就是这个对象的一个方法

使用Object直接创建对象

<script>
   var myObj = new Object();//先创建一个空的对象
        myObj.name = "meinv";//动态添加两个属性
        myObj.age = 20;
        myObj.info = function(){//动态添加一个function函数
            document.write("我是"+this.name+"<br/>");//我是美女
            document.write("我今年"+this.age+"岁<br>");//我今年20岁
        }
        myObj.info();
</script>

使用JSON语法创建对象

JSON的概念
JSON(JavaScript Object Notation) 是一种轻量级的数据交换个格式。易于人阅读和编写

JSON的格式
JSON对象是以一对"大括号"括起来，大括号内以多个"名值对"组成，多个名值对之间用"逗号"隔开，名所对象的值可以是各种数据类型的值，也可以是JSON对象。JSON数组用"[]"括起来

<script>
 {"name":"meinv","age":20,"email":"123456789.@qq.com"}//名值用分号隔开，名值对用逗号隔开  
   {"peoples":[
        {"firstName":"xiaohong","lastName":"xiaolv"},
        {"firstName":"xiaoming","lastName":"xiaolan"},
        {"firstName":"xiaohei","lastName":"xiaobai"}
   ]}
</script>

提示： JSON数据格式比XML数据格式更简洁，数据传输量也更小，因此在需要跨平台、跨语言进行数据交换时，有时宁愿选择JSON作为数据交换格式，而不是XML。

JavaScript使用JSON创建对象的语法
object={属性名1:属性值1,属性名2:属性值2,…}

<script>
    var p = {
            name : "John",
            gender : "male",
            info:function(){
                document.write("姓名:"+this.name+",性别:"+this.gender);
            },
        };
        p.info();
</script>

<script>
  //以上几个方法的运行小案例和他们的运行结果
  //第一种 使用new关键字创建
        function student(name,age){
            this.name = name;//对象属性
            this.age = age;
            student.gender = 'male';//此属于类的一个属性
            this.info=function(){
                document.write("姓名:"+this.name+",年龄:"+this.age+",性别："+student.gender+"<br/>")
            }
        }
        var s1 = new student("zhangyi",12)
        s1.info();
  //第二种 使用Object直接创建对象  
        var student = new Object();
        student.name='仗义';
        student.age=30;
        function abc(){
            document.write("姓名:"+this.name+",年龄:"+this.age)
        }
        student.info=abc;
        student.info();
  //第三种 JSON创建对象的语法
        var person={
            "name":"zhangyi",
            "age":30,
            "son":[
                {
                    "name":"jack",
                    "age":2
                },
                {
                    "name":"rose",
                    "age":5
                }
            ],
            "info":function(){
                document.write("父亲姓名:"+this.name+",年龄:"+this.age+"<br>");
                for(var child in this.son){//遍历数组用for in 循环
                    document.write("儿子姓名:"+this.son[child].name+",年龄:"+this.son[child].age+"<br>");
                }
            }
        };
        person.info();
</script>

运行效果如下图：

this关键字

在此补充一个知识点方法中的this关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

<body>

    <!-- 
        方法中的this : 代表当前调用该方法的对象
        this指向对象的好处在于，可以更加方便的对象自身的内部成员
     -->
    <script>
        
        //第一种：使用new实例化对象
        var car = new Object();
        //添加属性
        car.color = "red";
        car.price = "20w";
        car.wheel = 4;

        //添加方法
        //console.log(car.color)
        car.showColor = function(){
            console.log("汽车的颜色："+car.color);
        }
        car.showPrice = function(){
            console.log("汽车的价格：20w")
        }
        car.showCar = function(){
            console.log("汽车的颜色："+this.color+",汽车的价格:"+this.price+",汽车有"+this.wheel+"个车轮")
        }
        //访问对象
        car.showColor()
        car.showCar()
    </script>
</body>