JavaScript知识第五讲自定义对象

对象

1、对象的属性与方法

1）属性：对象中的变量
获取或者设置属性语法：对象名.属性名； 对象名[“属性名”]；
获得属性的值：

var name=用户.用户名; ------------- var name=用户[“用户名”];
var password=用户.密码;-----------var password=用户[“密码”];

设置属性的值：

用户.用户名=“mr”---------------用户[“用户名”]=“mr”;
用户.密码=“mrsoft”;-------------用户[“密码”]=“mrsoft”;

2）方法：对象中的函数

调用方法的语法：对象名.方法名(参数);
【说明】：在JavaScript中，对象就是属性和方法的集合，这些属性和方法也叫做对象的成员。

2、什么是构造函数
1）构造函数的函数名首字母必须大写
2）内部使用this对象，来指向将要生成的对象实例
3）使用new操作符来调用构造函数，并返回对象实例

2、JavaScript对象的种类

1）自定义对象
语法格式：var 对象名={属性名1:属性值1，属性名2:属性值2…}

		<script> 
	var User={
		name:"mr",
		password:"mrsoft"
	}
	document.write(User.name);
	document.write(User['password']);
	</script>

输出结果：
mr
mrsoft

实例01：
应用构造函数创建一个球员的对象Player，然后创建对象实例，通过对象实例获取对象的属性并输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	 	<title></title>
	</head>   
	<body>         
		<script>
			function Player(name,stature,team){
				this.name=name;
				this.stature=stature;
				this.team=team;
			}
			var player=new Player("科比","198米","洛杉矶湖人队");
           document.write("球员名称:"+player.name);
		   document.write('</br>'+"球员身高:"+player.stature);
		   document.write('</br>'+"所属球队:"+player.team);
</script>	
	</body>
</html>

在这里插入图片描述
2）内置对象
3）浏览器对象

2、定义对象的方法

方法一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	 	<title></title>
	</head>   
	<body>         
		<script>
		function User(name,pwd){
			this.name=name;
			this.pwd=pwd;
			this.showUserInfon=showUserInfon; 
		}
		function showUserInfon(){                //定义方法使用的函数
			document.write("用户名："+this.name+"<hr>");//hr：水平线    br：换行
			document.write("密码："+this.pwd+"<hr>");
		}
		var user1=new User("mr","mrsoft");       //创建对象实例
		user1.showUserInfon();                  //调用方法
</script>	
	</body>
</html>

在这里插入图片描述
方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	 	<title></title>
	</head>   
	<body>         
		<script>
		function User(name,pwd){
			this.name=name;
			this.pwd=pwd;
			this.showUserInfon=function(){
			document.write("用户名"+this.name+"<hr>");
			document.write("密码"+this.pwd+"<hr>");
			}
		}
		var user1=new User("mr","mrsoft");       //创建对象实例
		user1.showUserInfon();                  //调用方法
</script>	
	</body>
</html>

实例02：应用构造函数创建一个图书对象Book，然后创建对象实例，通过对象实例调用对象中的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	 	<title></title>
	</head>   
	<body>         
		<script>
		function Book(name,type,price){
			this.name=name;
			this.type=type;
			this.price=price;
			this.showBookInfon=function(){
			document.write("书名："+this.name+" ");
			document.write("类型："+this.type+" ");
			document.write("价格："+this.price+'<br>');
			}
		}
		
		var book=new Book("JavaScript从入门到精通","JavaScript",60+'<br>');       //创建对象实例
		var book1=new Book("HTML从入门到精通","HTML",50);
		book.showBookInfon();  
	    book1.showBookInfon();//调用方法
</script>	
	</body>
</html>

在这里插入图片描述
3、prototype属性

prototype 属性是JavaScript中所有函数都有的一个属性。该属性可以向对象中调加属性或方法。
语法格式：object.prototype.name=value

实例03：
应用构造函数创建一个圆的对象Circle，应用prototype属性向对象中添加属性和方法，实现计算圆的周长和面积的功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>计算圆的周长和面积</title>
</head>
<body>
<script type="text/javascript">
function Circle(r){
	this.r=r;//设置对象的r属性
}
Circle.prototype.pi=3.14;//添加对象的pi属性
Circle.prototype.circumference=function(){//定义计算圆周长的circumference方法
	return 2*this.pi*this.r;
}
Circle.prototype.area=function(){//定义计算圆面积的area方法
	return this.pi*this.r*this.r;
}
var c=new Circle(10);//创建一个新对象c
document.write("圆的半径为"+c.r+"<br>");//输出圆的半径
document.write("圆的周长为"+parseInt(c.circumference())+"<br>");//输出圆的周长
document.write("圆的面积为"+parseInt(c.area()));//输出圆的面积
</script>
</body>
</html>

在这里插入图片描述

通过Object对象来创建自定义对象

Object对象是JavaScript中的内部对象，它提供了对象的最基本的功能。
语法格式：obj=new Object(value);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var user=new Object();
			user.name='mr';
			user.pwd='mrsoft';
			user.showUserInfo=function(){
				document.write("用户名："+this.name+'<br>');
				document.write("密码:"+this.pwd+'<br>');
			}
			user.showUserInfo();
		</script>
	</body>
</html>

在这里插入图片描述

//创建Object对象时指定对象
			var user=new Object(10);
		document.write(user);

例子04：使用Object对象创建一个图书对象Book，通过调用对象中的方法获取图书信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var Book=new Object();
			Book.name="JavaScript入门经典";
			Book.type="JavaScript";
			Book.price=80;
			Book.show=function(){
				document.write("书名:"+this.name+'<br>');
				document.write("类型:"+this.type+'<br>')
				document.write("价格:"+this.price);
			}
			Book.show();
		</script>
	</body>
</html>

在这里插入图片描述

对象访问语句

1、for…in循环语句
for…in语句用来遍历对象的每一个属性，每次都将属性名作为字符串保存在变量里。
语法格式：for(变量 in 对象){
语句}
应用for…in语句遍历对象的属性，在输出属性值时一定要使用数组的形式(对象名[属性名]进行输出，而不能使用“对象名.属性名”

例子05：应用构造函数创建图书对象Book，然后创建对象实例，应用for…in循环语句输出对象中的所有属性和值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script> 
			function Book(name,type,price,publishing){
				this.name=name;
				this.type=type;
				this.price=price;
				this.publishing=publishing;
		}
		var book=new Book("JavaScript从入门到精通","JavaScript",60,"清华大学出版社");
		  	for(var i in book){
		  		document.write("属性名:"+i+"属性值:"+book[i]+'<br>');
		  }
		</script>
	</body>
</html>

在这里插入图片描述

2、with语句
with语句用于访问一个对象的属性和方法时避免重复引用指定对象名。

语法格式：
with（对象名）{
语句}

新白者

发布了45 篇原创文章 · 获赞 38 · 访问量 2130

私信关注

JavaScript知识第五讲自定义对象

对象

猜你喜欢