频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
Web开发基础之JS中创建对象的方式及对象使用
2018-07-23 14:37:32         来源:Coder_Boy_的博客  
收藏   我要投稿

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>

最终页面显示效果:

直接量:

\

\

\

自带构造器:

\

\

\

自定义构造器:

\

\

\

点击复制链接 与好友分享!回本站首页
上一篇:AJAX的实现基础讲解及Jquery的ajax的原生js代码实例
下一篇:js内存管理与泄露的问题解析
相关文章
图文推荐
点击排行

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

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