JavaScript 基础（四）【函数】

叁歲伎倆 2023-07-19 06:00 21阅读 0赞

###  ###

*  1 函数
 *   *  1.1 定义
     *  1.2 调用
     *  1.3 参数
     *  1.4 返回值
     *  1.5 变量作用域和生命周期
     *  1.6 函数种类
     *   *  1.6.1 声明函数
         *  1.6.2 匿名函数
         *  1.6.3 函数表达式
         *  1.6.4 拓展（回调函数、闭包函数）
     *  1.7 This指向

# 1 函数 #

应用场景：当某些事件触发时才执行的代码块。  
程序的语句是按顺序执行的，如果我们需要在满足某些条件或发生某些事件时执行，就需要使用函数。

## 1.1 定义 ##

函数是能实现一定功能的代码块  
作用：对事件做出响应，可重复执行  
声明：function关键字

## 1.2 调用 ##

使用函数名称+括号的方式调用；  
方式:

程序中直接调用： test();
    
    元素上调用：<button onclick="change()">点我</button>

程序中添加事件绑定

function test(){ 
    	alert('hans')
    }
    function test1(){ 
    	alert('test1')
    }
    
    var pTag = document.getElementById('change_color');
    pTag.onclick=test;
    //pTag.οnclick=test1;
    pTag.addEventListener('click',test);
    pTag.addEventListener('click',test1);

on绑定和addEventListener绑定的区别：  
on只能绑定一个函数，后者会覆盖前者；addEventListener可以绑定多个函数，程序依次执行。

## 1.3 参数 ##

参数就是调用函数时传给函数的数据  
实例：计算器功能，输入两个数字，输出它们的和；  
调用函数的时候需要给函数传入两个数字，函数接收这两个数字，然后输出他们的和

function sum(x,y){ 
    	console.log(x+y);
    }
    sum(3,4);
    用来接收参数的x,y称为形参，调用时传入的3，4称为实参
    
    Arguments对象，可以获取传入的所有参数
    参数和变量没有本质区别
    上述例子可以不用参数来实现

## 1.4 返回值 ##

有些函数执行后会计算出一些数据，我们可以使用return将数据返回，供以后使用return 语句，将值返回调用它的地方

function sum(x, y) { 
    	var z = x + y;
    	return z;
    }
    var aa = sum(3, 4);
    alert(aa);

## 1.5 变量作用域和生命周期 ##

全局作用域，局部作用域，块级作用域，循环作用域  
Var  
全局变量：从声明到关闭页面  
局部作用域：从声明到函数执行结束  
Let  
块级作用域：在指定块的作用域之外无法访问的变量，它存在于  
1、函数内部  
2、\{\}之间的块区域内  
循环作用域：只在当前循环内部有效  
作用域链：子对象会一级一级向上寻找所有父对象的变量，反之不行。

## 1.6 函数种类 ##

### 1.6.1 声明函数 ###

使用function关键字声明，使用函数名称加括号调用  
函数提升：可以吧函数放在调用后面（执行代码之前会先读取函数声明）  
例如：function my()\{\} 就是声名函数  
注意：如果函数名称重复，下面的函数会覆盖上面的

### 1.6.2 匿名函数 ###

函数如果没有名字，就是匿名函数。  
匿名函数不能直接调用。  
1、通过变量调用  
把匿名函数赋给一个变量，通过变量调用来调用匿名函数

var a = (function(){ });
    a();

2、直接调用（也叫自调用函数或者立即函数）  
两种写法：

(function(){ }());
    (function(){ })();

### 1.6.3 函数表达式 ###

在使用之前必须先赋值

var obj = function(){ 
    	alert("a")
    }
    obj();

### 1.6.4 拓展（回调函数、闭包函数） ###

1、回调函数  
函数作为参数调用

//函数声明，fn是一个参数同时又是一个变量
    function f1(fn){ 
    	fn(); //函数调用--说明fn这个变量中存储的是一个函数
    }
    function f2(){ 
    	console.log("函数可以作为参数使用")；
    }
    f1(f2); //调用f1，将f2作为参数传进去
    //结果：函数可以作为参数使用

2、闭包函数  
闭包是一个可以读取其他函数内部变量的函数

//例1
    function fn(){ 
    	n = 100;
    	function fn1() { 
    		console.log(n);
    	}
    	return fn1;
    }
    var result = fn();
    result(); //100
    //例2
    function fn(){ 
    	n = 100;
    	nadd = function(){ 
    		n += 1;
    	}
    	function fn1() { 
    		console.log(n);
    	}
    	return fn1;
    }
    var result = fn();
    result(); //100
    nadd();
    result(); //101

闭包的优缺点：  
可以读取其他函数内部的变量，并让这些值永远保存在内存中；但是它会携带包含他函数的作用域，因此占的内存会比较多

## 1.7 This指向 ##

This关键字指向当前对象，谁调用函数，this就指向谁