Javascript 函数详解

1）函数声明：
通过关键字function定义，把函数作为变量来声明
函数声明后不会立即执行，会在我们需要的时候调用到。

<script>function myFunction(a, b) {return a * b;}// js对大小写敏感，function必须小写，调用时大小写也必须一致。// 函数声明不是一个可执行语句，所以不 以分号结尾。
</script>

2）函数表达式：函数表达式可以存储在变量中

var x = function (a, b) {return a * b};
var y = x(1, 2);

3）Function() 构造函数:通过内置函数构造器Function()来定义。

let a = new Function('a', 'b', 'return a + b');
let b = a(1, 2);
document.write(a); //function anonymous(a,b ) { return a + b }
document.write(b); // 3

// 构造函数:
function myFunction(arg1, arg2) {this.firstName = arg1;this.lastName  = arg2;
}
var x = new myFunction("John","Doe");
x.firstName;   //  "John"

4）自调用函数：表达式后面紧跟 () ，则会自动调用

5）箭头函数： IE11 及更早 IE 版本不支持箭头函数
箭头函数表达式的语法比普通函数表达式更简洁

(参数1, 参数2, …, 参数N) => { 函数声明 }(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }// ES5
var x = function(x, y) {return x * y;
}
// ES6
const x = (x, y) => x * y;

(function () {var x = "Hello!!";      // 我将调用自己
})();

6）函数是对象：
a) arguments：隐式参数
arguments对象是所有（非箭头）函数中都可用的局部变量。
可以使用arguments对象在函数中引用函数的参数。
arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性
在这里插入图片描述

7）函数的参数：（显式参数），调用函数时，传递的值就叫参数，供在函数中使用。
多个参数由逗号（,）分隔；

<script>function way(a, b) {alert(a + b);}way(2, 3); 
</script>

c) 带返回值的函数：使用return语句返回值；执行return时函数会停止执行，并返回指定的值。

<script>function way(a, b) {return a + b;}let c = way(2, 3); // 5;
</script>

<script>function way(a, b) {return a > b;}let c = way(2, 3); // false;
</script>

<script>let c = 0;function way(a, b) {if (a < b) {return;};c = a + b;}let c = way(2, 3); // undefined;document.write(c);  // 5
</script>

8）闭包：
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收

var add = (function () {var counter = 0;return function () {return counter += 1;}
})();add();
add();
add();
// 计数器为 3

//li节点的onclick事件都能正确的弹出当前被点击的li索引<ul id="testUL"><li> index = 0</li><li> index = 1</li><li> index = 2</li><li> index = 3</li>
</ul>
<script type="text/javascript">var nodes = document.getElementsByTagName("li");for(i = 0;i<nodes.length;i+= 1){nodes[i].onclick = function(){console.log(i+1);//不用闭包的话，值每次都是4}(i);}
</script>