html函数

xiaoxiao2025-01-18  15

函数(function)

一、概要

函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时,总是根据所要完成的功能,将程序划分为一些相对独立的部分,每部分编写一个函数。从而,使各部分充分独立,任务单一,程序清晰,易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方

二、定义

函数就是把完成特定功能的一段代码封装起来。给该功能起一个名字(函数名)

三、作用

使程序变得更简短而清晰有利于程序维护可以提高程序开发的效率提高了代码的重用性(复用性)

四、定义函数

1、说明

函数声明也叫函数定义。使用函数,必须要先定义。

2、语法格式

带返回值

function 函数名(参数列表){ //函数体; return 函数返回值; }

不带返回值

function 函数名(参数列表){ //函数体; }

说明

function 是定义函数用到的关键字,必须存在,不能省略。这个单词的所有字母必须小写。函数名是为了能让这个函数在别的地方调用。函数名的后面必须跟一对圆括号()。圆括号内根据需要可以声明形参,定义形参的时候只需要参数名,而不要var来声明。形参的个数不固定,根据需要,可以有多个形参,也可以一个也没有。(圆括号内的形参有时候我们也称之为形参列表)圆括号后面跟一对大括号{ },表示函数代码的开始和结束。圆括号内写我们要执行的一系列的代码,这一系列的 代码我们称之为函数体。函数体内可以根据需要决定是否添加return语句。return语句表示给方法的调用者返回一个值。 总体来说 return语句有两个作用:1、给调用者返回值 2、结束函数(只要碰到return语句,不管代码执行到了什么地 方,也不管进入了多少层循环,那么方法都会立即执行,并返回)。return语句的语法是:return 返回值; 返回值可以省略,表示仅仅结束函数。如果省略return语句或者有return但是没有返回值,这个时候,返回的是undefined

五、匿名函数

1、定义

没有名字的函数叫匿名函数

2、变量匿名函数

定义

可以把函数赋值给变量、事件。

语法格式

var 变量名 = function (p1, p2) { //语句块 };

示例代码

//变量匿名函数,左侧可以为变量、事件等 var fun = function (p1, p2) { alert(p1+p2); };

适合场景

避免函数名污染。若先声明个带名称的函数,再赋值给变量或事件,就造成了函数名的滥用

3、无名称匿名函数

定义

在函数声明时,在后面紧跟参数。Js语法解析此函数时,里面代码立即执行。

语法格式

(function (参数) { alert(参数); })(参数);

适合场景

只需执行一次的。如浏览器加载完,只需要执行一次且后面不执行的功能。

六、闭包函数

1、定义

函数A内部声明了个函数B,函数B引用了函数B之外的变量,并且函数A的返回值为函数B的引用。那么函数B就是闭包函数,凡是有权访问另一个函数作用域内变量的函数都是闭包。

2、作用

一个是前面提到的可以读取函数内部的变量,让这些变量的值始终保持在内存中

2、示例代码

简单的闭包使用

function add() { var num = 1;//标记回收 return function () { num++;//发现有对象引用,不回收 return num; } } var test = add(); alert(typeof test);//输出 function alert(test()); //打印2 执行步骤 1. 定义了一个普通函数add 2. 在add中定义了局部变量num 3. 在add函数返回一个匿名函数 4. 执行add函数讲函数对象赋值给全局变量test 5. test()执行了add中的匿名函数 6. add中的匿名函数引用了add函数的num

填坑案例

function createArr(){ var result =[]; for (var i=0; i < 10; i++){ result[i] = function(){ return i; }; } return result; } var arr = createArr(); for (var i=0; i < arr.length; i++){ console.log(arr[i]());//输出10个10? } 执行步骤 1. var result, i; 定义局部变量 2. result[0] = function(){ return i; }; //没执行函数,函数内部不变,不能将函数内的i替换! 3. result[1] = function(){ return i; }; //没执行函数,函数内部不变,不能将函数内的i替换! ... result[9] = function(){ return i; }; //没执行函数,函数内部不变,不能将函数内的i替换! 4. i = 10; arr = result; result = null; 5. for循环执行 console.log(i); // arr[0]()就是执行 return i 语句,就是返回10 console.log(i); // arr[1]()就是执行 return i 语句,就是返回10 ... console.log(i); // arr[9]()就是执行 return i 语句,就是返回10

2、注意事项

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。闭包会在父函数外部,改变父函数内部变量的值。

七、参数详解

1、参数分类

实际参数:调用时传递的参数形式参数:定义时传递的参数。

2、参数是什么

在定义一个函数时,有时候需要为函数传递额外的数据,不同的外部数据会得到不同的结果,这种外部数据就叫做参数。

3、参数的省略

函数参数不是必须的,javascript规范允许省略调用时传递的实际参数 一个用括号的参数列表,参数是可选的,参数是用逗号分隔开

4、参数默认值

函数参数的默认值是undefined。然而,在某些情况下设置不同的默认值是有用的。一般策略是在函数的主体 测试参数值是否为undefined,如果是则赋予一个值,如果不是,则返回实际参数传递的值 从ECMAScript 6开始,定义了默认参数(default parameters)。使用默认参数,在函数体的检查就不再需要了。

5、特性

参数个数没有限制

实参<形参 多余参数=undefined 实参>形参 多余的实参被忽略

通过arguments可以访问参数数组

参数始终按值传递

基本类型—>传值 引用类型—>传地址

八、调用方式

1、直接调用

函数名(实参列表)

function add(num1,num2){ console.log(num1+num2); } add(1,2);

2、在链接中调用

javascript:函数名(实参列表)

<script type="text/javascript"> function add(num1,num2) { console.log(num1+num2); } </script> <a href="javascript:add(1,2)">描述</a>

3、在事件中调用

事件名称=“函数名(实参列表)”

<button type="button" onclick="add(1,2)">调用js代码</button>

九、变量的作用域

9.1、定义

变量的作用域指的是,变量起作用的范围。也就是能访问到变量的有效范围。

9.2、变量的分类

全局变量局部变量

9.3、全局变量

定义

在函数外部的变量都是全局变量

示例代码

<script type="text/javascript"> //定义了一个全局变量。那么这个变量在当前html页面的任何的JS脚本部分都可以访问到。 var num = 20; alert(num); //弹出:20 </script> <script type="text/javascript"> //因为v是全局变量,所以这里仍然可以访问到。 alert(v); //弹出:20 </script>

调用

任何位置

9.4、局部变量

定义

在函数内声明的变量,叫局部变量!表示形参的变量也是局部变量! 局部变量的作用域是局部变量所在的整个函数的内部。 在函数的外部不能访问局部变量

示例代码

<script type="text/javascript"> function fun(){ alert(v); // 弹出:undefined var str = "abc"; // 声明局部变量。局部变量也会声明提前到函数的最顶端。 alert(str); // 弹出:abc } alert(str); //报错。因为变量str没有定义。 方法 fun 的外部是不能访问方法内部的局部变量 str 的。 </script>

调用

当前函数体内

9.5、同名优先级

局部变量高于同名的全局变量参数变量高于同名的全局变量局部变量高于同名的参数变量

9.6、特性

1、说明

忽略块级作用域全局变量是全局对象的属性局部变量是调用对象的属性

2、作用

内层函数可以访问外层函数局部变量外层函数不能访问内存函数局部变量

3、生命周期

全局变量除非被显示的删除,否则一直存在内存中局部变量自声明器至函数运行完毕或者被显示的删除

4、回收机制

标记清除引用计数
转载请注明原文地址: https://www.6miu.com/read-5022921.html

最新回复(0)