讲给后台程序员看的前端系列教程(34)——对象_小言_互联网的博客

讲给后台程序员看的前端系列教程(34)——对象

2020-04-01 15:16 328人阅读评论(0)

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在看到"对象"这两个字的时候，很多人会立马会联想到Java中的类、对象、继承、封装、多态…打住，打住，不要继续往下想了。在这或许要抛弃一下我们的惯性思维了。JavaScript并不是完全纯粹的面向对象，或者说它和大家熟知的Java中的面向对象不完全一样。在JavaScript中所有东西，比如：字符串、数字、数组、日期、甚至函数都是对象。

对象概述

在此，我们先来对JavaScript中的对象做一个基本的了解，例如：对象的创建、访问成员对象、遍历对象的成员等等。

对象的创建

在JavaScript中，对象的定义是通过大括号{ }实现的，对象的成员以键值对的形式存放在大括号{ }中，各成员之间使用逗号分隔。

示例如下：

<script type="text/javascript">
	//定义空对象
	var object1={};
	//定义含有name属性的对象
	var object2={name:"tom"};
	//定义含有name,age,gender属性的对象
	var object3={name:"lucy",age:21,gender:"female"};
</script>

除此以外，我们可将创建对象的过程封装成函数，通过调用函数来创建对象。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
			function factory(name,age){
				var obj={};
				obj.name=name;
				obj.age=age;
				return obj;
			}
			var obj1=factory("tom",18);
			var obj2=factory("lucy",19);
			console.log(obj1.name+" "+obj1.age);
			console.log(obj2.name+" "+obj2.age);
		</script>
	</body>
</html>

我们将专门用于创建对象的factory( )函数称为工厂函数，在工厂函数内部通过大括号{ }的方式创建对象。

结果如下：

访问对象的成员

在创建对象后，通过.可以访问对象的成员。JavaScript中的对象具有动态特征，假若一个对象没有成员，那么用户可以手动赋值属性或方法来添加成员。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
			//定义空对象
			var obj={};
			//为对象添加属性
			obj.name="tom";
			//为对象添加方法
			obj.introduce=function(){
				alert("My name is "+this.name);
			}
			var name=obj.name;
			document.write("name="+name);
			obj.introduce();
		</script>
	</body>
</html>

结果如下：

另外，由于JavaScript允许在代码执行时动态的给对象增加成员，因此可将用户输入的内容添加到对象的成员中。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
	</head>
	<body>
		<input id="k" type="text" value="name">
		<input id="v" type="text" value="tom">
		<input id="btn" type="button" value="Click Me">
		<script type="text/javascript">
			var k = document.getElementById('k');
			var v = document.getElementById('v');
			var btn = document.getElementById('btn');
			var obj = {};
			btn.onclick = function() {
				obj[k.value] = v.value;
				// 输出结果：tom
				console.log(obj.name); 
			};
		</script>
	</body>
</html>

遍历对象的成员

for…in语法不仅可以遍历数组元素，还可遍历对象的成员。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
			var obj={name:"lucy",age:21,gender:"female"};
			for(var k in obj){
				console.log(k+":"+obj[k]);
			}
		</script>
	</body>
</html>

结果如下：

判断对象成员是否存在

可使用in运算符判断一个对象中的某个成员是否存在。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
	</head>
	<body>
		<script type="text/javascript">
			var obj={name:"lucy",age:21,gender:"female"};
			console.log("name" in obj);
			console.log("age" in obj);
			console.log("gender" in obj);
			console.log("city" in obj);
		</script>
	</body>
</html>

结果如下：

构造函数

我们之前虽然可以通过大括号{ }创建对象，但是无法区分对象的类型。为了明确区分对象的类型，我们可以使用构造函数创建对象。

JavaScript内置构造函数

JavaScript提供了 Object、String、Number等构造函数，我们可通过new 构造函数名( )的方式创建对象。习惯上将使用new关键字创建对象的过程称为实例化，实例化后得到的对象称为构造函数的实例。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>内置构造函数</title>
	</head>
	<body>
		<script type="text/javascript">
			var obj=new Object();
			var str=new String("hello");
			//查看对象由哪个构造函数生成
			console.log(obj.constructor);
			console.log(str.constructor);
		</script>
	</body>
</html>

结果如下：

自定义构造函数

除了直接使用JavaScript内置构造函数，我们也可以根据自身需要自定义构造函数，在定义时应请注意以下事项。

构造函数的命名推荐采用帕斯卡命名规则，即所有的单词首字母大写。
请勿使用JavaScript保留字或者关键词为构造函数命名。
在构造函数内部，使用this来表示刚刚创建的对象。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义构造函数</title>
	</head>
	<body>
		<script type="text/javascript">
			//构造函数
			function Student(name,age){
				this.name=name;
				this.age=age;
				this.sayHello=function (){
					console.log("hi,My name is "+this.name+",I am "+this.age);
				};
			}
			//创建对象
			var stu1=new Student("tom",20);
			var stu2=new Student("jak",21);
			console.log(stu1);
			console.log(stu2);
			stu1.sayHello();
			stu2.sayHello();
			console.log(stu1.constructor);
			console.log(stu2.constructor);
		</script>
	</body>
</html>

结果如下：

在该示例中，我们自定义构造函数并使用构造函数创建对象。

在构造函数中，使用var关键字定义的变量称为私有成员。在后续的操作中，无法通过对象.成员的方式对私有成员进行访问，但是可通过对象的成员方法访问对象的私有对象。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义构造函数</title>
	</head>
	<body>
		<script type="text/javascript">
			//构造函数
			function Student(name,age){
				var country="China";
				this.name=name;
				this.age=age;
				this.sayHello=function (){
					console.log("hi,My name is "+this.name+",I am "+this.age);
				};
				this.getCountry=function(){
					return country;
				}
			}
			//创建对象
			var stu=new Student("tom",20);
			console.log(stu.name);
			console.log(stu.age);
			console.log(stu.getCountry());
			//error code
			console.log(stu.country);
		</script>
	</body>
</html>

结果如下：

在该示例中：country是私有成员无法通过对象.成员的方式对其进行访问。所以，在构造函数中暴露了getCountry( )方法供外界访问country。

ES6增加了class关键字用来定义一个类。但是从本质上来讲，class不过是是语法糖罢了，并非JavaScript的原生精髓。

内置对象

JavaScript提供了很多常用的内置对象，包括与字符串相关的String对象、与数值相关的Number对象、与数学相关的Math对象、与日期相关的Date对象，以及与数组相关的Array对象等。在之前的博客中我们已近介绍了关于Array对象的使用，接下来将对其它几个常用内置对象进行详细讲解。

Date

Date常用方法如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>Date</title>
	</head>
	<body>
		<script type="text/javascript">
			var date = new Date();
			document.write("Date()=" + Date() + "<br>");
			document.write("getFullYear()=" + date.getFullYear() + "<br>");
			document.write("getMonth()=" + date.getMonth() + "<br>");
			document.write("getDate()=" + date.getDate() + "<br>");
			document.write("getHours()=" + date.getHours() + "<br>");
			document.write("getMinutes()=" + date.getMinutes() + "<br>");
			document.write("getSeconds()=" + date.getSeconds() + "<br>");
		</script>
	</body>
</html>

结果如下：

Math

Math常用属性如下：

Math常用方法如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>Math</title>
	</head>
	<body>
		<script type="text/javascript">
			var num1 = 3.14;
			var num2 = 9.527;
			var num3 = Math.max(88, 99);
			var num4 = Math.random();
			var num5 = Math.pow(3, 4);
			var num6 = Math.round(65.23);
			document.write("Math.ceil(" + num1 + ")=" + Math.ceil(num1) + "<br>");
			document.write("Math.floor(" + num2 + ")=" + Math.floor(num2) + "<br>");
			document.write("Math.max(88,99)=" + Math.floor(num3) + "<br>");
			document.write("Math.random()=" + num4 + "<br>");
			document.write("Math.round(62.73)=" + num6 + "<br>");
		</script>
	</body>
</html>

结果如下：

String

String常用属性如下：

String常用方法如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<meta charset="utf-8">
		<title>String</title>
	</head>
	<body>
		<script type="text/javascript">
			//var words="abcdefg";
			var words = new String("abcdefg");
			var index = words.indexOf("b");
			document.writeln("index=" + index + "<br>");
			var subString = words.substring(2, 4);
			document.writeln("subString=" + subString + "<br>");
			var upperString = words.toUpperCase(words);
			document.writeln("upperString=" + upperString + "<br>");
		</script>
	</body>
</html>

结果如下：

转载：https://blog.csdn.net/lfdfhl/article/details/100711400

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章