对象

发布于 2020-02-04  157 次阅读


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * JS中数据类型
			 * 	- String 字符串
			 *  - Number 数值
			 * 	- Boolean 布尔值
			 * 	- Null 空值
			 * 	- Undefined 未定义
			 * 		- 以上这五种类型属于基本数据类型,以后我们看到的值
			 * 			只要不是上边的5种,全都是对象
			 * 	- Object 对象
			 * 
			 * 
			 * 基本数据类型都是单一的值"hello" 123 true,
			 * 	值和值之间没有任何的联系。
			 * 
			 * 在JS中来表示一个人的信息(name gender age):
			 * 	var name = "孙悟空";
			 * 	var gender = "男";
			 * 	var age = 18;
			 * 如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。
			 * 
			 * 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
			 * 
			 * 对象的分类:
			 * 	1.内建对象
			 * 		- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
			 * 		- 比如:Math String Number Boolean Function Object....
			 * 
			 * 	2.宿主对象
			 * 		- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
			 * 		- 比如 BOM DOM
			 * 
			 * 	3.自定义对象
			 * 		- 由开发人员自己创建的对象
			 * 
			 */
			
			//创建对象
			/*
			 * 使用new关键字调用的函数,是构造函数constructor
			 * 	构造函数是专门用来创建对象的函数
			 * 使用typeof检查一个对象时,会返回object
			 */
			var obj = new Object();
			
			
			/*
			 * 在对象中保存的值称为属性
			 * 向对象添加属性
			 * 	语法:对象.属性名 = 属性值;
			 */
			
			//向obj中添加一个name属性
			obj.name = "孙悟空";
			//向obj中添加一个gender属性
			obj.gender = "男";
			//向obj中添加一个age属性
			obj.age = 18;
			
			/*
			 * 读取对象中的属性
			 * 	语法:对象.属性名
			 * 
			 * 如果读取对象中没有的属性,不会报错而是会返回undefined
			 */
			
			//console.log(obj.gender);
			//console.log(obj.hello);
			
			/*
			 * 修改对象的属性值
			 * 	语法:对象.属性名 = 新值
			 */
			obj.name = "tom";
			
			/*
			 * 删除对象的属性
			 * 	语法:delete 对象.属性名
			 */
			delete obj.name;
			
			
			console.log(obj.age);
			
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = new Object();
			
			//向对象中添加属性
			obj.name = "孙悟空";
			obj.age = 18;
			
			//对象的属性值可以是任何的数据类型,也可以是个函数
			obj.sayName = function(){
				console.log(obj.name);
			};
			
			function fun(){
				console.log(obj.name);
			};
			
			//console.log(obj.sayName);
			//调方法
			obj.sayName();
			//调函数
			//fun();
			
			/*
			 * 函数也可以称为对象的属性,
			 * 	如果一个函数作为一个对象的属性保存,
			 * 	那么我们称这个函数时这个对象的方法
			 * 	调用这个函数就说调用对象的方法(method)
			 * 
			 * 但是它只是名称上的区别没有其他的区别
			 * 
			 */
			
			var obj2 = {
				
				name:"猪八戒",
				age:18,
				sayName:function(){
					console.log(obj2.name);
				}
				
			};
			
			obj2.sayName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

 

枚举对象中的属性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = {
						name:"孙悟空",
						age:18,
						gender:"男",
						address:"花果山"
					 };
					 
			//枚举对象中的属性
			//使用for ... in 语句
			/*
			 * 语法:
			 * 	for(var 变量 in 对象){
			 * 	
			 *  }
			 * 
			 * for...in语句 对象中有几个属性,循环体就会执行几次
			 * 	每次执行时,会将对象中的一个属性的名字赋值给变量
			 */
			
			for(var n in obj){
				console.log("属性名:"+n);
				
				console.log("属性值:"+obj[n]);
			}
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

 

创建对象的方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = {
					name:"孙悟空",
					age:18,
					gender:"男",
					sayName:function(){
						alert(this.name);
					}
			};

			/*
			 * 使用工厂方法创建对象
			 * 	通过该方法可以大批量的创建对象
			 */
			function createPerson(name , age ,gender){
				//创建一个新的对象 
				var obj = new Object();
				//向对象中添加属性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				};
				//将新的对象返回
				return obj;
			}
			
			/*
			 * 用来创建狗的对象
			 */
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					alert("汪汪~~");
				};
				
				return obj;
			}
			
			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("白骨精",16,"女");
			var obj4 = createPerson("蜘蛛精",18,"女");
			/*
			 * 使用工厂方法创建的对象,使用的构造函数都是Object
			 * 	所以创建的对象都是Object这个类型,
			 * 	就导致我们无法区分出多种不同类型的对象
			 */
			//创建一个狗的对象
			var dog = createDog("旺财",3);
			
			console.log(dog);
			console.log(obj4);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

 

 

 

 

 

 

 


注错之当