零基础JavaScript入门教程(37)-揭开JS对象的面纱

点此查看 零基础JavaWeb全栈文章目录及源码下载

1. 背景

之前我们讲了,JS对象其实是现实社会中事物的镜像,它可以表达、描述、映射任何事物。

那么JS对象该怎么设计呢?

函数实际上就是做事的经验,那么函数包含:

  • 函数名:做什么事
  • 函数参数:做事的辅助信息(例如时间、地点、方式…)
  • 函数体:做事的步骤
  • 函数返回值:做事的结果

那么怎么设计JS中的对象,让它能对应现实万物。

2. 怎么设计JS的对象

我们先分析电视机,包含外壳、电路板、电源线、屏幕、遥控器等属性,还包含开机、关机、换台、搜台、播放视频、播放声音等功能。

所以说我们想描述电视机,可以通过元件+功能来说明,其实说明书也是这么处理的。

我们再来分析学生,包含姓名、性别、年龄、班级、专业、学校、学号等属性,还包括上课、学习、读书、做作业等行为。

我们再来分析大象,包含高度、重量、肤色、年龄、种群、性别等属性,还有包括吃饭、上厕所、吸水等行为。

所以说,一个对象,其实通过两个方面,就能概括了:包含什么属性+有什么行为。

那么具体到JS语言,我们设计JS的对象,也应该包含属性+行为。那么属性用什么表示,其实可以用各种数据类型的变量来表示,比如年龄用数字类型变量存储,种群用字符串表示,性别因为只有男和女则可以用布尔类型来表示。

那么行为用什么表示,行为其实就做事,所以说完全可以用函数来表示,当然对象中的函数我们称之为方法

综上所述,对象的概念里面,包含了属性和方法

3. 揭开JS对象的面纱

经过上面的分析,我们知道,对象包含属性和方法,属性可以用变量表示,方法可以用函数表示。

所以我们可以猜想一下,JS对象大概是这样设计的:

这是一个对象
{
    
    
	属性1,属性2,属性3,属性4...
	方法1,方法2,方法3,方法4...
}

我们的猜想已经很接近真相了,真正的JS对象定义如下,我们以学生对象为例:

		// 定义学生对象
        var student = {
    
    
        	//属性部分
            name: "张三",
            sex: "男",
            age: 20,
            //方法部分
            readBook: function () {
    
    
                console.log("张三读书");
            },
            doHomework: function () {
    
    
                console.log("张三做作业");
            }
        }

在上面的代码中,我们通过大括号{}定义了一个对象,该对象包含name/sex/age三个属性,还包含readBook/doHomework两个方法。

最后通过赋值运算符=将整个对象赋给了student变量,所以说student变量对应整个对象。

4. 小结

其实JS对象的设计很自然,通过对象保存属性和行为信息即可。

猜你喜欢

转载自blog.csdn.net/woshisangsang/article/details/123799789