JavaScript -- 函数

最新推荐文章于 2022-05-06 14:02:35 发布

坤少的IT之路

最新推荐文章于 2022-05-06 14:02:35 发布

阅读量207

点赞数

分类专栏： JavaScript 文章标签： Web JavaScript

本文链接：https://blog.csdn.net/qq_39456689/article/details/89133956

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、Js函数定义

1.函数声明

//函数声明
	function add(a,b){
		return a + b;
}

2.函数表达式

//函数表达式
const sub = function(a,b){
	return a - b;
}

函数表达式是es5推荐使用的函数定义方式

3.函数自调

//函数自调(不能是声明函数，能是函数表达式)
(function(){
	alert("函数自调");
})();

函数自调即：非函数声明形式的函数后面加()，可展示出自调作用。

4.箭头函数

//箭头函数
const mul = (a,b) => {
	return a * b;
}
			
//简化箭头函数
const print = () => alert("简化箭头函数");
			
//简化参数
const printX = x => alert(x);

①当没有参数时：使用 (）= {}

②当只有一个参数的时候：x => {}

③当只有一句表达式时：(a,b) => a*b;

箭头函数是es6提出的函数定义的语法，他与其他函数定义的区别在于，函数内的this表示的是外部的this。

二、Js函数参数

1.参数规则

2.参数默认值（两种）

①es5的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function sub(a,b){
				b = b || 3;
				alert("a = " + a + ",b = " + b);
			}
			sub(2);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：当b没有被定义时是TURE，否则FALSE

②es6的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function add(a,b = 2){
				alert("a = " + a + ",b = " + b);
			}
			add(2);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：

3.函数自带方法Arguments

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>	
			//函数内置方法Arguments
			function sum(){
				let i,count;
				count = 0;
				for(i = 0 ; i < arguments.length; i++) {
					count += arguments[i];
				}
				alert("count = " + count);
			}
			sum(2);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：

4.当传入参数过多的时候，js是无法分清谁将值传给谁。因此可以使用arguments[i]来进行赋值。

5.传值和其他编程语言类似的效果

三、Js函数的调用(四种)

1.this的本身

this指的是该函数被调用的对象。

①全局函数：this是windows

②对象中的方法：this是对象

③构造函数调用：this是对象，实例化

④作为函数方法被调用：

严格模式下：this是windows

非严格模式：this是调用者

2.函数的调用方式

①作为函数被调用 add作为函数被调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function add(a,b = 2){
				alert("a = " + a + ",b = " + b);
			}
			add(2);
		</script>
	</head>
	<body>
	</body>
</html>

②作为方法被调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var obj = {
				name:"kunun",
				myFunction:function(){
					alert(this.name);
				}
			}
			obj.myFunction();
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：

③作为构造函数被调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 构造函数:
			function myFunction(arg1, arg2) {
				this.firstName = arg1;
				this.lastName  = arg2;
			}
			 
			// This    creates a new object
			var x = new myFunction("John","Doe");
			alert(x.firstName);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：

④作为函数的方法被调用call和apply

call: 非严格模式下，体现出调用者是调用对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var obj = {
				name:"kunun",
			}
			
			function add(a,b) {
				alert(JSON.stringify(this));
				return a + b;
			}
			
			var result = add.call(obj,2,3);
			alert(result);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：

apply:非严格模式下，体现出调用者是调用对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var obj = {
				name:"kunun",
			}
			
			function add(a,b) {
				alert(JSON.stringify(this));
				return a + b;
			}
			
			var result = add.apply(obj,[2,3]);
			alert(result);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果同上。

⑤.call和apply的区别

四、函数的闭包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<p>局部变量计数。</p>
	<button type="button" onclick="myFunction()">计数!</button>
	<p id="demo">0</p>
	<script>
	var add = (function () {
		var counter = 0;
		return function () {return counter += 1;}
	})();
	
	function myFunction(){
		document.getElementById("demo").innerHTML = add();
	}
</script>
</body>
</html>

1.如果实在函数中返回一个函数的话，那么返回出来的结果是字符串

2.如果使用闭包，那么函数会进行一次初始化，闭包中的环境则是window环境，因此可以返回函数。（这是我自己的理解，不对的话，希望有人指正）

坤少的IT之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript -- 函数

一、Js函数定义1.函数声明//函数声明 function add(a,b){ return a + b;}2.函数表达式//函数表达式const sub = function(a,b){ return a - b;} 函数表达式是es5推荐使用的函数定义方式3.函数自调//函数自调(不能是声明函数，能是函数表达式)(functio...
复制链接

扫一扫