网站域名组成,接网站开发项目平台,页面系统升级维护中,深圳专业网站建设制作价格低一、函数的声明与调用
1.1 函数概述
函数可以封装一些功能#xff0c;可以供外部去重复的调用。所以#xff0c;一般我们把函数叫做具有重复功能的代码块。 JavaScript 基础到高级 Canvas游戏开发 原生JavaScipt案例合集 JavaScript DOM基础
假设饭店就是一个函数#xf…一、函数的声明与调用
1.1 函数概述
函数可以封装一些功能可以供外部去重复的调用。所以一般我们把函数叫做具有重复功能的代码块。 JavaScript 基础到高级 Canvas游戏开发 原生JavaScipt案例合集 JavaScript DOM基础
假设饭店就是一个函数饭店的功能就是做各种各样的菜但是具体做什么菜需要用户来点用户可以是我们当中的任何一个人当我们点好菜付完帐那么饭店就行驶它做饭的功能开始为我们做指定的可口饭菜这个我们点餐的过程其实就是类似于函数调用的过程。最后饭店做完菜给我们呈上来这个菜就类似于函数返回的数据
1.2 函数的声明
函数使用关键字 function 来进行声明
在声明的函数内部我们可以书写一些代码使这个函数具有某一种特定的功能。在函数内部书写的代码我们习惯上称为函数体。
函数声明的语法格式
function 函数名(形式参数){函数体
}思考求任意两个数的和
函数名的命名规则同变量命名规则
1.3 函数的调用
函数声明后不会自动执行需要进行调用
函数调用的语法 函数名()
函数的调用方式
直接在 JS 脚本的任何为止进行调用 函数名()事件驱动
练习使用函数包装流程语句也就是将流程语句当作函数体。一个大于0的整数打印它的所有约数。
分析一个数它的最小约数是1最大约数是它本身。如果还有其它约数肯定在 1 和 它本身之间。
什么是约数
约数又称因数。整数a除以整数b(b≠0) 除得的商正好是整数而没有余数我们就说a能被b整除或b能整除a。a称为b的倍数b称为a的约数。
使用函数封装简单介绍几个好处
避免全局变量的污染节约内存提高程序的执行效果减少重复代码的书写便于后期维护可以返回数据进行二次操作 等等…
1.4 函数的类型
function f(){}
console.log(typeof f);//function二、函数的参数
2.1 函数参数概念
参数可以类似的看作我们之前声明的变量只不过它的位置在函数后面的小括号中且不需要再使用var进行声明。函数的参数分为两种形式参数 和 实际参数。
**形式参数**简称形参。在函数声明的时候小括号中给定的参数此时不能确定参数的数据类型 和 具体的值。类似于前面讲的去饭店服务员给我们的菜单可以提供给这么多菜但是具体做什么菜还需要客户指定。
**实际参数**简称实参。在函数调用的时候用来替换形参的具体的值传递的参数此时确定了数据类型和值。
类似于前面讲的去饭店点菜根据服务员提供的菜单点具体的菜名
**传参**函数调用有一个传递参数的过程这个过程我们叫它传参。
需求求一个大于0的整数约数的个数
通过上面的描述和演示总结出JS的另外一个特点
JS是一门动态的、弱类型语言。
2.2 函数的重载
重载可以看作是函数参数的应用。
函数的重载在一个程序中声明多个同名函数但是其数据类型以及参数的个数并不相同。
JS中不存在函数重载的概念我们只能模拟。因为一旦在JS中声明多个同名函数后面的会覆盖前面的。
2.3 arguments对象
arguments对象是JS中一个特殊的对象。它是一个类数组存储的是函数调用时所有传递的实际参数。
arguments对象中内置了一个 length 属性用来获取函数调用时实际传递的参数的个数 语法 arguments.length
类数组和数组都具有索引索引从0开始依次递增如上图arguments对象中有对应的索引一一对应于传递的参数。通过 arguments[索引] 可以获取执行的对应的参数值
获取第一个参数 arguments[0]
获取最后一个参数 arguments[arguments.length - 1]
function sum() {console.log(arguments:,arguments);console.log(函数调用时传递的第一个参数,arguments[0]);console.log(函数调用时传递的参数个数,arguments.length);console.log(函数调用时传递的最后一个参数,arguments[arguments.length - 1]);
}模拟函数的重载
三、函数的返回值
很多情况下我们封装函数的目的是为了利用函数的这个功能得到某些数据然后对这些数据进行二次操作。
那么如果想要在函数中返回这些数据那么需要用到关键字 return。
return 关键字用于在函数中返回数据并跳出函数。
如果仅仅是为了跳出函数而不需要返回任何数据那么直接return即可。
练习 判断一个大于0的数字是否是质数。
什么是质数
质数也叫素数是指在大于1的自然数中除了1和它本身以外不再有其他因数的自然数。
分析 可以根据约数的个数当约数的个数是2的时候那么这个数就是质数。
return作为跳出函数用。一般会在面试中经常被问道return、break、continue的区别
四、函数的作用域
4.1 作用域概述
**概述**当声明函数后在函数的内部大括号函数体位置形成自己一个独立的内部区域这个内部区域就叫做函数作用域。
函数作用域相对于整个脚本区域来讲只是一个很小的独立区域这个很小的区域我们通常叫它局部作用域。而整个脚本区域我们通常叫它全局作用域。
全局作用域函数外的区域叫做全局作用域在全局作用域中声明的变量可以在脚本的任何位置(包裹函数内)都可以对其进行调用这个变量我们称为全局变量。全局变量的生命周期从文件被执行时创建当前就是页面被加载页面关闭后销毁。
局部作用域函数内的区域叫做局部作用域在局部作用域中声明的变量只能在函数的内部进行访问调用那么此时我们称其为局部变量。局部变量的生命周期函数被调用时创建函数调用完毕销毁。
4.2 作用域链问题
嵌套函数中存在多个被声明的同名函数在调用时首先查看当前作用域是否有这个变量有则调用没有则去它的上一级作用域中查找如果有则使用如果没有继续向上查找直到找到为止
//声明一个全局变量 num
var num 1;
function fn() {//在第一层函数中声明一个变量 numvar num 10;//在第一层函数中声明一个内部函数 fn2//创建函数的另外一个方式 将声明的匿名函数赋值给一个变量var fn2 function () {var num 100;return num;}return fn2;
}4.3 局部作用域内不使用var声明的变量
如果在函数的内部不使用var声明首先这是不标准的写法一般不建议且在严格摸下会报错。其次如果我们不小心这样用了那么在函数被调用后这个变量会提升为全局变量。如果函数没有被调用则不会创建这个变量。
function f() {num 10;console.log(num:,num);
}这种情况很容器造成全局变量的污染不建议使用。
var i 2;
console.log(i:,i);//i: 2
function f1() {var i 20;console.log(i:,i);//i: 20
}
f1();
console.log(i:,i);//i: 2var j 3;
console.log(j:,j);//j:3
function f2() {j 30;console.log(j:,j);//j:30
}
f2();
console.log(j:,j);//j:30上面的 j 本身是想作为一个局部变量来处理但是由于没有使用 var 声明造成函数调用时这个本要作为局部变量定义的变量 变成了 全局变量的赋值操作这样就造成了全局变量的污染或称为命名冲突。
4.4 同一个变量多次声明
如果在同一个作用域内一个变量被多次声明那么声明只会生效一次以第一次声明为准后面的声明不再作数直接作为变量的赋值操作。
var num 1;
console.log(num:,num);//num:1var num 10;
console.log(num:,num);//num:10num 100;
console.log(num:,num);//num:100五、函数的提升
在 JS 中有变量和函数的提升JS引擎在解析代码时分成两步
预解析阶段将所有变量 和 函数的声明提升到当前作用域的最顶部运行阶段进行变量的赋值操作
在JS中函数的创建方式有三种 第一种标准的方式 function 函数名(参数列表){函数体} function f() {num 10;return num:num;
}第二种函数表达式的方式将一个匿名函数赋值给一个变量 var f function(参数列表){函数体} var f1 function(){num 10;return num:num;
}第三种内置对象的方式 var f new Function(“参数列表”“函数体”) var f3 new Function(num 10; return num:num);var f2 new Function(a,b,return ab);使用标准的方式创建的函数与其它两种方式在调用时的不同 如果都是先声明再去调用看不出有什么区别上面已经验证过 f() f1() f3() 结果一致 如果时先调用再去声明的情况那么结果就不同了如下代码 非标准的方式利用的是一个变量来接收一个函数那么其本质就是变量。前面讲过变量的提升相当于将变量的声明提升到当前作用域的最顶部这时还没有赋值在调用的时候变量的值是undefined。所以后面两种创建函数的方式只能先声明再调用。 **标准的方式**会将整体作为一个声明部分再预解析阶段将其整体提升到当前作用域的最顶部所以标准的方式创建的函数可以在当前作用域的任何为止被调用。
小问题如果在同一个文件中存在同名的变量 和 函数函数优先于变量提升而前面讲到在一个文件中声明多个变量只有第一个会生效而函数也可以看作是变量不管使用var还是使用function都叫做声明。所以函数优先于变量提升后其它变量的声明都变成了赋值操作。
六、模块化编程
假设有一个酒店酒店中有保安负责安保、前台负责接待、服务生负责提供服务、厨师负责做饭、大堂经理负责协调等等。
这时如果将安保、前台、服务生、厨师、协调等工作全部交给大堂经理一个人去做这样效率会很慢酒店几乎没有多久肯定会倒闭。此时酒店提供所有的功能都在大堂经理一个人身上肯定是不行。
这时酒店考虑到经营问题又招来了保安、前台等等人负责其自己相应的领域工作然后大堂经理只需要调配这些人即可。这样效果就会很高了。
那么代码中也是一样尽可能的减少代码的耦合性。我们可以利用函数将功能封装的尽量单一在不同的场景下可以被重复的利用优化了代码又提高了执行的效果。这些其实就是模块化的思想。
后面随着课程的深入我们会接触到 seajs、requirejs、nodejs 这些东西都是用来进行模块化开发的不同之处在于其将一个js文件作为一个模块可以避免全局变量的污染。
这里我们使用函数来体会模块化编程的思想。
人类从古至今习惯将事情分工将一些内容做成一些公共模块模块可以重复反复使用。 模块化编程将一些基础的公共的部分单独封装到一个函数内可以多次被调用。
**案例**输出100以内的质数模块化编程。 逆向思维的过程输出100以内的质数 → 判断是不是质数 → 找约数个数
练习找100以内的完美数一个数的约数除了它本身外其他约数和还等于这个数。 注意模块化编程可以让我们的程序更加优化各个小模块要尽量功能单一提高重复使用率。
**练习**赢数是一种特殊的自然数除去它本身以外所有的约数和大于其本身。请输出100以内所有的赢数
练习如果整数 A 的全部约数包括1不包括 A 本身之和等于 B且 整数 B 的全部约数包括1不包括B 本身之和等于 A则称整数 A 和 B是一对亲密数。输出1000以内的亲密数。
七、作业 封装一个函数实现功能不借助临时变量进行两个整数的交换。 提示运算符、函数有两个参数 封装一个函数求3个数中的最大值 提示函数有三个参数、要求至少使用两种方式实现 封装一个函数实现在页面上输出 100 ~ 1000之间所有的质数并要求每行显示 6 个数字 封装一个函数实现 12! - 10! 结果 要求不能使用递归
八、数据类型在内存中的位置
数据类型有两大类基本数据类型 和 引用数据类型
基本数据类型Number数值类型 string字符串类型 Boolean布尔类型 Null空类型 Undefined未被定义的引用数据类型Object对象类型、Function函数类型
基本数据类型存储在内存的栈中引用数据类型存储在堆中
代码演示 var a 10,b 20,c 30,fn function () {};console.log(a:,a,b:,b,c:,c,fn:,fn);//a: 10 b: 20 c: 30 fn: ƒ () {}//修改b的值
b 200;
console.log(a:,a,b:,b,c:,c,fn:,fn);//a: 10 b: 200 c: 30 fn: ƒ () {}//声明一个变量d来接收基本数据类型的变量cvar d c;console.log(c:,c,d:,d);//c: 30 d: 30//改变基本数据类型c的值c 300;console.log(c:,c,d:,d);//c: 300 d: 30
//总结基本数据类型变量在进行赋值时只是将变量保存的值复制了一份给另外一个变量进行赋值。此时变量值得改变不会互相影响。//声明一个变量来接收引用数据类型得变量
var fn2 fn;
console.log(fn:,fn,fn2:,fn2);//fn: ƒ () {} fn2: ƒ () {}
console.log(fn fn2);//true 指向同一个内存地址//改变其中一个引用数据类型的结构
fn.x 100;
console.log(fn:,fn,fn2:,fn2);//fn: ƒ () {} fn2: ƒ () {}
console.log(fn fn2);//true 指向同一个内存地址
console.log(fn.x:,fn.x,fn2.x:,fn2.x);//fn.x: 100 fn2.x: 100
//总结引用数据类型变量在进行赋值时将引用数据类型的变量保存的地址复制了一份给另外一个变量复制。此时两个变量指向同一个地址其中一个结构发生改变会影响另外一个九、递归函数
递归就是在函数的内部调用函数自己本身
递归函数多用来解决一些 数字0以上 的数学问题
递归函数必须给定一个条件来退出函数否则会造成内存堆栈溢出的问题。
如
累加问题 1 2 3 … 98 99 100
累乘问题 100! 100 * 99 * 98 * … * 3 * 2 * 1
生兔子的问题 有一对兔子三个月开始每个月生一对小兔子这一对小兔子在成长到三个月的时候每个月也是生一对小兔子问一年之后在没有死亡的情况下总共有多少对兔子
换算成数学就是一个斐波那契数列 1 1 2 3 5 8 13 21 34 55 89 144…
// 斐波那契数列 1 1 2 3 5 8 13 21 34 55 89 144...
console.log(feiBo(1));
console.log(feiBo(2));console.log(feiBo(11));
console.log(feiBo(12));
// 求斐波那契数列中第 N 项的值
function feiBo(n) {if(n 1 || n 2){return 1;}return feiBo(n - 1) feiBo(n - 2);
}//feiBo(3) feiBo(3 - 1) feiBo(3 - 2) feiBo(2) feiBo(1) 1 1 2
//feiBo(4) feiBo(4 - 1) feiBo(4 - 2) feiBo(3) feiBo(2) feiBo(3 - 1) feiBo(3 - 2) 1 1 1 1 3
//feiBo(5) ....十、匿名函数和自执行函数
匿名函数也叫拉姆达函数说白了就是没有名字的函数
自执行函数IIFE也叫立即执行函数。不需要进行调用随着程序的执行会自动调用。IIFE有两部分组成函数体和执行部分。
//匿名函数的使用
//1. 声明一个变量来接收一个匿名函数
var f function () {};//事件驱动 window窗口对象的点击事件
var count 0;
window.onclick function () {console.log(第 (count) 次点击了窗口...)
};//IIFE自执行函数
;(function (a,b) {console.log(a b);
})(10,20);var result (function (a,b) {return a b;
})(10,20);
console.log(result:,result);十一、闭包函数
什么是闭包
闭包就是一个函数可以访问另外一个函数内部的变量。
想要理解闭包需要先了解 作用域链的问题 和 垃圾回收机制的问题设置到变量的生命周期。
在JS中任何一个函数都可以认为是闭包常见的情况是函数中可以访问全局变量嵌套函数可以访问祖先元素中的变量。
function f(){var i 1;function f2(){console.log(i);}return f2;
}//f函数中的 变量i 是一个局部变量局部变量只能在函数的内部被访问到
function f3(){console.log(i);
}如果想要在一个函数的外部访问这个函数内部的变量那么该怎么操作
假设我们将嵌套在内部的函数作为一个联通内外的桥梁在调用外层函数时返回这个内部的函数
function f() {var i 1;return function () {return i;}
}console.log(f);
console.log(f());
console.log(f()());//1
console.log(f()());//1
//也就证明每一次都是一个全新的环境得到的值也是一样的 局部变量和函数在外部函数调用完毕后即销毁//那么利用对象之间的引用关系可以保存当时执行的一个环境进而将局部的变量保存下来
//垃圾回收机制中对存在引用关系的对象 不会进行回收
var test f();//此时test就是一个函数
console.log(test)
console.log(test());//1
console.log(test());//2
console.log(test());//3var test2 f();//此时又是一个新的闭包函数 当执行f()时传递给test2的那个桥梁函数会记住当时所执行的上下文环境
console.log(test2);
console.log(test2());//1
console.log(test2());//2闭包的问题
闭包不宜使用过多容易造成内存的泄漏问题
但是使用闭包可以避免全局变量的污染很多高级程序中都会有闭包的应用。后面在高级课会利用闭包来私有化对象的属性和方法。
闭包目前可以用来解决
循环中有异步语句存在的情况下无法正确获取索引的问题。
// console.log(1111);
//回调函数将一个函数作为另外一个函数的参数
//在JS中有一个内置的延迟器在指定时间后去执行相应的操作
// setTimeout(function () {
// console.log(2222);
// })
// console.log(3333);//循环中异步语句获取索引的问题
// for (var i 0; i 10; i) {
// console.log(i:,i);
// }for (var i 0; i 10; i) {(function (j) {setTimeout(function () {console.log(内j:,j);})})(i);
}
console.log(外i:,i);
