JS(JavaScript)-函数（方法）

 

 

1. 介绍：

　　　　JS中的函数是一种通过调用来完成具体业务的一段代码块。

　　　　最核心的目的是将可重复执行的操作进行封装，然后供 调用方 无限制的调用。

　　基本作用：

• • 　　　方法(函数)是由事件驱动的 或者 当他被调用时被执行的可重复使用的代码块。
  • 　　　JavaScript 函数语法：函数就是包裹在花括号中的代码块。

2. 语法：

　　方法（函数）关键字：function

　　注意：JavaScript 对大小写敏感。关键词 function 必须是小写，并且必须以与函 数名称相同的大小写来调用函数。

　　　　第一种：普通创建　　（常用）

　　　　　　　语法：function 方法名（）{ 输出语句；}

　　　　　　　　调用方法()；
　　　　　　　　方法必须被调用。(前后都可被调用) 

代码：

　　

　　<script>
        // 语法一 普通方法
        function fang1(){
            console.log("这是方法语法1");
        }
        fang1();    // 调用
    </script>

 

 

　　　　　　　　　方法被提前调用是可以的。

　　　　　　　　　变量被提前调用是不可以的。

例：

    <script>
                   
        console.log(num);   // 此处的num虽然被定义，有值。但是不可被调用 在下一行（var num = 123;）后才被执行。

        // 定义 全局变量
        var num = 123;

        console.log(num);  //  此时num是被定义过的，有值的。可以正常调用

    </script>

 

　　　　第二种：字面量创建

　　　　　　注意：字面量创建方法不可被提前调用！！！

　　　　　　　　类型 变量名(可变) = 字面量(是不可变的);

　　　　　　注：常量 不可变是的被 final 修饰后 的 变量 为 常量。例：final 类型 常量 = 字面量；

　　　　　　字面量创建语法：
　　　　　　var 方法名 = function（）{ 执行代码块；}
　　　　　　调用方法名( )；

代码：

    <script>
        // 语法二 字面量方法
        var fang2 = function() {
            console.log("这是方法语法2");
        }
        fang2();    // 调用
    </script>

 

 

 

　　　　　第三种：实例化创建 （大写）

　　　　　　　　实例化创建函数（new 出的就为实例化）
　　　　　　var 方法名 = new Function(输出语句...)；

代码：

    <script>
        // 语法三 实例化方法
        var fang3 = new Function(console.log("这是方法语法3"));
    </script>

 

3. 调用：

　　在调用函数时，可以向其传递值，这些值被称为参数。 这些参数可以在函数(方法)中使用。可以发送任意多的参数，由逗号 (,) 分隔；

　　变量和参数必须以一致的顺序出现。

例：

    <script>
        // 调用
        // 普通创建
        // 形参： can1, can2
        function fangfa1(can1, can2){
            console.log("对象冒充" +"--"+ can1 +"--"+ can2);
            // console.log(fangfa2);
        }
        // 字面量创建
        var  fangfa2 = function(){
                return true; // 返回类型可随意
        }

        
        // 通过 fangfa2 调用 fangfa1
        // 形参： can1, can2 --> 实参：12.07, 你好！
        // 对象冒充一：.call();
        fangfa1.call(fangfa2, "12.07","你好！");

        // 对象冒充二：.apply();
        fangfa1.apply(fangfa2, ["12月7日", "你好吗？"]);
    </script>

 

4. 匿名函数：没有方法名的方法。

　　语法：

　　+function() { 输出语句；} ()；
　　　　+ 可换为 外层括号()  + 与 -

 

代码：

    <script>
        // 匿名函数
        // 可将 + 换为 - 及外层（）
        + function(){
            console.log("这是匿名函数！");
        }();
    </script>

　　　　　　　　　　或者

    <script>
        // 匿名函数
        // 可将 + 换为 - 及外层（）
         (function(){
            console.log("这是匿名函数！");
        })();
    </script>

 

 

5. 全局变量和局部变量

　　　　全局变量：是方法外的变量；

　　　　局部变量：是在本方法内的变量，是不可在别的方法内调用的。

 

6. 点击事件：

　　关键字：onclick
　　　　onclick="updateColor()" --点击变色(方法名)

例：

    <!-- 点击 -->
    <!-- 内部样式装饰盒子 -->
    <style>
        #box{
            width: 250px;
            height: 250px;
            background-color: violet;
        }
    </style>
    
    <!-- 建个盒子、点击变色  updateColor为方法名 -->
    <div id="box" onclick="updateColor()">这是一个盒子</div>

    <script>
        // 点击事件 关键字 + 方法名
        function updateColor(){
            // 盒子颜色为 violet 当鼠标点击后 变为 greenyellow
            document.getElementById("box").style.backgroundColor = "greenyellow";
        }
    </script>

 

7. return 

• 可以将返回值赋值给一个变量，然后对变量进行操作
• 当函数遇到第一个 return 后将终止执行函数后边的语句，直接跳出函数

　　　　有时，我们会希望函数将值返回调用它的地方。

　　　　通过使用 return 语句就可以实现。

　　　　在使用 return 语句时，函数会停止执行，并返回指定的值。

 

---