JavaScript从入门到放弃（3）-对象的不同创建方法-实现真正的面向对象-CSDN博客

本文链接：https://blog.csdn.net/shb2058/article/details/78520585

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Test_Object</title>
		<script type="text/javascript" src="jquery-3.2.1.js"></script>
	</head>

	<body>
		<input type="button" id="button" value="老的方式创建对象" />
		<!--创建对象除了使用var User={
			name:name,
			age:age,
			getMessage:function getMessage(){}
		}外，还可以使用如下方法:
		这个类似与java中对象的构造器，通过构造器返回一个对象出来
		-->
		<script type="text/javascript">
			$(document).ready(function() {

				$("#button").click(function() {
					function User(name, age) {
						this.name = name;
						this.age = age;
						this.getMessage = function getMessage() {
							return "这个用户的信息:name" + this.name + "age:" + this.age;
						}
					}
					//新建一个对象
					var xiaoMing = new User("小明", 18);
					alert(xiaoMing.getMessage());
				});
			});
		</script>
		<br />
		<input type="button" value="创建对象的es6新方法" id="button1" />
		<!--使用关键字class，内部的constructor方法是对象的构造器-->
		<script type="text/javascript">
			$(document).ready(function() {
				$("#button1").click(function() {
					class User {
						constructor(name, age) {
							this.name = name;
							this.age = age;
						}
						getMessage() {
					
							return "这个用户的信息:name" + this.name + "age:" + this.age;
						}
					}
					//实例出来一个对象
					var xiaoMing = new User("小明", "20");
					alert(xiaoMing.getMessage());
				});
			});
		</script>
		<br />
		<input type="button" id="button2" value="class关键字实现继承" />
		<script type="text/javascript">
			$(document).ready(function() {
				$("#button2").click(function() {
					class User {
						constructor(name, age) {
							this.name = name;
							this.age = age;
						}
						getMessage() {
									console.log("父类的方法");
							return "这个用户的信息:name" + this.name + "age:" + this.age;
						}
					}

					class SmartUser extends User {
						constructor(name, age, sex) {
							super(name, age);
							this.sex = sex;
						}
				
					}

					var smart = new SmartUser("超级赛亚人", 118, "man");
					alert(smart.getMessage());//和父类一样，只返回name和age
				});
			});
		</script>
	</body>

</html>