js三种创建对象的方式

最新推荐文章于 2022-03-26 11:21:23 发布

西域一枝花

最新推荐文章于 2022-03-26 11:21:23 发布

阅读量326

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/weixin_40829761/article/details/81045908

版权

js基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三种创建对象的方式</title>
	</head>
	<body>
		<script>
			//第一部分：三种创建对象的方式
			//1.直接创建
			//2.采用构造函数的方式创建
			//3.采用Object的方式创建
			
			//第二部分：拓展
			//1.构造函数prototype属性
			//2.for……in语句
			//3.with语句
			
			//第一部分：三种创建对象的方式
			//1.直接创建
			/* var 对象名 = {
			 * 	属性名1：属性值1，
			 * 	属性名2：属性值2，
			 * 	属性名3：属性值3
			 * }
			 */
			var student = {				 //创建student对象
				name:"王二小",
				sex:"男",
				age:18,
				show:function(){	    //定义对象的方法
					document.write("姓名："+student.name+"<br/>");
					document.write("性别："+student.sex+"<br/>");
					document.write("年龄："+student.age+"<br/>");
				}
			}
			student.show();				//调用对象方法
			
			//2.通过构造函数创建
			//直接创建自定义对象方便直观，但如果创建多个相同对象，可采用构造函数；
			//(1)构造函数名需大写；
			//(2)参数用于初始化新对象，函数体内的this初始化对象的属性和方法；
			//(3)调用时必须使用new运算符,实例化对象；
			function User (name,sex,age){	    //定义构造函数
				this.name = name;					//初始化对象的属性
				this.sex = sex;					
				this.age = age						
				this.show = function(){				//初始化对象的方法
					document.write("姓名："+this.name+"<br/>"+"性别："+this.sex+"<br/>"+"年龄："+this.age+"<br/>");
				}
			}
			var user1 = new User("王二小","男",18);
			 user1.show();
			
			
			//3.通过Object创建对象
			//var 对象名 = new Object();
			//Object是javascript的内部对象，创建对象之后可以直接添加属性
			var student = new Object();            //创建一个对象
				student.name = "王二小";           //设置对象的name属性
				student.sex = "男";		          
				student.show = function(){        //定义对象的方法
					document.write("姓名："+student.name+"<br/>"+"性别："+student.sex+"<br/>"+"年龄："+student.age+"<br/>");
				}
				student.show();                  //调用对象的方法
			
			// 也可以采用参数的形式
			var student = new Object();          //创建一个对象
				student.show = function(name,age,sex){//定义对象的方法
					document.write("姓名："+name+"<br/>"+"性别："+sex+"<br/>"+"年龄："+age+"<br/>");
				}
				student.show("王二小","男",18);  //调用对象的方法
				
			//第二部分拓展：
			//1.构造函数prototype属性
			//2.for……in循环语句
			//3.with语句
			
			//1.构造函数prototype属性
			//prototype是javascript中所有函数都具有的一个属性，该属性可以向对象添加属性和方法
			//调用构造函数对象时，如果在函数中定义了多个属性和方法，每次创建对象实例都会为该对象分配相同的属性和方法，这会增加对内存的需求
			//可以通过prototype属性来解决
			function Student(name,sex,age){
				this.name = name;
				this.sex = sex;
				this.age = age;
			}
			Student.prototype.show = function(){			//添加show()方法
				document.write("姓名："+this.name+"<br/>"+"性别："+this.sex+"<br/>"+"年龄："+this.age+"<br/>");
			}
			var student1 = new Student("王二小","男",18);	//创建对象实例
			student1.show();	//调用对象的show()方法；
	
	    //2.for……in和for具有相同的功能，可以用来遍历对象的每一个属性，且每次都将属性名作为字符串保存在变量里
		/*for(变量 in 对象){
			语句
		}*/
		//注意：输出属性值采用：对象名[属性名]的方式而不能采用：对象名.属性名
		var user = {
			name:"张三",
			sex:"男",
			age:16
		}
		//for……in将user的所有属性名称保存在example变量中，user[example]可以获得属性值
		for (example in user){
			document.write(example+"="+user[example]);//输出属性名及属性值；
		}
		
		//3.with在访问对象的属性或方法时，避免重复引用指定对象名
		/*width(对象名称){
		 * 	语句
		 * }
		 */
		function Student(name,sex,age){
			this.name = name;
			this.sex = sex;
			this.age = age
		}
		var student2 = new Student("李四","男",12);
		with(student2){
			document.write("姓名："+name+"<br/>"+"性别："+sex+"<br/>"+"年龄："+age+"<br/>")
			// 不必在每个属性名前加上对象实例的名student2
		}
		
		</script>
	</body>
</html>