JavaWEB笔记07 Javascript中的函数

RainOnTheMoon

于 2021-07-29 14:39:15 发布

分类专栏：笔记文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_46702804/article/details/119209596

版权

笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

JavaWEB笔记07 Javascript中的函数

文章目录

JavaWEB笔记07 Javascript中的函数

一.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

RainOnTheMoon

关注

0
点赞
踩
0
收藏
打赏
0
评论
JavaWEB笔记07 Javascript中的函数

JavaWEB笔记07 Javascript中的函数文章目录JavaWEB笔记07 Javascript中的函数一.JS中常量的定义：二.JS中函数的定义：1.函数定义方法：2.自调用函数：3.函数中的变量：三.void运算符：四.JS中的内置对象--String：五.JS中的内置对象--Math：六.JS中的内置对象--Date：七.JS中的内置对象--Boolean：八.JS中的内置对象--Number：九.JS中的内置对象--Array：十.JS中作用域的说明以及变量访问原则：十一.JS中的全局函数
复制链接

扫一扫