JavaScript对象的创建和构造函数(工厂模式创建对象,构造函数,class创建对象,原型对象)

<!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:name,
				age:age,
				school:"王者荣耀",
				like:function(){
					console.log(this.name+"喜欢"+Likename)
				}
			}
			return student;
		}
		var s1=Student("小红",16,'小明');
		console.log(s1)
		var	s2=Student("小强",17,'小花');
		console.log(s2)
		console.log("-------------")
		
		
		
		// 3/构造函数创建对象,Object浏览器自带的函数对象
		// 自定义构造函数
		// function teacher(name,age,Likename){
		// 	this.name=name;
		// 	this.age=age;
		// 	this.like=function(){
		// 		console.log(this.name+"喜欢😍"+likename)
		// 	}
		// }
		
		
		// 完整构造函数创建对象的方式
		// 1/ 创建构造函数
		// 2/ 创建原型对象
		// 3/ 设置构造函数原型对象属性prototype
		function teacher(name,age,likename){
			this.name=name;
			this.age=age;
			this.likename=likename
			// this.like=tlike;
		}
		// 原型对象
		// 将这一类都需要用到的方法进行封装,封装到一个对象上,并且将这个对象到构造函数prototype
		var teacherProto={
			like:function(){
				console.log(this.name+"喜欢😍"+this.likename)
			},
			teach:function(){
				console.log("比较喜欢")
			}
		}
		// 所有的函数对象都有一个方法prototype属性
		teacher.prototype=teacherProto
	//构造函数,new创建1个新的对象,将函数内部的this指向此对象
	var t1=	new teacher("阿宝",18,"干饭干饭")
	console.log(t1)
	//console.log(t1.name)
	//console.log(t1.age)
	//console.log(t1.like)
	var t2=new teacher("阿猪",16,"阿宝")
	console.log(t2)
	console.log("------------")
	
	//第四种方式,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)
			// }
		}
		// 在原型上了,看不见喜欢什么内容了
		likeName(){
			console.log(this.color+"的"+this.name+"喜欢"+like)
		}
	}
	var c1=new Cat("灰色","肥波","鱼")
	console.log(c1)
		</script>
	</body>
</html>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值