首页 > 编程语言 >JavaScript 工厂方法创建对象

JavaScript 工厂方法创建对象

时间:2023-02-26 21:47:11浏览次数:30  
标签:function obj name 对象 age JavaScript 创建对象 工厂 var

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = {
					name:"孙悟空",
					age:18,
					gender:"男",
					sayName:function(){
						alert(this.name);
					}
			};

			/*
			 * 使用工厂方法创建对象
			 * 	通过该方法可以大批量的创建对象
			 */
			function createPerson(name , age ,gender){
				//创建一个新的对象 
				var obj = new Object();
				//向对象中添加属性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				};
				//将新的对象返回
				return obj;
			}
			
			/*
			 * 用来创建狗的对象
			 */
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					alert("汪汪~~");
				};
				
				return obj;
			}
			
			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("白骨精",16,"女");
			var obj4 = createPerson("蜘蛛精",18,"女");
			/*
			 * 使用工厂方法创建的对象,使用的构造函数都是Object
			 * 	所以创建的对象都是Object这个类型,
			 * 	就导致我们无法区分出多种不同类型的对象
			 */
			//创建一个狗的对象
			var dog = createDog("旺财",3);
			
			console.log(dog);
			console.log(obj4);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

标签:function,obj,name,对象,age,JavaScript,创建对象,工厂,var
From: https://www.cnblogs.com/chuixulvcao/p/17157819.html

相关文章

  • JavaScript 构造函数
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *创建一个构造函数,专门用来创建Person对......
  • JavaScript 立即执行函数
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> //函数对象() /* *立即执行函数 ......
  • JavaScript 枚举对象中的属性
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> varobj={ name:"孙悟空", age:1......
  • JavaScript 作用域
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *作用域 * -作用域指一个变量的......
  • JavaScript 相等运算符
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *相等运算符用来比较两个值是否相等, ......
  • JavaScript 条件运算符
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *条件运算符也叫三元运算符 * 语法: ......
  • JavaScript 运算符的优先级
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *,运算符 * 使用,可以分割多个语......
  • JavaScript 代码块
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *我们的程序是由一条一条语句构成的 ......
  • JavaScript 流程控制语句
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *流程控制语句 * -JS中的程序是......
  • JavaScript if语句
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> /* *if语句 * 语法二: * if(条......