JavaWEB笔记07 Javascript中的函数
JavaWEB笔记07 Javascript中的函数
文章目录
- JavaWEB笔记07 Javascript中的函数
-
- 一.JS中常量的定义：
- 二.JS中函数的定义：
-
-
- 1.函数定义方法：
- 2.自调用函数：
- 3.函数中的变量：
-
- 三.void运算符：
- 四.JS中作用域的说明以及变量访问原则：
- 五.JS中的全局函数：
- 六.URL编解码：
- 七.预解析：
- 八.基于预解析的练习：
一.JS中常量的定义：
Javascript遵循ECMAscript5进行相关规范，在ES6之后可以定义常量，使用const str="ABC"进行常量定义
二.JS中函数的定义：
- 函数的介绍：类似于java中的方法，就是对功能逻辑代码进行封装，以实现重复调用；
- 函数这一名称更多的是出现在了像C语言那样的面向过程的编程语言中，而在java这类面向对象的语言中将有同样功能的代码段称为方法
- Java中的方法不能嵌套定义，而JS中的函数可以嵌套定义
1.函数定义方法：
JS中函数分为两部分：函数名和函数体两部分，在定义函数时常用到的函数定义方法共有以下三种：
- 方式1：var show = function(){alert(“这是一个函数”)}
调用函数：show(); - 方式2：将function起到前面：function add(){var a=10; alert(a); }
调用函数：add(); - 方式3：（基本不用）var fun = new Function(“a,b”,“alert(a+b)”) 即：第一个引号是参数，第二个方法体
JS函数定义细节：
JS在函数定义时定义形参不需要定义数据类型，因为全部的数据类型都是var，写数据类型，即写var会报错：
function show(a,b){ } //a,b这两个形参就没有定义数据类型
同时JS在函数定义时也不需要写返回类型，因为返回类型的数据类型也是var，在函数体中要返回数据就使用return进行返回：
function showten(a){ return a; }
形参传参时多传少传都可以不会报错，就是最终的结果会是NaN或者其他：
function showa(a){ return 1; } //函数定义
show(a,b); //调用函数，最终结果a是1，b是NaN
函数类型可以看作一个对象，使用typeof进行查看返回function类型，并返回类型为object：
<script type="text/javascript">
function show() {
return null;
}
alert(typeof (show()))
</script>
函数内部有内置对象arguments是一个数组，可以接收所有传过来的实参，arguments[index] 可以通过index访问对应的参数：
1）参数个数未达到index的访问个数时：
<script type="text/javascript">
function show() {
var a = arguments[1];
alert(a);
}
show();
</script>
2）参数个数比index的访问个数更多时：
<script type="text/javascript">
function show(a,b) {
var d = arguments[1];
alert(d);
}
var a = 100;
var b = 200;
show(a,b);
</script>
函数名.length可以获得函数的形参个数：
<script type="text/javascript">
function show(a,b) {}
alert(show.length)
</script>
2.自调用函数：
JS中的自调用函数：即使用如下格式代码，自己调用自己使用的函数：(function(){/*code*/}())
举例：
<script type="text/javascript">
var sum = (function add(a,b){
return a+b;
}(10,20))
alert(sum) //实际上是sum自己调用自己，值为10+20
</script>
3.函数中的变量：
JS函数中的变量分为全局变量和局部变量两种，在函数内部可以使用全局变量，局部变量出了函数范围就无法访问了，注意： 函数中的局部变量前面不写明var就变成了全局变量
三.void运算符：
JS中void是一种运算符，这一点是与java，C这些语言有很大程度上的不同的，其他语言种void常出现作为函数的定义符（空返回）出现，下面将介绍JS种这种特殊的运算符：
- void关键字在JS中是一维运算符
- void运算符作用示例：
（1）对于a标签中后面的链接，不想跳转网页，只想将a标签作为按钮来用，不会跳转新的页面，之前的操作是href="#"，即将链接封死；
（2）使用void运算符在内联方式中有:href="javascript:void(show())"其中void运算符的作用是会拦截页面，不会跳转页面，只会弹出show中的结果，而单纯作按钮可以使用：href="javascript:void(0)"不会跳页面；简写不跳页面：href="javascript:;;"
<body>
<a href="javascript:void(show())">点我测试void</a>
<script type="text/javascript">
function show() {
alert('void运算符');
}
</script>
</body>
四.JS中作用域的说明以及变量访问原则：
作用域有三种：全局作用域，局部作用域，块级作用域
- 全局作用域： script这对标签的范围或一个单独的js文件
- 局部作用域： 函数{}的范围
- 块级作用域：{} for(){} if(){}；但在ES5中没有块级作用域的概念
块级作用域引入案例：
if(1){ var s=25; } alert(s)
按理来说弹框所在的位置在块之外不能拿到，但是在弹框时依旧可以得到s的值是25，这说明：
JS中没有块级作用域的概念 ！出范围之外依旧有效 ！
ES6中引入了一个关键字let，可以定义块级作用域变量，即在块中不使用var进行定义，而使用let进行定义，于是为了使for循环中出现的循环参数在后面的循环中无效，常将包括在for循环中定义i和j也不使用var而使用let
JS中变量的访问遵循就近原则
五.JS中的全局函数：
JS中的全局属性和函数同时用于所有内建的JS对象，全局函数中的方法，直接调用即可：
- 判断是不是NaN，调用全局函数方法：
isNaN(num)，返回boolean类型 parseInt()和parseFloat()两个方法都是解析一个字符串并返回一个整数或浮点数，从前往后转，直到遇到不是有效数字的地方停止
六.URL编解码：
decodeURLComponent()解码一个编码的URI组件encodeURLComponent()编码：编码可以将对应字符编码为对应的编码- 浏览器对中文进行URL编码：浏览器传输协议中采取键值对的形式传输，键之间用&隔开，键值之间用=隔开，会产生歧义，当参数在传输中含&和=，进行编码之后就不会出现歧义了
七.预解析：
预解析问题的提出：
- 问题1：num is not defined ： console.log(num);
- 问题2：undefined : console.log(num); var num=100;
- 问题3：在函数定义的上面调用函数，依旧可以执行函数 : show(); function show(){ console.log(“执行”) }
- 问题4：函数not defined : test(); var test=function(){ console.log(“test执行”) }
JS中的预解析：
在当前的作用域下，JS代码执行之前，浏览器会默认将带有var和function声明的变量在内存中进行提前声明或者定义，预解析也叫做变量，函数提升，预解析也就等于说会把代码有一个向上提前的过程：
- js引擎运行js 分为两步：预解析和代码执行
1）预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
2）代码执行 按照代码书写的顺序从上往下执行 - 预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
1）变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
2）函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
八.基于预解析的练习：
1.看程序分析结果
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
结果：undefined
- 看程序分析结果
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
结果：undefined 20
- 看程序写结果
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
结果：undefined 9
- 看程序分析结果
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);
}
结果：9
9
9
9
9
a is not defined