函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
背景:
特点:
- 第一类对象(first-class object),可以作为带有属性和方法的值以及参数进行传递。
- 提供局部作用域。
函数就是对象的表现:
- 函数可以在运行时动态创建,还可以在程序执行过程中创建。
<!-- 在该例子中创建了一个即时函数 -->
<body>
<button id="button">创建一个 alert 函数</button>
<script>
window.onload = function() {
var button = document.getElementById("button");
button.addEventListener("click", function() {
(function() {
alert("Hello World!");
}())
}, false)
}
</script>
</body>
<!-- 创建一个 alert 自定义值的函数 -->
<body>
<input type="text" placeholder="请输入 alert 要输出的语句" id="input" />
<button id="button">创建一个自定义 alert 函数</button>
<script>
window.onload = function() {
var button = document.getElementById("button"),
input = document.getElementById("input"),
func = null,
node = document.createElement("button");
button.addEventListener("click", function() {
// 创建新的函数
func = function() {
alert(input.value);
};
// 创建节点,并为该节点绑定点击事件
node.addEventListener("click", func, false);
node.innerText = "我是动态创建的函数";
document.body.appendChild(node);
}, false)
}
</script>
</body>
- 函数可以分配给变量,可以将它们的引用复制到其他变量,可以被扩展,此外,除少数特殊情况外,函数还可以被删除。
function func() {
alert("Hello World!");
}
var func_variable = func;
func_variable();
func();
- 可以作为参数传递给其他函数,并且还可以由其他函数返回。
// 在该例子中,sayHello 函数作为参数传递给 handle 函数。
function sayHello() {
alert("Hello World!");
}
function handle(func) {
func();
}
handle(sayHello);
// 在该例子中,returnFunc 函数返回一个匿名函数。
function returnFunc() {
return function() {
alert("Hello World!");
}
}
var func = returnFunc();
func();
- 函数可以有自己的属性和方法。
var Dog = function() {
name : '旺财', // 属性
bark : function() { // 方法
alert("汪汪汪!");
}
}
提供作用域:
- JavaScript 中没有花括号 {} 语法以定义局部作用域。也就是说,块并不创建作用域。因此,如果在 if 条件语句或在 for 以及 while 循环中,使用 var 关键词定义变量,并不意味该变量对于 if 或 for 来说是局部变量,它仅仅对于包装函数来说是局部变量。如果没有包装函数,它将会成为一个全局变量。
- JavaScript 仅存在函数作用域和全局作用域。在函数内部以 var 关键词定义的任何变量都是局部变量,对于函数外部不可见。
类别
- 函数声明:
- 函数表达式:
- 命名函数表达式:
/* 函数声明 */
function func() {
// 函数体
}
/* 函数表达式:未命名函数表达式-匿名函数 */
var func = function() {
// 函数体
}
document.addEventListener("click", function() {
// 函数体
}, false)
/* 命名函数表达式 */
var func = function func() {
// 函数体
}
差别:
函数声明:
- 函数声明不需要分号结尾。
- 函数表达式中需要分号结尾。
关于函数的一些小问题
var arr = [1, 2, 3];
function func(arr) {
arr[0] = 10;
}
func(arr);
console.log(arr);
- 在 JS 中如果传入函数的参数是引用,那么传给函数的是实参的引用地址。因此上述 console.log() 输出 [10, 2, 3]。
var arr = [1, 2, 3];
function func(arr) {
arr = [10, 20, 30];
}
func(arr);
console.log(arr);
- 上述 console.log() 输出 [1, 2, 3],为什么会这样?
- 传给函数的 arr 参数的值实际上是 [1, 2, 3] 的地址,arr = [10, 20, 30] 语句将 arr 参数的值修改为 [10, 20, 30] 的地址。当函数执行结束后,就会将 arr 变量消除,此时要明确一点 [1, 2, 3] 并没有发生变化,因为你只在函数中修改 arr 变量的值,而非 [1, 2, 3] 的值。因此最后输出的内容自然还是 [1, 2, 3]。