<!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>
JavaScript从入门到放弃(3)-对象的不同创建方法-实现真正的面向对象
最新推荐文章于 2022-11-11 09:55:47 发布