JavaScript创建对象的方式

目录

一.直接创建式

二.初始化式

三.构造方法式

四.原型式

五.混合式


一.直接创建式

第一种创建对象的方式就是,先直接创建一个Object对象student,然后直接调用这个对象,为你想要在这个对象中添加的属性或函数赋值,代码示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var student=new Object();
			student.name="Tom";
			student.doHomework=function(){
				console.log("正在写作业");
			}
			student.doHomework();
		</script>
	</body>
</html>

二.初始化式

第二种创建对象的方式是初始化式,它的操作原理是在声明student变量时直接在花括号中添加属性或函数,注意:为属性和函数赋值时一定要用冒号,且相邻两个赋值之间用逗号间隔。以下是代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var student={
				name:"Jim",
				doHomework:function(){
					console.log(this.name+"正在写作业");
				}
			}
			student.doHomework();
		</script>
	</body>
</html>

三.构造方法式

初始化式赋值非常方便,但它每次只能创建一个独立的对象,所以这时我们可以使用构造方法式,就是创建一个Student对象构造方法,这样在后面便可以使用该构造方法创建对象并为其中的属性赋值,以下是代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function Student(name){
				this.name=name;
				this.doHomework=function(){
					console.log(this.name+"正在写作业");
				}
			}
			var student=new Student("Kate");
			student.doHomework();
		</script>
	</body>
</html>

四.原型式

第四种创建对象的方式就是原型式,就是先创建用function创建一个没有方法体的构造方法原型,创建对象自然是使用new加构造方法创建对象,但是该构造方法中的属性和函数都是通过调用prototype加要添加的属性或方法添加的,代码示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function Student(){
			}
			Student.prototype.name="Kitty";
			Student.prototype.doHomework=function(){
				console.log(this.name+"正在写作业");
			}
			var student=new Student();
			student.doHomework();
		</script>
	</body>
</html>

五.混合式

最后一种创建对象的方式,也是最常用的一种,混合式,就是将第三种构造方法式和第四种原型式结合起来使用,使用构造方法式时创建的构造方法中只含有部分属性或函数,然后在后续可以使用原型式再为该构造方法添加属性或函数,以下是代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function Student(name){
				this.name=name;
			}
			Student.prototype.doHomework=function(){
				console.log(this.name+"正在写作业");
			}
			var student=new Student("Timmy");
			student.doHomework();
		</script>
	</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值