JavaScript连连看第三篇—对象的基础认知_12、直接定义对象的属性和方法需要使用实现。-CSDN博客

本文链接：https://blog.csdn.net/m0_74304535/article/details/132922185

一，对象

在编程语言中，对象可以看做一种数据类型，他将多种数据类型集中在一个数据单元中，并且允许通过对象来存取这些数据的值。对象是属性和方法的集合，在JavaScript中可以使用3种对象：自定义对象、内置对象和浏览器对象。后两种又可称为预定义对象。

1、对象的属性及方法

对象有两个主要元素：属性和方法。我们可以通过访问或者设置对象的属性，并且调用对象的方法来实现我们所需要的功能。

①属性

定义：包含在对象内部的变量称为对象的属性，他是用来描述对象特性的一组数据。
语法格式：

对象名.属性名

例如：

用户.用户名 = "lyxy";
用户.用户密码 = "12345";
var name = 用户.用户名
var pwd = 用户.用户密码

可以实现设置对象“用户”的属性值及获取该值。

②方法

定义：方法是指包含在对象内部的函数，他可以实现某个功能。
语法格式：

对象名.方法名(参数)

他与函数类似，可以有0个或者多个参数。下，下面仍以对象“用户”为例，实现调用对象的两个方法。

用户.注册();
用户.登录();

2、自定义对象的创建

想要创建自定义对象有三种方式，分别为：直接创建、通过自定义构造函数创建对象、通过object创建对象。下面一一介绍：

①直接创建自定义对象

语法格式为：

var 对象名 = {属性名:属性值1,属性名:属性值2}

直接创建对象时，所有属性都放在大括号中，属性直接用，隔开。例如

var Student = {
    name:"lyxy",
    age:"18"
}

我们创建了自定义对象Student，并且给它设置了两个属性name和age。
调用时可以使用

document.write(Student.name+<br>+Student.age);
document.write(Student['name']+<br>+Student['age']);

输出name的属性值,第一种是直接调用输出，第二种是使用数组方式对属性进行输出。

②通过自定义构造函数创建对象

使用自定义构造函数可以实现创建多个相同对象，在调用对象时必须使用new关键字实例一个对象。
例如：

function Student(name,age){
	this.name = name;
	this.age = age;
}

实例化：

var stu1 = new Student('lyxy',18);

若在定义构造函数时想要使用方法，则可以这样写：

function Student(name,age){
	this.name = name;
	this.age = age;
	//可以放在里面
	this.show = function(){
		document.write(name+"<br>"+age)
	}

	//也可以放在外面
	function show(){
		document.write(name+"<br>"+age)
	}
}
	//但放在里面或者放在外面只能用一个。
	var stu1 = new Student('lyxy',18);
	stu1.show();

如果在构造函数中定义了多个属性和方法，则每次创造对象实例都会为该对象分配相同的属性和方法，不可避免导致对内存的需求增大，那么如何解决这个问题呢？
我们可以通过prototype属性来解决这个问题。语法如下：

object.prototype.name = value;

说明：

object：构造函数名称
name：要添加的属性名或者方法名
value：添加属性的值或者执行方法的函数。
例如上述的student对象:

function Student(name,age){
	this.name = name;
	this.age = age;
}
Student.prototype.show = function(){
	alert(this.name+"\n"+this.age);
}
var stu1 = new Student("lyxy",18)

③通过object对象创建自定义对象

object是JavaScript中的内置对象，它提供了对象的最基本功能，是其他常见自定义对象的基础。在使用这种方式时不需要在定义构造函数。即可以在程序运行是为对象随意添加属性。语法如下

obj = new Object([value])

其中：obj为必选项，是赋值给Object对象的变量名。value是可选项，任一种基本数据类型。
仍以Student对象做例子：

var Student = new Object();
Student.name = "lyxy";
Student.age = 18;
Student.show = function(){
	alert(Student.name+"\n"+Student.age)
}
Student。show();

3、对象访问语句

① for…in语句

它与java、Python中的foreach几乎一样，用来遍历对象的每一个属性并每次都将属性名作为字符串保存在变量中。语法如下：

for(变量 in 对象){
	语句
}

例如直接创建对象并遍历他：

var object = {name:"lyxy",age:18}
for(var e in object){
    document.write("属性："+e+"="+object[e]+"<br>");
}
//e为变量（属性名），object[e]可以遍历输出变量值

结果为：在这里插入图片描述

②with语句

with语句用于在访问一个对象的属性或者方法时，避免重复引用指定对象名。可以简化对象属性调用的层次。语法格式为：

with(对象名称){
	语句
}

**说明：**在一段连续的JS代码中如果需要多次使用某个对象的属性或者方法，只需要在with后面的()中写出对象名称，在之后的语句中就可以不加对象名称. 了。例如：

function Student(name,age){
	this.name = name;
	this.age = age;
}
var stu = new Student("lyxy",18);
with(stu){
	document.write(name+age);
	document.write(name+age);
}

4、常用内部对象

①，Math对象

Math对象提供大量的数字常量和数学函数。在使用该对象时不需要使用new关键字来实例化对象。

Math对象的属性：

属性	描述	属性	描述
E	欧拉常量 (2.7128…)	LOG2E	以2为底e的对数
LN2	2的自然对数	LOG10E	以10为底e的对数
LN10	10的自然对数	PI	圆周率
SQRT2	2的平方根	SQRT1_2	0.5的平方根

Math对象的方法：

使用方法：

var lager = Math.max(value1,value2);
var rs = Math.pow(value1,10);

下面讲一个实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>例子</title>
    <script type="text/javascript">
        function ran(digit) {
            var res = "";
            for(i=0;i<digit;i++)
                res += (Math.floor(Math.random()*10));
            alert(res);
        }
    </script>
</head>
<body>
    <form action="">
        请输入随机数的位数：<p>
        <input type="text" name="digit">
        <input type="button" value="生成" onclick="ran(form.digit.value)">
    </form>
</body>

结果：
在这里插入图片描述

②，Date对象

使用Date对象可以实现对日期和时间的控制。

创建Date对象：

dataObj = new Data();
dataObj = new Date(dateVal);
dataObj = new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]);

说明：

参数	说明
dataObj	必选项，要赋值为Date对象的变量名
dataVal	必选项，如果为数字值，dataVal表示指定时间域1970年1月1日午夜全球标准时间的毫秒数。若为字符串，常用格式为“ 月日，年小时：分钟：秒”，其中月份用英文表示，其余用数字表示，时间可以省略；另外可用“年/月/日小时：分钟：秒”的格式。
year	必选项，完整的年份，例如：1976
month	必选项，表示月份从0到11之间的整数。
data	必选项，表示日期从1到31之间的整数。
hours	可选项，若提供minutes则必须给出小时数，从0到23之间整数。
minutes	可选项，若提供seconds则必须给出分钟数，从0到59之间整数。
seconds	可选项，若提供ms则必须给出秒钟数，从0到59之间整数。
ms	可选项，表示毫秒，从0到999的整数。

下面的代码演示了一些创建日期对象的方法：

<script type="text/javascript">
    var Date1 = new Date();
    document.write(Date1);
    document.write("<br>");
    var Date2 = new Date(2023,1,1);
    document.write(Date2);
    document.write("<br>");
    var Date3 = new Date(2023,1,1,12,13,1);
    document.write(Date3);
    document.write("<br>");
    var Date4 = new Date("Jun 20,2023 11:12:01");
    document.write(Date4);
    document.write("<br>");
    var Date5 = new Date("2023/1/3 12:13:01");
    document.write(Date5);
</script>