JavaScript 对象

Posted larken

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 对象相关的知识,希望对你有一定的参考价值。

javascript 对象是拥有属性和方法的数据。
JavaScript 对象
在 JavaScript中,几乎所有的事物都是对象。
JavaScript 对象是变量的容器。
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <p>创建 JavaScript 对象。</p>
        <p id="demo"></p>
        <script>
            var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
            document.getElementById("demo").innerHTML =
                person.firstName + " 现在 " + person.age + " 岁.";
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <p>创建 JavaScript 对象。</p>
        <p id="demo"></p>
        <script>
            var person = {
                firstName : "John",
                lastName  : "Doe",
                age       : 50,
                eyeColor  : "blue"
            };
            document.getElementById("demo").innerHTML =
                person.firstName + " 现在 " + person.age + " 岁。";
        </script>
    </body>
</html>
对象键值对的写法类似于:
    php 中的关联数组
    Python 中的字典
    C 语言中的哈希表
    Java 中的哈希映射
    Ruby 和 Perl 中的哈希表
访问对象属性
    person.lastName;
    person["lastName"];
对象方法
    对象的方法定义了一个函数,并作为对象的属性存储。
    对象方法通过添加 () 调用 (作为一个函数)。
    该实例访问了 person 对象的 fullName() 方法:
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <p>创建和使用对象方法。</p>
        <p>对象方法作为一个函数定义存储在对象属性中。</p>
        <p id="demo"></p>
        <script>
            var person = {
                firstName: "John",
                lastName : "Doe",
                id : 5566,
                fullName : function() 
                {
                   return this.firstName + " " + this.lastName;
                }
            };
            document.getElementById("demo").innerHTML = person.fullName();
        </script>    
    </body>
</html>
如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
        <p>创建和使用对象方法。</p>
        <p>对象方法是一个函数定义,并作为一个属性值存储。</p>
        <p id="demo1"></p>
        <p id="demo2"></p>
        <script>
            var person = {
                firstName: "John",
                lastName : "Doe",
                id : 5566,
                fullName : function() 
                {
                   return this.firstName + " " + this.lastName;
                }
            };
            document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:"  + person.fullName;
            document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:"  +  person.fullName();
        </script>    
    </body>
</html>

 

以上是关于JavaScript 对象的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

VSCode自定义代码片段——JS中的面向对象编程

JavaScript单行代码,也就是代码片段

VSCode自定义代码片段9——JS中的面向对象编程

从 TypeScript 类型定义或 GraphQL 片段定义生成 JavaScript 空对象

30秒就能看懂的JavaScript 代码片段