1. 介绍：
JS中的函数是一种通过调用来完成具体业务的一段代码块。
最核心的目的是将可重复执行的操作进行封装，然后供 调用方 无限制的调用。
基本作用：
-
- 方法(函数)是由事件驱动的 或者 当他被调用时被执行的可重复使用的代码块。
- JavaScript 函数语法：函数就是包裹在花括号中的代码块。
2. 语法：
方法（函数）关键字：function
注意：JavaScript 对大小写敏感。关键词 function 必须是小写，并且必须以与函 数名称相同的大小写来调用函数。第一种：普通创建 （常用）
语法：function 方法名（）{ 输出语句；}
调用方法()；
方法必须被调用。(前后都可被调用)
代码：
1 <script>
2 // 语法一 普通方法
3 function fang1(){
4 console.log("这是方法语法1");
5 }
6 fang1(); // 调用
7 </script>
方法被提前调用是可以的。
变量被提前调用是不可以的。
例：
1 <script> 2 3 console.log(num); // 此处的num虽然被定义，有值。但是不可被调用 在下一行（var num = 123;）后才被执行。 4 5 // 定义 全局变量 6 var num = 123; 7 8 console.log(num); // 此时num是被定义过的，有值的。可以正常调用 9 10 </script>
第二种：字面量创建
注意：字面量创建方法不可被提前调用！！！
类型 变量名(可变) = 字面量(是不可变的);
注：常量 不可变是的被 final 修饰后 的 变量 为 常量。例：final 类型 常量 = 字面量；
字面量创建语法：
var 方法名 = function（）{ 执行代码块；}
调用方法名( )；
代码：
1 <script>
2 // 语法二 字面量方法
3 var fang2 = function() {
4 console.log("这是方法语法2");
5 }
6 fang2(); // 调用
7 </script>
第三种：实例化创建 （大写）
实例化创建函数（new 出的就为实例化）
var 方法名 = new Function(输出语句...)；
代码：
1 <script>
2 // 语法三 实例化方法
3 var fang3 = new Function(console.log("这是方法语法3"));
4 </script>
3. 调用：
在调用函数时，可以向其传递值，这些值被称为参数。 这些参数可以在函数(方法)中使用。可以发送任意多的参数，由逗号 (,) 分隔； 变量和参数必须以一致的顺序出现。 例： 1 <script>
2 // 调用
3 // 普通创建
4 // 形参： can1, can2
5 function fangfa1(can1, can2){
6 console.log("对象冒充" +"--"+ can1 +"--"+ can2);
7 // console.log(fangfa2);
8 }
9 // 字面量创建
10 var fangfa2 = function(){
11 return true; // 返回类型可随意
12 }
13
14
15 // 通过 fangfa2 调用 fangfa1
16 // 形参： can1, can2 --> 实参：12.07, 你好！
17 // 对象冒充一：.call();
18 fangfa1.call(fangfa2, "12.07","你好！");
19
20 // 对象冒充二：.apply();
21 fangfa1.apply(fangfa2, ["12月7日", "你好吗？"]);
22 </script>
4. 匿名函数：没有方法名的方法。
语法：
+function() { 输出语句；} ()；
+ 可换为 外层括号() + 与 -
代码：
1 <script>
2 // 匿名函数
3 // 可将 + 换为 - 及外层（）
4 + function(){
5 console.log("这是匿名函数！");
6 }();
7 </script>
或者
1 <script>
2 // 匿名函数
3 // 可将 + 换为 - 及外层（）
4 (function(){
5 console.log("这是匿名函数！");
6 })();
7 </script>
5. 全局变量和局部变量
全局变量：是方法外的变量；
局部变量：是在本方法内的变量，是不可在别的方法内调用的。
6. 点击事件：
关键字：onclick
onclick="updateColor()" --点击变色(方法名)
例：
1 <!-- 点击 -->
2 <!-- 内部样式装饰盒子 -->
3 <style>
4 #box{
5 width: 250px;
6 height: 250px;
7 background-color: violet;
8 }
9 </style>
10
11 <!-- 建个盒子、点击变色 updateColor为方法名 -->
12 <div id="box" onclick="updateColor()">这是一个盒子</div>
13
14 <script>
15 // 点击事件 关键字 + 方法名
16 function updateColor(){
17 // 盒子颜色为 violet 当鼠标点击后 变为 greenyellow
18 document.getElementById("box").style.backgroundColor = "greenyellow";
19 }
20 </script>
7. return
- 可以将返回值赋值给一个变量，然后对变量进行操作
- 当函数遇到第一个 return 后将终止执行函数后边的语句，直接跳出函数
标签：function,调用,console,函数,JavaScript,JS,方法,log From： https://www.cnblogs.com/warmNest-llb/p/17881863.html