JavaScript中创建复杂数据类型（object）对象的三种方式

本文链接：https://blog.youkuaiyun.com/m0_46160024/article/details/124717076

一、使用Object构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>使用Object构造函数创建对象</title>
</head>
<body>
	<script type="text/javascript">
		/* 使用Object构造函数创建对象 */
		var andy = new Object() // 注意，此处“O”是大写的！
		console.log(typeof andy) // object，注意“o”是小写的，即object数据类型
		// 直接在控制台输出andy复杂数据类型（引用数据类型）的对象
		console.log(andy) // Object
		// 直接给andy复杂数据类型（引用数据类型）的对象添加属性并赋值
		andy.name = '安迪'
		andy.age = 55
		// 直接给andy复杂数据类型（引用数据类型）的对象添加方法
		andy.sing = function (singName) { // 等号左侧有函数名，等号右侧为匿名函数
			alert(singName)
		}
		andy.movie = function () {
			alert('无间道')
		}
		// 访问andy复杂数据类型（引用数据类型）对象的属性
		console.log(andy.name)
		console.log(andy.age)
		// 调用andy复杂数据类型（引用数据类型）对象的方法
		andy.sing('冰雨')
		andy.movie()
	</script>
</body>
</html>

二、使用直接量创建对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>使用直接量创建对象</title>
</head>
<body>
	<script type="text/javascript">
		/* 使用直接量创建对象 */
		var andy = {}
		console.log(typeof andy) // object
		// 直接在控制台输出andy对象
		console.log(andy) // {}
		// 使用直接量创建对象的同时，添加属性和方法
		var edison = {
			name: '爱迪生',
			age: 30,
			show: function () {
				console.log('name=' + this.name + ', age=' + this.age)
			}
		}
		// 直接在控制台输出edison对象
		console.log(edison) // {name: '爱迪生', age: 30, show: ƒ}
		// 访问edison对象的属性
		console.log(edison.name)
		console.log(edison.age)
		// 调用edison对象的方法
		edison.show()
		// 使用直接量一次创建多个对象
		// 即将多个使用直接量创建的（匿名）对象放在一个数组中
		var objects = [{
				name: '张三',
				age: 40,
				show: function () {
					console.log('name=' + this.name + ', age=' + this.age)
				}
			}, {
				name: '李四',
				age: 50,
				show: function () {
					console.log('name=' + this.name + ', age=' + this.age)
				}
			}, {
				name: '王五',
				age: 60,
				show: function () {
					console.log('name=' + this.name + ', age=' + this.age)
				}
		}]
		// 直接在控制台输出objects数组对象
		console.log(objects) // Array(3)
		// 访问数组中第一个对象的属性
		console.log(objects[0].name)
		console.log(objects[0].age)
		// 调用数组中第一个对象的方法
		objects[0].show()
	</script>
</body>
</html>

三、使用自定义构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>使用自定义构造函数创建对象</title>
</head>
<body>
	<script type="text/javascript">
		/* 使用自定义构造函数创建对象 */
		// 1 自定义构造函数
		function Student(name, age) {
			this.name = name
			this.age = age
			this.show = function () {
				console.log('name=' + this.name + ', age=' + this.age)
			}
		}
		// 2 使用自定义的Student构造函数来创建对象
		var student = new Student('张三', 40)
		var student02 = new Student('李四', 50)
		var student03 = new Student('王五', 60)
		console.log(typeof student) // object
		// 直接在控制台输出student对象
		console.log(student) // Student
		// 访问student对象的属性
		console.log(student.name)
		console.log(student.age)
		// 调用student对象的方法
		student.show()
	</script>
</body>
</html>