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

秒速五厘米 2023-03-14 13:21 6阅读 0赞

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

比如我们经常会做这样的事，通过标签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前端开发教程】公众号，听老徐说。