欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web开发基础之JS中创建对象的方式及对象使用

程序员文章站 2022-10-27 14:56:59
js中创建对象的方式及对象使用 案例思路: 案例演示:

js中创建对象的方式及对象使用

案例思路:

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用

案例演示:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象</title>
		<script type="text/javascript">
			//采用直接量的方式创建对象
			function f1(){
				var stu = {"name":"张三",
							"age":23,
							"work":function(){alert("我要学javascript")}
						  };
				
				alert(stu.name);
				alert(stu.age);
				stu.work();
			}
		
			//采用js自带构造器创建对象
			function f2(){
				var teac = new object();
				teac.name = "王老师";
				teac.age = 50;
				teac.work = function(){
					alert("我教javascript");
				};
				
				alert(teac.name);
				alert(teac.age);
				teac.work();
			}
			
			//采用自定义构造器创建对象
			function coder(name,age,work){
				//this代表创建出来的对象
				//.key代表对象的属性
				this.name = name;
				this.age = age;
				this.work = work;
			}
			function f3(){
				var cd = new coder("李四",26,
						function(){alert("我写javascript")});
				
				alert(cd.name);
				alert(cd.age);
				cd.work();
			}
			
			/* function f3(){
				var cd = new coder("李四",26,
						function(){alert("我写javascript") return 2});
				
				alert(cd.work());	
			} */
		</script>
	</head>
	<body>
		<input type="button" value="直接量" 
			onclick="f1();">
	    <input type="button" value="自带构造器" 
	    	onclick="f2();">
	    <input type="button" value="自定义构造器" 
	    	onclick="f3();">
	</body>
 
</html>

最终页面显示效果:

直接量:

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用

自带构造器:

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用

自定义构造器:

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用

Web开发基础之JS中创建对象的方式及对象使用