JS：对象和对象属性及对象方法

马黑黑

JS：对象和对象属性及对象方法 | 马黑黑

JavaScript的对象，与现实生活中的对象，并无多大脱节。JS对象，宽松来讲，就是对生活中某个对象的描述，比如猪：

let 猪 = {
        姓名: '阿黑',
        月龄: 8,
        体重: 250,
        体长: 1.02,
        身高: 0.75,
        性格: '憨厚老实',
        爱好: ['吃苹果','睡觉','泡温泉'],
};

猪是我们要描述的对象。上例中，猪这个对象就是一个变量，所以对象名称之前用了 let 作为声明对象（变量）之用，也可以根据需要用 var 和 const 来声明对象。JS声明或定义一个对象，和声明一个变量的方法使用了几乎相同的方式，不同的是，对象的属性集合要放置在花括号 {} 之内，且每一个属性的键与值（JS称之为键值对）用冒号隔开，冒号之前是键名（key），冒号之后是键值（value）；键名不需要引号，键值则根据数据类型决定所需的符号，如字符串类型需要引号、数字不需要、数组则按数组形式表达（例如例中的爱好属性）。两个键值对之间则用逗号隔开，分行不是必须的，分行的意义仅在于方便阅读与修改（或许也为了美观）。

对象的属性其实也就是变量，键名（key，例如体长）相当于变量名，键值（value，例如1.02）相当于变量值，所以，对象可以看作是变量的集合、变量的容器。当猪被构建成为一个JS对象，其下可以拥有理论上无限多的变量，而这些变量都是围绕着猪这一对象。JS对象存在的意义就是它所能集成的变量的集合性，我们因此可以一下子得到某一特定属性，不用担心这个属性可能是属于马的或牛的：

let weight = 猪.体重;
console.log(weight);

是的，读取对象的某一属性——JS称为访问对象属性——，方法是“对象名称.键名”，英文的说法是“object.key”或简写“obj.key”。

我们构建一个对象时，我们不一定能将所有的对象属性都罗列出来，例如我们上面构建的猪的对象，就没有性别，当客户咨询猪的性别时就没有对应的属性提供答案。追加性别属性，可以修改原始对象，也可以用追加的方法：

猪['性别'] = '菇凉';

这是将性别属性建立到了猪的对象之中，所采用的方法是数组常用到的方括号，方括号内键名需要用到引号（但通过声明变量再追加的方式除外）。这样就把对象猪的新属性即性别成功添加到了对象之上，此后，我们用 console.log(猪.性别); 咨询猪的性别时，控制台会打印出“菇凉”。

对象已有属性不一定一成不变，例如随着时间的推移，猪的体重增多了，我们要修改这一属性，修改方法除了修改原对象属性值，也可以用覆盖方式修改。覆盖修改属性值和添加新属性是一样的语法：

猪['体重'] = 280;

如此，定义对象之初的 250 的体重值就被新设定的 280 所覆盖（单位可能是kg）。

对象除了有属性，还可以有方法。猪这一对象，吃了睡睡了吃，它的一个本事就是长膘。长膘就是猪对象的一个方法（之一）：

let 猪 = {
        姓名: '阿黑',
        月龄: 8,
        体重: 250,
        体长: 1.02,
        身高: 0.75,
        性格: '憨厚老实',
        爱好: '吃苹果',
        长膘: function(食物) {
                        this.体重 += 食物 * 0.2;
                        return this.体重;
                },
};

对象方法的表达和属性的表达一脉相承，不同的是，方法的键值不再是简单的数据描述，而是一个函数。这个函数“翻译”成普通函数是酱紫（只是为了帮助理解）：

        function 长膘(食物) {
                this.体重 += 食物 * 0.2;//每吃下一公斤的食物会长0.2公斤的嘎嘎
                return this.体重;
        }

调用猪对象的方法，和调用猪对象的属性也大同小异。当我们给阿黑投食100公斤，它的体重是多少呢？

console.log(猪.长膘(100)); // --> 270

红影

调用对象属性，可以直接得到结果，这个真不错

红影

那么，这些属性的是如何设定的呢。

马黑黑

红影 发表于 2022-7-20 19:59
调用对象属性，可以直接得到结果，这个真不错

面向对象一直是各类编程语言的努力方向，JS也不例外

马黑黑

红影 发表于 2022-7-20 20:00
那么，这些属性的是如何设定的呢。

根据情况设定

红影

马黑黑 发表于 2022-7-20 20:42
面向对象一直是各类编程语言的努力方向，JS也不例外

只是，总觉得JS好难的。

红影

马黑黑 发表于 2022-7-20 20:42
根据情况设定

嗯嗯，知道了。还以为也是在语句里设定的呢。

马黑黑

红影 发表于 2022-7-20 22:49
只是，总觉得JS好难的。

入门后就会觉得不是太难，但是用的好的确又是很不容易

马黑黑

红影 发表于 2022-7-20 22:49
嗯嗯，知道了。还以为也是在语句里设定的呢。

那肯定是要用语句来表达的。你要构建一个单车的方法，例如往哪个方向骑行，就需要在对象里构建函数。

马黑黑

对象小结：

声明一个对象，与声明一个变量一样，用 let、var 和 const 关键字：

    let a = 10; // 变量
    let pig = {}; // 对象

对象有属性和方法，每一个属性由 key:value 即（键名:键值）组成键值对，键值对结束要加上逗号：

    let pig = {
        name: '阿黑',
        weight: 250,
        color: '黑色',
    }

对象的属性就是对象的变量，所以对象是围绕着对象的变量的集合。对象的方法也可以视为变量，是特殊的变量（JS行内有一句话叫函数即变量，参考箭头函数的构造），由函数构成：

    let pig = {
        name: '阿黑',
        weight: 250,
        color: '黑色',
        grow: function(food) {
            this.weight += food * 0.2;
            return this.weight;
        },
    }


(注意观察红色代码结束处）

红影

马黑黑 发表于 2022-7-20 22:56
入门后就会觉得不是太难，但是用的好的确又是很不容易

至少目前还是觉得挺难的。

红影

马黑黑 发表于 2022-7-20 22:57
那肯定是要用语句来表达的。你要构建一个单车的方法，例如往哪个方向骑行，就需要在对象里构建函数。

嗯嗯，知道了。

马黑黑

红影 发表于 2022-7-21 21:21
至少目前还是觉得挺难的。

这也正常，毕竟从来没有系统学习过

红影

马黑黑 发表于 2022-7-21 21:43
这也正常，毕竟从来没有系统学习过

只能跟在黑黑后面一点点学起

马黑黑

红影 发表于 2022-7-22 19:46
只能跟在黑黑后面一点点学起

这不系统，东一点西一点的

红影

马黑黑 发表于 2022-7-22 20:05
这不系统，东一点西一点的

也不错啊，这样学着不累

马黑黑

红影 发表于 2022-7-22 20:54
也不错啊，这样学着不累

开心就好