2021.5.20 JS高级第三天_函数作为对象方法调用,会使得 this 的值成为对象本身-CSDN博客

本文链接：https://blog.csdn.net/JINGMaNong/article/details/117094345

函数的定义方式

函数声明
格式：
function 函数名称(参数列表){
//函数体
}
函数表达式
var 变量名 =function(参数列表) {
//函数体
}

函数声明与函数表达式的区别

函数声明必须有名字

函数声明会函数提升，在预解析阶段就已创建，声明前后都可以调用

函数表达式类似于变量赋值

函数表达式可以没有名字，例如匿名函数
函数表达式没有变量提升，在执行阶段创建，必须在表达式执行之后才可以调用
函数的调用

1.作为一个函数调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1.作为一个函数调用</title>
		<script>
			window.onload = function() {
				function test1() {
					alert("普通函数");
				};
				test1();
			}
		</script>
	</head>
	<body>
	</body>
</html>

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

<script>
window.test1();
</script>

2.函数作为对象的方法调用

函数作为对象的方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

构造函数和创建对象的语句可以合并

函数作为对象方法调用，会使得 this 的值成为对象本身。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2.函数作为对象的方法调用</title>
		<script>
			window.onload = function() {
				/*
				function Person(){
					this.firstName="pwi";
					this.lastName="sew";
					this.fullName=function(){
						return (this.firstName+" "+this.lastName);
					};
				};
				var person=new Person();
				var full=person.fullName();
				alert(full);
				*/
				//语句可以合并
				var person = {
					firstName: "pwi",
					lastName: "sew",
					fullName: function() {
						return (this.firstName + " " + this.lastName);
					}
				};
				var full = person.fullName();
				alert(full);
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.构造函数调用

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

构造函数中 this 关键字没有任何的值。

this 的值在函数调用实例化对象(new object)时创建。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3.构造函数调用</title>
		<script>
			window.onload=function(){
				// 构造函数:
				function myFunction(ae1,age2){
					this.firstName=arg1;
					this.lastName=age2;
					var a=new myFunction("john","Doe");
					alert(a);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

4.函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

call()/apply()两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数
:apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

函数内 this 指向的不同场景

函数的调用方式决定了 this 指向的不同：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.函数方法调用函数</title>
		<script>
			window.onload = function() {
				/*
				function test1(){
					alert("test函数");
					return "hello";
				};
				//函数方法调用函数
				var v=test1.call(test1);
				alert(v);
				
				function test2(name){
					alert("test2函数");
					return "hello"+name;
				};
				var v=test2.call(test2,"zhangsan");
				alert(v);
				
				//apply()
				function test1(){
					alert("test函数");
					return "hello";
				};
				var val=test1.apply(test1);
				alert(val);
				*/
				function test2(name) {
					alert("test函数");
					return "hello," + name;
				};
				var arr = ["zhangsan"];
				var v = test2.apply(test2, arr);
				alert(v);
			}
		</script>
	</head>
	<body>
	</body>
</html>

函数的其它成员

arguments 实参集合
length 形参的个数
name 函数的名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function() {
				function test1(x, y, z) {
					//alert("形参的的个数=="+test1.length);
					//alert(arguments)//形参的个数
					for (var i = 0; i < arguments.length; i++) {
						alert(arguments[i]);
					}
					alert("函数的名称==" + test1.name);
				}
				test1("zhangsan", 23, true);
			}
		</script>
	</head>
	<body>
	</body>
</html>

函数可以作为参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数可以作为参数</title>
		<script>
			function test(callback) {
				setTimeout(
					function() {
						alert('吃完了');
						callback();
					}, 1000);
			}
			//函数也可以作为参数
			test(function() {
				alert('唱歌去');
			});
		</script>
	</head>
	<body>
	</body>
</html>

函数可以作为返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数可以作为返回值</title>
		<script>
			function test1(){
				return function(){
					return "hello";
				};
			}
			var val=test1();
			alert(val);
		</script>
	</head>
	<body>
	</body>
</html>

函数闭包

闭包可以在一个内层函数中访问到其外层函数的变量。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test1() {
				var count = 0;
				var obj = {
					getCount: function() {
						alert(count);
					},
					setCount: function() {
						count++;
					}
				};
				return obj;
			}
			var returnobj = test1();
			returnobj.setCount();
			returnobj.getCount();
		</script>
	</head>
	<body>
	</body>
</html>