Javascript对象基础——创建字面量对象、访问、设置对象成员(关键字:对象、成员、属性、方法)

创建简单对象

在JavaScript中,从数组等核心的JavaScript功能到基于JavaScript的浏览器API,大多数东西都是对象,JavaScript的基于对象的性质非常重要,您甚至可以创建自己的对象。

首先准备一个html文件,该文件中嵌入JavaScript代码,然后打开开发者工具,编写JavaScript代码,然后利用开发工具测试JavaScript代码

与JavaScript中的许多事情一样,创建对象通常始于定义和初始化变量。 尝试在文件中已有的JavaScript代码下方输入以下行,然后保存并刷新:

const person={};//注意这行代码是写在js文件中的
//在浏览器中浏览该文件的时候可以在浏览器打开开发工具测试该对象

现在打开浏览器的JavaScript控制台,在其中输入person,然后按Enter / Return键。 您应该得到类似于以下行之一的结果:

[object Object]
Object { }
{ }

恭喜,您已经创建了第一个对象。 任务完成! 但这是一个空对象,因此我们不能做太多事情。 让我们更新文件中的JavaScript对象,如下所示:

    const person = {
        name: ['Bob', 'Smith'],
        age: 32,
        gender: 'male',
        interests: ['music', 'skiing'],
        bio: function () {
            alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. he likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');

        },

        greeting: function () {
            alert('Hi! I\' ' + this.name[0] + '.');
        }

    };

保存并刷新后,请尝试在浏览器devtools的JavaScript控制台中输入以下内容:

在这里插入图片描述

那么这是怎么回事? 嗯,一个对象由多个成员组成,每个成员都有一个名称(例如,上面的name和age)和一个值(例如[‘Bob’,‘Smith’]和32)。 每个名称/值对必须用逗号分隔,并且名称和值在每种情况下都用冒号分隔。 语法始终遵循以下模式:

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

对象成员的值几乎可以是任何东西-在我们的person对象中,我们有一个字符串,一个数字,两个数组和两个函数。 前四个项目是数据项目,被称为对象的属性。 最后两项是允许对象使用该数据执行某些操作的函数,被称为对象的方法。

像这样的对象称为对象字面量

对象字面量常用于数据传送

点号访问属性和方法

点号符号既可以访问属性也可以访问方法

使用点表示法访问了对象的属性和方法。对象名(person)充当名称空间-必须首先输入它才能访问对象中封装的任何内容。接下来写一个点,然后写一个你想要访问的项-这可以是一个简单属性的名称,一个数组项属性,或者一个对象方法的调用,例如:

在这里插入图片描述

子命名空间:

    const person = {

        /*
        可以使用两种方式创建name,如果使用对象的方式创建
        则继续使用点号访问属性值(person.name.first)
        如果使用数组,则使用索引访问(person.name[0]);
         */
        name: {
            first: 'Bob',
            last: 'Smith'
        },

        // name: ['Bob', 'Smith'],

    };

在这里插入图片描述

方括号访问属性

还有另一种访问对象属性的方法-使用括号表示法

使用方括号加上属性名的方式也可以访问对象属性,方括号使用索引访问的是数组,注意这里是访问的对象,需要使用的索引不是数字,而是属性名的字符!

在这里插入图片描述
这看起来与访问数组中项目的方式非常相似,并且基本上是同一件事-您使用的是与每个成员的值相关联的名称,而不是使用索引号来选择项目。 难怪对象有时被称为关联数组-它们将字符串映射到值的方式与数组将数字映射到值的方式相同。

使用点符号与方括号符号设置对象成员

//设置属性
person.age=45;
45
//读取属性
person.age;
45
person.name.last='donghong';
"donghong"
person.name.last;
"donghong"

设置成员不仅仅停留在更新现有属性和方法的值上,还可以创建全新的成员。在JS控制台中尝试以下操作:

//添加全新的属性
person['eyes']='black';
"black"
//添加全新的方法
person.farewell=function(){alert('Bye everybody!');};
ƒ (){alert('Bye everybody!');}

方括号添加属性时可以将变量作为属性写入方括号,然后该变量就变成了属性名称

点表示法不能使用上述方法向对象添加属性,点表示法只能接受字面量的方式添加属性名称,而不能接受指向名称的变量值。

您一直都在使用对象

myString.split(',');

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

const myDiv = document.createElement('div');
const myVideo = document.querySelector('video');

您正在使用Document类实例上可用的方法。 对于每个加载的网页,都会创建一个Document实例,称为document,它表示整个页面的结构,内容和其他功能(例如URL)。 同样,这意味着它具有几种可用的常用方法和属性。(几乎所有其他您正在使用的内置对象或API(Array,Math等)也是如此。)

Note that built in objects and APIs don’t always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

对象作为存储相关数据和功能的结构非常有用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值