【零基础学JS - 18 】JavaScript中的对象之属性、方法和this_javascript 创建类的 this[index]属性-CSDN博客

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

在这里插入图片描述

JavaScript 对象

JavaScript对象是一种非基本数据类型，允许你存储多个数据集合。

注意：如果你熟悉其他编程语言，JavaScript对象有些不同。你不需要创建类来创建对象。

以下是JavaScript对象的一个示例。

// 对象
const student = {
    firstName: '半夏',
    age: 10
};

在这里，student是一个对象，可以存储字符串和数字等值。

JavaScript对象声明

声明对象的语法如下：

const object_name = {
   key1: value1,
   key2: value2
}

在这里，定义了一个名为object_name的对象。对象的每个成员都是由逗号分隔并用大括号{}括起来的键：值对。

例如，

// 创建对象
const person = { 
    name: 'John',
    age: 20
};
console.log(typeof person); // object

你还可以在一行中定义一个对象。

const person = { name: 'John', age: 20 };

在上面的示例中，name和age是键，John和20分别是值。

JavaScript对象属性

在JavaScript中，“键：值”对被称为属性。例如，

let person = { 
    name: 'John',
    age: 20
};

在这里，name: 'John’和age: 20是属性。

JavaScript对象属性的示例

Example of JavaScript object properties

访问对象属性你可以通过使用其键来访问属性的值。

使用点符号表示法

以下是使用点符号的语法。

objectName.key

例如，

const person = { 
    name: 'John', 
    age: 20, 
};

// 访问属性
console.log(person.name); // John

使用方括号表示法

以下是使用方括号的语法。

objectName["propertyName"]

例如，

const person = { 
    name: 'John', 
    age: 20, 
};

// 访问属性
console.log(person["name"]); // John

JavaScript嵌套对象

一个对象也可以包含另一个对象。例如，

// 嵌套对象
const student = { 
    name: 'John', 
    age: 20,
    marks: {
        science: 70,
        math: 75
    }
}

// 访问student对象的属性
console.log(student.marks); // {science: 70, math: 75}

// 访问marks对象的属性
console.log(student.marks.science); // 70

在上面的示例中，对象student包含了marks属性中的一个对象值。

JavaScript对象方法

在 JavaScript 中，对象也可以包含函数。例如，

// 包含方法的对象
const person = {
    name: 'John',
    greet: function() { console.log('hello'); }
};

在上面的示例中，person 对象有两个键（name 和 greet），分别具有字符串值和函数值。

因此，JavaScript 方法是具有函数值的对象属性。

访问对象方法

你可以使用点表示法访问对象方法。语法如下：

objectName.methodKey()

通过调用 objectName 和键来访问属性。通过调用 objectName 和该方法的键以及 () 来访问方法。例如，

// 访问方法和属性
const person = {
    name: 'John',
    greet: function() { console.log('hello'); }
};

// 访问属性
person.name; // John

// 访问方法
person.greet(); // hello

在这里，greet 方法是通过 person.greet() 来访问，而不是 person.greet。

如果你尝试仅使用 person.greet 访问方法，它将给出一个函数定义。

person.greet; // ƒ () { console.log('hello'); }

JavaScript 内置方法

在 JavaScript 中，有许多内置方法。例如，

let number = '23.32';
let result = parseInt(number);

console.log(result); // 23

在这里，使用 Number 对象的 parseInt() 方法将数值字符串转换为整数值。

向 JavaScript 对象添加方法

你也可以在对象中添加方法。例如，

// 创建一个对象
let student = { };

// 添加一个属性
student.name = 'John';

// 添加一个方法
student.greet = function() {
    console.log('hello');
}

// 访问一个方法
student.greet(); // hello

在上面的示例中，创建了一个空的 student 对象。然后，添加了 name 属性。类似地，也添加了 greet 方法。通过这种方式，你可以向对象添加方法和属性。

JavaScript this 关键字

要从对象的方法中访问对象的属性，你需要使用 this 关键字。让我们考虑一个示例。

const person = {
    name: 'John',
    age: 30,

    // 通过使用 this.name 访问 name 属性
    greet: function() { console.log('The name is' + ' ' + this.name); }
};

person.greet();

输出：

The name is John

在上面的示例中，创建了一个 person 对象。它包含属性（name 和 age）和一个 greet 方法。

在 greet 方法中，使用 this 关键字访问对象的属性。

为了访问对象的属性，使用 this 关键字，后面跟着 . 和键。

注意：在 JavaScript 中，当与对象的方法一起使用时，this 关键字指的是该对象。this 绑定到一个对象。

然而，对象内部的函数可以以类似于普通函数的方式访问其变量。例如，

const person = {
    name: 'John',
    age: 30,
    greet: function() {
        let surname = 'Doe';
        console.log('The name is' + ' ' + this.name + ' ' + surname); }
};

person.greet();