【前端从0开始】JavaSript——自定义函数

程皮2023-08-23 23:17

函数

  • 函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。
  • 函数包含着的代码只能在函数被调用时才会执行，就可以避免页面载入时执行该脚本
  • 在JavaScript中，可以使用以下三种方法来定义一个函数
    • 使用function语句定义函数
    • 使用Function()构造函数来定义函数
    • 在表达式中定义函数

Function构造函数定义函数

js 复制代码 
var 函数名 = new Function("参数1"，"参数2"，"参数3"......"函数体");

注意：

1. 在使用Function()构造函数的时候，第一个字母要大写
2. Function()构造函数只能在JavaScript 1.1或更高版本中使用
3. 每次调用构造函数时都会解析函数体，并且创建一个新的函数对象，效率非常底

function语句定义函数

js 复制代码 
function 函数名 (参数1，参数2......[形参]){
	<语句块>
	return 返回值
}

function关键字：用于定义一个函数

函数名：函数名通常是一个合法的标识符,是唯一的，区分大小写的

参数：在函数里，可以有0个或者多个参数。如果有多个参数，参数与参数之间要用逗号隔开。无论函数是否有参数，小括号必需要有

函数体：用大括号括起来的代码块，即函数的主体

返回值：函数返回的值由关键字return完成，可选项

在表达式中直接定义函数

js 复制代码 
var 函数名 = function (参数1，参数2，...){函数体};

注意：

在表达式中定义函数的方法只能在JS1.2版本或以上版本中使用

函数名（）

函数名/变量名

js 复制代码 
var rightKey=function(){
    if(event.button==2){
       alert("禁止使用鼠标右键");
    }  
}
window.onmousedown = rightKey;

调用函数

1.直接调用

js 复制代码 
myFunction();或window.myFunction()

2.事件处理中调用

html 复制代码 
<div onclick="myFunction()"></div>

3.将函数的返回值赋给变量

js 复制代码 
var t = myFunction();

函数的参数

形參：定义函数时，函数名后面()中的参数；JavaScript中的函数允许给行参赋初始值

实参：调用函数时，传递的参数

参数的匹配：

默认情况下，形參和实参是一一对应的

但是当传递的参数个数与函数定义好的参数个数可以不匹配当不匹配时

  • 如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined；
  • 如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉。

获取所有实参【arguments】

js 复制代码 
function Test(a,b){
		alert(typeof(arguments)); // 获得类型
		alert(arguments[1]);      // 获取下标为1的参数值
		alert(arguments.length);  // 获取参数的长度
		alert(arguments.callee);  // 获取函数的所有内容
}
Test("zhang","li");

默认参数

JavaScript中的函数允许给参数赋初始值

比如：我们在创建封装一个创建table表格的函数，如果任何参数不传，我们也想创建一个四行五列，并且背景颜色，各行换色的表格，这时候我们就可以使用表格来创建

案例：创建一个带默认参数的函数

js 复制代码 
function tab(row,color='pink',color2='gray'){
  document.write('<table border="1" width="500">');
  for(var index = 0; index < row; index++){
    if(index%2 == 1){
      document.write('<tr bgcolor="'+color+'"><td>'+index +'</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>');
    }else{
      document.write('<tr bgcolor="'+color2+'"><td>'+index +'</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>');
    }
  }
  document.write('</table>');
}
tab(10,'gray','orange');

函数的返回值

●return语句并不是必须的

●默认情况下，函数的返回值为undefined

●在使用 return 语句时，函数会停止执行，并返回指定的值，return后面的代码不再执行

什么情况下添加return：

如果函数中的变量要在函数外进行调用

函数体的结果需要在函数外进行使用

变量的作用域

全局变量：

在函数外声明的的变量为全局，在整个JS文档中生效

局部变量：

在函数内用var声明的变量为局部变量，只能在函数内部使用。

全局变局部

全局变量可以在局部的任意位置使用

局部变全局

局部变量不能在全局使用，如果想要在全局使用，可以去除前边的var或者将该值使用return返回到全局

块级作用域【ES6中新增的内容】

什么是作用域链【了解】

●只要在js中创建变量，就会存在作用域【全局作用域】

●写在函数内部的被称为局部作用域

●如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域

●在函数中如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样一个查找过程形成的链条就叫做作用域链。

默认情况下：内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数

js 复制代码 
var n = 10;
function outer(){
  function inner(){
    function center(){
      console.log(n);
    }
    center();
  }
  inner();
  var n = 15;
}
outer(); //=> undefined

案例：案例分析

js 复制代码 
var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少？

如函数的执行，形成一个私有作用域，形参和当前私有作用域中声明的变量都是私有变量，保存在内部的一个变量对象中，其下一个外部环境可能是函数，也就包含了函数的内部变量对象，直到全局作用域。

预解析

预解析，又称之为变量提升，在js代码真正执行之前，进行提前加载，把所有带有var和function的关键字进行预解析

●JavaScipt代码是由浏览器中的JavaScript解析器来执行的

●JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行

●预解析分为变量预解析（变量提升）和函数预解析（函数提升）

●代码执行是按代码的书写顺序从上到下执行的

  1. 对于带有var和function关键字在预解释的时候操作
    var :只声明不定义
    function:既声明又定义
    注：私有作用域下也要进行预解析
  2. 预解析只发生在当前的作用域下
    就是当文档加载的时候，开始只对window进行预解析，函数执行的时候才会对里面的代码进行预解析
js 复制代码 
console.log(a); // 注意：预解析的问题，如果同时有变量和函数的预解析，那么函数的优先级高
var a = 'hello';
function a(){
  console.log(123);
}

// 优先执行栈内存中的内容
// function a(){
//     console.log(123);
// }
// var a = 'hello';
// console.log(a); // hello

案例：分析代码结果

js 复制代码 
// 案例1
var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
// 案例二
var num = 10;
function fun() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fun();

// 案例三
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = 13;
}

// 案例四
console.log(a,b,c);
var a = b = c = 5;

// 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 案例五
fn();//报错 只预解析"="左边的，右边的是指针，不参与预解析
var fn=function(){
    console.log(11);
}
// 案例六
function fn(){
    console.log(a);
    a=100;
}
fn();
console.log(a);
//注意：js中，如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码不再执行

// 案例七
console.log(show);
function show(){
  console.log(123);
}
var show = 10;

// 案例八
function show(){
  console.log(123);
}
var show = 10;
console.log(show);

案例：分析代码结果

js 复制代码 
// 案例1
var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
// 案例二
var num = 10;
function fun() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fun();

// 案例三
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = 13;
}

// 案例四
console.log(a,b,c);
var a = b = c = 5;

// 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 案例五
fn();//报错 只预解析"="左边的，右边的是指针，不参与预解析
var fn=function(){
    console.log(11);
}
// 案例六
function fn(){
    console.log(a);
    a=100;
}
fn();
console.log(a);
//注意：js中，如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码不再执行

// 案例七
console.log(show);
function show(){
  console.log(123);
}
var show = 10;

// 案例八
function show(){
  console.log(123);
}
var show = 10;
console.log(show);

变量的生命周期【了解】

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

html 复制代码 
<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
</ul>

var lis = document.getElementsByTagName("li");
	for(var i=0; i<lis.length;i++){
		lis[i].onclick = function(){
			alert(i);
		}
}

案例：

js 复制代码 
// 案例一
function test(){
	uname = "香水有毒";
}
console.log(uname);

// 案例二
function test(){
	uname = "香水有毒";
}
test();
console.log(uname); 

// 案例三
uname = "香水有毒";
function test(){
	console.log(uname);
}
test(); 

// 案例四
var uname = "香水有毒";
function test(){
	console.log(uname);
}
function test2(){
	uname = "老鼠爱大米";
	test();
}
test2(); 

// 案例五
var uname = "香水有毒";
function test(){
	console.log(uname); 
}
function test2(){
	uname = "老鼠爱大米";
	return test;
}
res=test2(); 
res();

自执行函数

js 复制代码 
(function a(){alert('我是自执行函数')} ()); // 用括号把整个表达式包起来
(function a(){alert('我是自执行函数')}) (); //用括号把函数包起来
!function a(){alert('我是自执行函数')}(); // 求反，我们不在意值是多少，只想通过语法检查。
+function a(){alert('我是自执行函数')}();
-function a(){alert('我是自执行函数')}();
~function a(){alert('我是自执行函数')}();
void function a(){alert('我是自执行函数')}();
new function a(){alert('我是自执行函数')}();

自执行函数通常都是定义之后立即执行，以后都不再会调用，所以声明时可以省略函数名，因此自执行函数又叫匿名函数 。

js 复制代码 
(function(){console.log('我是匿名函数')})();// 我是匿名函数

如果上一行代码没有使用 分号 ' ; '结束，可能会导致匿名函数通不过语法检查，所以通常会在小括号前加个分号

js 复制代码 
;(function(){console.log('我是匿名函数')})()// 我是匿名函数

自执行函数的效果

自执行函数可以用来保存变量的作用域，防止污染全局变量

以一个经典的面试题为例；

html 复制代码 
<ul>
  <li>这是第1个li</li>
  <li>这是第2个li</li>
  <li>这是第3个li</li>
  <li>这是第4个li</li>
  <li>这是第5个li</li>
  <li>这是第6个li</li>
</ul>

一个列表里有6个li，要求点击li的时候打印当前被点击li的索引。

如果我们直接通过for循环绑定事件：

js 复制代码 
var lis = document.querySelectorAll('li');
for(var i = 0;i<lis.length;i++){
  lis[i].onclick = function (){
    console.log(i)
  }
}
// 无论哪个li被点击，打印的永远都是相同的值，因为在所有的点击事件中，访问的都是全局的 i,当事件触发时，i的值已经变成是lis.length了。

在es6语法出现之后，我们使用 let 关键字创建的块级作用域可以解决这种问题，在 let 出现以前，通常是使用匿名函数+闭包的方式创建函数作用域来保存每一步循环里 i 的值；

js 复制代码 
var lis = document.querySelectorAll('li');
for(var i = 0;i<lis.length;i++){
  (function(i){
    lis[i].onclick = function (){
      console.log(i)
    }
  })(i)
}
// 使用这种方法，每次循环都会创建一个匿名函数，这个匿名函数生成了闭包的效果，新建了一个作用域，
// 这个作用域接收到每次循环的i值保存了下来，即使循环结束，闭包形成的作用域也不会被销毁；
// 事件处理函数中访问的 i 不再是全局变量，而且匿名函数中的局部变量。

闭包

什么是闭包：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成"定义在一个函数内部的函数"。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

特点：

  1. 闭包就是一个特殊的函数
  2. 函数内部可以引用函数外部的参数和变量【能访问到其他作用域中的变量】
  3. 参数和变量不会被垃圾回收机制回收【延长变量的生命周期】
    创建闭包
js 复制代码 
// 简单的闭包，
var num = 10;
function show(){
    console.log(num);
}

// 局部变量在全局使用
function show(){
  var num = 10;
  return function(){ // 闭包函数
    return num
  };
}
var b = show();
console.log(b());

// 局部变量
function f1(){
  var n=999;
}

// 局部变量在全局使用
function f1(){
  var n=999;
  function f2(){ 
    alert(n); // 999
  }
  return f2; // 闭包函数
}
f1()()

// 总结：闭包就是能够读取其他函数内部变量的函数。

案例：将普通函数改为闭包函数

js 复制代码 
// 普通函数
function show(){
  var m = 1;
  function inner(){
    var n = 0;
    console.log(++n);
    console.log(++m);
  };
  inner();
}

// 闭包函数
function show(){
  var m = 1;
  return function(){
    var n = 0;
    console.log(++n);
    console.log(++m);
  };
}

闭包的用途：

  1. 是前面提到的可以读取函数内部的变量
  2. 就是让这些变量的值始终保持在内存中。

闭包的缺点

比普通函数更占用内存，会导致网页性能变差，在IE下容易造成内存泄露。

什么是内存泄漏

首先，需要了解浏览器自身的内存回收机制。

每个浏览器会有自己的一套回收机制，当分配出去的内存不使用的时候便会回收；内存泄露的根本原因就是你的代码中分配了一些'顽固的'内存，浏览器无法进行回收，如果这些'顽固的'内存还在一直不停地分配就会导致后面所用内存不足，造成泄露。

闭包造成内存泄漏

因为闭包就是能够访问外部函数变量的一个函数，而函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中，这样就不会被回收，如果一旦循环引用或创建闭包，就会占据大量内存，可能会引起内存泄漏

函数案例

  1. 封装一个反转数组方法
js 复制代码 
// 方法一
function reverse(arr){
  var newArr = [];
  for(var i=0;i<arr.length;i++){
    newArr[arr.length-i-1] = arr[i];
  }
  return newArr;
}
var arr1 = reverse([1,4,7,9,12,16]);
console.log(arr1);

// 方法二
function reverse(arr){
  var newArr = [];
  for(var i=arr.length-1;i>=0;i--){
    newArr[newArr.length] = arr[i]
  }  
  return newArr;
}
var arr1 = reverse([1,4,7,9,12,16]);
console.log(arr1);

// 注意：数组中不管是任意内容，都可以实现反转
  1. 函数封装实现 - 冒泡排序
js 复制代码 
function sort(arr){
  for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
      if(arr[j] > arr[j+1]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }	
    }
  }
  return arr;
}
var arr1 = sort([40,8,15,18,12]);
console.log(arr1);
  1. 使用函数，判断今年是平年还是闰年
js 复制代码 
function isRunYear(year){
  // 闰年 true，平年 false
  var flag = false;
  if((year%4==0 && year %100!=0 )||year%400==0){
    flag = true;
  }
  return flag;
}
console.log(isRunYear(2000));
// 思考：输入年份，判断当前年份的2月份有多少天
  1. 获取数组中的最大值
js 复制代码 
function max(arr){
  var max = arr[1];
  for(var i=0;i<arr.length;i++){
    if(arr[i] > max){
      max = arr[i]
    }
  }
  return max;
}
console.log(max([1,34,96,23,78]));
相关推荐
前端啊龙1 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器，日期选择器
前端·javascript·vue.js
一颗松鼠6 分钟前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
小远yyds26 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解