创建对象的多种方法_对于创建对象的多种方法-CSDN博客

本文链接：https://blog.csdn.net/weixin_47182606/article/details/108414473

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 1：字面量形式创建对象
			  var student ={
				  name:"小明",
				  age:16,
				  school:"尚学堂",
				  like:function(){
					  console.log(this.name+"喜欢篮球")
				  }  
			  }
			  
			  
			  // 2：工厂模式创建对象
			  function Student(name,age,likename){
				 var student ={
					name:"小明",
				  	age:16,
				  	school:"尚学堂",
				  	like:function(){
				  		console.log(this.name+"喜欢"+likename)
				  	}  
				  }
				  return student;
			  }
			  
			  var s1 =Student("小红",18,"弹钢琴");
			  console.log(s1)
			  var s2 = Student("小李子",20,"抬杠")
			  console.log(s2)
			  
			  
			  // 3：构造函数创建对象,Object浏览器自带的函数对象
			  //自定义构造函数
				// 完整构造函数创建对象的方式
				// 1：创建构造函数
				// 2：创建原型对象
				// 3:设置构造函数原型的对象属性prototype
				function Teacher(name,age,likename){
					this.name = name;
					this.age = age;
					this.likename = likename
					// console.log(this)
				}
				var teacherProto = {
								  tlike: function(){
								  console.log(this.name+"喜欢"+likename)
								  },
								  teach:function(){
									  console.log("较好学生")
								  }
				}
				Teacher.prototype = teacherProto
				
				//new 创建一个新的对象，将函数内部的this指向新的对象
				var t1 = new Teacher("小明","60","看电影")
				// console.log(t1.name)
				// console.log(t1.age)
				// console.log(t1.like)
				var t2 = new Teacher("老王",80,"烧烤")
				console.log(t1)
				console.log(t2)
				
				
				// 4第四种方法，class=> es6 新出的规范，允许使用class创建对象
				class Cat{
					// 定义构造函数
					constructor(name,color,like) {
					    this.name = name;
						this.color = color;
						// this.like = function(){
						// 	console.log(this.color+"的"+this.name+"喜欢"+like)
						// }
					}
					like(){
						console.log(this.color+"的"+this.name+"喜欢"+like)
					}
				}
				
				var c1 = new Cat("波斯猫","白色","毛球");
				console.log(c1)
				// 总结：批量创建的方式主要是两种
				// 1：es6 class的方式。
				// 2：构造函数方式（函数原型）。
				// 工厂模式不常用。file:///F:/workspace/2020-9/9.4/类与实例/类与实例/原型.html
		</script>
	</body>
</html>