老徐WEB：js入门学习 - javascript函数和闭包

函数是一段可以重复执行的代码块。

比如我们经常会做这样的事，通过标签ID获取元素对象，javascript语句是document.getElementById('demo')。我们就可以把这一句写成一个函数，传递的参数就是标签ID的值，然后返回元素对象。

把重复做的事情，写成一个函数，下次再碰到同样的事情，直接调用函数即可，不用再重复写一堆同样的代码的。函数内的代码功能不要太复杂，如果复杂了，就可以把代码块分成多个函数，尽量让一个函数只做一个事情。

下面介绍函数的声明、参数、调用。

---

函数声明

javascript中使用关键字function声明函数。
声明函数的方式有如下几种：

函数声明

function functionName(parameters){
	// 代码块
}

这是函数的声明，不是执行语句，所以最后没有分号结束。这个方式定义的函数可以在声明前调用函数。

 

函数表达式

var x = function(parameters){
	// 代码块
};

这是一个执行语句，所以最后以分号结束。这个方式定义的函数不可以在定义前调用函数。函数存储在变量中，不需要函数名，通过变量名来调用函数，这也是匿名函数。

 

Function构造函数

var functionName = Function(a,b){
	// 代码块
};

这个方式不常用，类似函数表达式的方式。

 

自调用函数

(function(){var x = 'Hello !!'})();

自调用函数是一个表达式，表达式后面紧跟()，最后以分号结束，这样在浏览器加载页面时会自动调用函数。

 

箭头函数

(参数1,参数2,,,参数n)=>{函数体}
当只有一个参数时，圆括号是可选的，当没有参数时，圆括号保留。
ES6增加了箭头函数，其表达式语法比普通函数语法要简单。

对比一下ES5与ES6的函数声明方式

ES5的普通函数

var x = function(x,y){
	return x * y;
}

 

ES6的箭头函数

const x = (x,y) => {return x * y};

如果函数体只有一条语句，可以省略return和{}
如果箭头函数直接返回一个对象，必须在对象外加上圆括号。

const x = id => ({id:id,name:'tmp'})

 

---

 

函数参数

函数参数分为显式参数和隐式参数。

显式参数

function x(parameter1,parameter2,parameter3,,,){
	// 执行代码块
}

 

在这里有个需要注意的点就是，参数的默认值。因为声明函数时，可能带有多个参数，但不是所以参数都会在函数调用时被传值，所以在不确定会被传值的参数给出默认值。

function x(parameter1,parameter2=0){
	// 执行代码块
}

 

隐式参数

隐式参数是arguments对象，就是在函数体内通过arguments对象来获取调用函数时传递的值。

x(2,3,45,6); // 函数调用，且传递参数
function x(){ // 函数声明
	y = arguments[0];
}

---

 

函数调用

javascript函数调用有4种方法。

 

作为一个函数调用

function myFunction(a,b){
	return a + b;
}
myFunction(10,20); // 函数调用

 

函数作为对象方法调用

var myObject = {
	firstName:'A',
    lastName:'a',
    fullName:function(){
    	return this.firstName+this.lastName;
    }
}
myName = myObject.fullname(); // 作为对象方法调用

 

使用构造函数调用函数

function myFunction(a,b){
	this.firstName = a;
    this.lastName = b;
}
var x = new myFunction('A','a');
x.firstName;

 

作为函数方法调用函数

call() 和 apply() 是预定义的函数方法。 这两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a,b){
	return a + b;
}
myArray = [1,2];
var myObject = myFunction.apply(myObject,myArray);

---

 

闭包

闭包相关的知识点有
1.变量作用域
2.函数嵌套
3.函数自调用

闭包的特点有
1.可以在函数外操作函数内的私有变量
2.可以使变量常住内存

 

通过前面的学习，我们知道javascript的变量作用域有全局和局部之分。具体是函数外部的变量是全局变量，函数内部的变量是局部变量。

函数的嵌套到现在来说是第一次碰到。不过如果你学过其他编程语言的话，对嵌套应该很熟悉了。

函数的嵌套就是函数里面套着一个函数，像下面这样。

function test(){
	function test1(){}
}

 

前面也说到函数自调用了，这里不再说了。

 

下面继续说，全局变量是任何函数都可以操作的，如果想占为已有，只让自己操作，那是不能的。而局部变量只能在函数内部操作，在函数外部是不能操作的，那么有没有一种可能就是在函数外部操作函数内的变量呢。

 

函数嵌套就可以解决这个问题，在外部函数内声明一个局部变量和一个内嵌函数，这个变量在外部函数内部，只有自己能操作，同时又在内嵌函数的外部，所以内嵌函数也是可以操作这个变量的。

 

通过外部函数自调用，返回内嵌函数表达式，然后在外部（全局作用域）调用内嵌函数，这样就能在外部（全局作用域）通过内嵌函数来操作局部变量了，这就是闭包。

 

<button type="button" id="btn">计数</button>
<p id="demo">0</p>
<script>
var add = (function () { // 匿名函数
    var counter = 0; // 是局部变量，对于内嵌函数来说又是全局变量，所以内嵌函数能操作这个变量
    var addIn = function () {return counter += 1;} // 内嵌函数声明
	return addIn; // 返回了内嵌函数表达式，并赋值给变量add
})(); // 匿名函数自调用
document.getElementById('btn').onclick=function(){
	document.getElementById("demo").innerHTML = add(); // 在外部调用返回的内嵌函数，达到在函数外部操作函数内变量的目的。
}
</script>

 

勤学苦练，笨鸟先飞。关注【老徐WEB前端开发教程】公众号，听老徐说。