【前端 HTML+CSS+JavaScript(JS)】Object对象的声明定义及使用方法练习带注释/总结

最新推荐文章于 2022-08-24 14:14:09 发布

_小鹰

最新推荐文章于 2022-08-24 14:14:09 发布

阅读量668

点赞数 1

分类专栏：前端文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/cc2855816075/article/details/122931192

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

一、Object对象练习1

作业要求：

在这里插入图片描述

效果：

在这里插入图片描述

用两种方法，声明定义一个Object对象，并调用。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var hero1 = {	//声明并定义一个对象 注意 冒号 和 逗号 
				name: "地狱之眼",
				intelligence: 88,
				power: 0.8,
				agile: 88,
				// 注意下面是function,不能自定义名字
				skill: function(){	//胡扯
					alert("来点儿聚光灯，别浪费这吓死人的新头盔~");
				}
			}
		
			var hero2 = new Object();//先声明，后定义
			// 以下不行
			// function topple(){	//使倒塌，颠覆
			// 	alert("来点儿聚光灯，别浪费这吓死人的新头盔~");
			// }
			
				hero2.name = "超级兵";	//注意是 等号 了
				hero2.intelligence = 88;
				hero2.power = 8;
				hero2.agile = 88;
				//skill后面不要加()
				hero2.skill = function(slogan){	//带有参数的 对象函数
				console.log(slogan);
			};
			
			console.log(hero1.name, hero1.intelligence, hero1.power, hero1.agile, typeof(hero1.skill));
			hero1.skill();
			console.log(hero2.name, hero2.intelligence, hero2.power, hero2.agile, typeof(hero2.skill));
			//注意定义时skill后不需要加()，而调用时需要
			hero2.skill("干饭人干饭魂");
			
			
		</script>
	</body>
</html>

注意：

1、声明并定义一个对象注意冒号连接键值对，和逗号分隔各个参数。
2、注意定义时skill后不需要加()，而调用时需要，因为一旦添加()就是调用，除非引号引起来。
3、后续了解到，有三种方法创建一个对象，第三种是使用构造函数的方法：
在这里插入图片描述

Object对象练习2：

作业要求：

在这里插入图片描述

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//要等号
			var obj1 = {name: "", age: 17, tel: "18818818888", gender: 2, eat: function(){alert("爱吃迷hotel");}};
			var obj2 = new Object();
			
			obj2.name;
			obj2.age = 18;
			obj2.tel = "18818888888";
			obj2.gender = 3;
			obj2.eat = function(food){
					alert("爱吃" + food);
				}
			
			//name未定义 其值就是undefined
			var obj3 = {age: 17, tel: "18818818888", gender: 2, eat: function(){alert("爱吃粗霉");}}
			
			function objFormat(obj){	//obj初始化；obj计划 函数
				if(obj.name == undefined || obj.name == ""){
					obj.name = "bakabaka";
				}
				if(obj.age < 18 || obj.age > 50){
					obj.age = "年龄不符合要求";
				}
				if(obj.gender == 1)
					obj.gender = "男";
				else if(obj.gender == 2)
					obj.gender = "女";
				else
					obj.gender = "不明";
			}
			
			//谷歌控制台输出有问题，变量显示是字符串类型，console出来一会字符串一会数字
			console.log(obj1.name, obj1.tel, obj1.age, obj1.gender);
			console.log(typeof(obj1.tel));
			objFormat(obj1);
			console.log(obj1.name, obj1.tel, obj1.age, obj1.gender);
			obj1.eat();
			console.log(typeof(obj1.tel));
			
			console.log(obj2.name, obj1.tel, obj2.age, obj2.gender);
			console.log(typeof(obj2.tel));
			objFormat(obj2);
			console.log(obj2.name, obj1.tel, obj2.age, obj2.gender);
			obj2.eat("轰sing虎龙菇");
			console.log(typeof(obj2.tel));
			
			console.log(obj3.name, obj1.tel, obj3.age, obj3.gender);
			console.log(typeof(obj3.tel));
			objFormat(obj3);
			console.log(obj3.name, obj1.tel, obj3.age, obj3.gender);
			obj3.eat();
			console.log(typeof(obj3.tel));
			
			
		</script>
	</body>
</html>