JavaScript程序基础（十五）自定义对象-Function创建法

看山还是山，看水还是水

于 2022-04-05 22:26:45 发布

阅读量1.4k

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 html html5

本文链接：https://blog.csdn.net/xcjyxy2021/article/details/123978889

版权

本文介绍如何使用JavaScript中的Function构造函数来创建自定义对象。详细讲解了Function创建对象的语法格式，包括定义对象模板、创建对象实例、访问属性及添加方法。并给出了创建篮球球员对象和在网页动态生成表格的综合案例，以及练习任务：创建具有跳跃和吃蘑菇能力的游戏角色‘马里奥’。

摘要由CSDN通过智能技术生成

一、Function创建自定义对象

语法格式：
function Fn(参数1,参数2,…) {
this.属性名1=参数1;
this.属性名2=参数2;
…
this.属性名n=参数n;
};

定义示例：

function User(name, pwd){
        this.name=name;
        this.pwd=pwd;
};
var user1=new User("admin","123");

说明：
User是模板名，首字母必须大写；
this后面的name等是新添加的属性；
user1是对象；
new是关键字，表示新建。
这里定义的不是一个普通函数，而是专门创建对象的模板函数。

使用方法1：对象名.属性名

document.write(user1.name);
document.write(user1.pwd);

使用方法2：对象名[属性名]

document.write(user1['name']);
document.write(user1['pwd']);

直接创建对象示例：创建一个篮球球员的对象player，通过对象实例获取对象中的属性并输出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <input type="button" id="mybtn" value="click me" />
		<script type="text/javascript">
			function Player(name,height,team){
     
                this.name=name;
                this.height=height;
                this.team=team;
            };

            var player1 = new Player("科比", 1.98, "洛杉矶湖人队");

            document.write(player1.name);
            document.write(player1.height);
            document.write(player1.team);
		</script>
	</body>
</html>

给自定义对象添加方法
语法格式：

  function Fn(参数1,参数2,...){
        this.属性名1=属性值1;
        this.属性名2=属性值2;
        ......
        this.属性名n=属性值n;
        this.方法名1=function(){
        };
        ......
        this.方法名n=function(){
        };
    };

简单示例：创建对象User