频道栏目
首页 > 资讯 > JavaScript > 正文

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

18-07-23        来源:[db:作者]  
收藏   我要投稿

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>

最终页面显示效果:

直接量:

自带构造器:

自定义构造器:

相关TAG标签
上一篇:Angular2项目部署到服务器后刷新页面出错:前端发布时需要添加锚(hash)的解决办法
下一篇:OpenStackHeat简介
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站