理解JavaScript对象：属性、方法

Zero-day Dreamer

已于 2024-05-01 21:20:33 修改

阅读量529

点赞数 10

分类专栏：前端三部曲文章标签： javascript 开发语言

于 2024-04-28 05:45:54 首次发布

本文链接：https://blog.csdn.net/h1008685/article/details/138105946

版权

前端三部曲专栏收录该内容

12 篇文章 0 订阅

订阅专栏

对象是什么

在JavaScript中，对象（Object）是一种复合的数据类型，它允许你将数据和功能（方法）组合在一起。

创建对象

var person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
greet: function() {
console.log('Hello, my name is ' + this.firstName + ' ' + this.lastName);
}
};

访问对象属性

你可以通过点符号（.）或方括号（[]）来访问对象的属性：

console.log(person.firstName); // 使用点符号

console.log(person['lastName']); // 使用方括号

修改和添加属性

你可以修改或添加新属性给已存在的对象：

person.height = 165; // 添加新属性

person.firstName = 'Jane'; // 修改现有属性

方法

对象可以拥有方法，即作为对象属性的函数：

person.greet(); // 输出: Hello, my name is Jane Doe

`this`关键字

在对象的方法内部，this关键字引用当前对象：

person.introduce = function() {
console.log('I am ' + this.firstName + ' ' + this.lastName);
};
person.introduce(); // 输出: I am Jane Doe

实例

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person = {
    Color: function() {
        console.log('yellow');
    },
    name: 'xiaoming',
    age: 18,
    xiaoming: function() {
        console.log('我的名字是' + this.name);
    }
};

// 调用 Color 函数
person.Color(); // 输出: yellow

// 调用 xiaoming 函数
person.xiaoming(); // 输出: 我的名字是xiaoming
    </script>
</body>
</html>

实例解析

Color：这是一个函数作为对象属性的示例。这个函数没有参数，并且当调用时，它会在控制台中打印字符串 'yellow'。

name：这是一个普通属性，其值为字符串 'xiaoming'，表示人名。

age：这是另一个普通属性，其值为数字 18，表示年龄。

xiaoming：这是另一个函数属性。当调用这个函数时，它会使用 console.log 打印出 this.name 的值。在JavaScript中，this 关键字的值取决于函数的调用方式。在对象的方法中调用时，this 通常指向该对象，所以 xiaoming 函数将会打印出 person 对象的 name 属性。