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

来源：互联网发布：手机直播全套源码编辑：程序博客网时间：2024/05/16 19:56

<!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>

阅读全文

0 0