【JavaScript】对象 ② ( 对象使用 | 调用对象属性 | 调用对象方法 | 变量与属性区别 | 函数与方法区别 )

韩曙亮

发布于 2024-04-20 08:43:58

72700

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、对象使用

1、使用字面量创建对象要点

使用字面量创建对象要点 : 在上一篇博客【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号作用 ) 中 , 介绍了使用字面量创建对象 , 有如下要点 :

键值对 : 对象字面量中的属性和方法都是以 " 键值对 " 的形式存在的 , 键对应属性名称 , 值对应属性值 ;
逗号隔开 : 多个表示属性和方法的键值对之间使用逗号隔开 ;
对象方法 : 表示方法名称的键后面的冒号后面写一个 " 匿名函数 " , 如 : hello: function() { 函数体 } ;

代码示例如下 :

var person = {  
    name: "Tom",  
    age: 18,  
    hello: function() {  
        console.log(this.name + " is " + this.age + " years old");  
    }  
};

2、调用对象属性

调用对象属性 :

使用 对象名.属性名 的方式 , 调用对象属性 ;

        // 访问对象属性 - 方式一 : 对象名.属性名
        console.log(person.name);

使用 对象名['属性名'] 的方式 , 调用对象属性 ;

        // 访问对象属性 - 方式二 : 对象名['属性名']
        console.log(person['name']);

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 使用 对象字面量 初始化对象
        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                console.log(this.name + " is " + this.age + " years old");
            }
        };

        // 访问对象属性 - 方式一 : 对象名.属性名
        console.log(person.name);

        // 访问对象属性 - 方式二 : 对象名['属性名']
        console.log(person['name']);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

3、调用对象方法

调用对象方法 : 使用 对象名.方法名() 的方式 , 调用对象方法 ;

        // 调用对象方法 - 对象名.方法名()
        person.hello();

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 使用 对象字面量 初始化对象
        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                console.log(this.name + " is " + this.age + " years old");
            }
        };

        // 访问对象属性 - 方式一 : 对象名.属性名
        console.log(person.name);

        // 访问对象属性 - 方式二 : 对象名['属性名']
        console.log(person['name']);

        // 调用对象方法 - 对象名.方法名()
        person.hello();
    </script>
</head>

<body>
</body>

</html>

执行结果 :