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

程序员文章站 2022-10-27 14:56:59

js中创建对象的方式及对象使用案例思路：案例演示：

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中创建对象的方式及对象使用