JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。


真实生活中的对象,属性和方法

真实生活中,一辆汽车是一个对象。

对象有它的属性,如重量和颜色等,方法有启动停止等:

所有汽车都拥有这些方法,但是它们被执行的时间都不尽相同。所有汽车都有这些属性,但是每款车的属性都不尽相同。


JavaScript  对象

在 JavaScript中,几乎所有的事物都是对象。

在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。    


你已经学习了 JavaScript 变量的赋值。

以下代码为变量 car 设置值为 "Fiat" :

var car = "Fiat";

对象也是一个变量,但对象可以包含多个值(多个变量)。

var car = {type:"Fiat", model:500, color:"white"};

在以上实例中,3 个值 ("Fiat", 500, "white") 赋予变量 car。

在以上实例中,3 个变量 (type, model, color) 赋予变量 car。

提示:JavaScript 对象是变量的容器。    


对象定义

你可以使用字符来定义和创建 JavaScript 对象:

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</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>

运行程序尝试一下


定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</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>

运行程序尝试一下


对象属性

可以说 "JavaScript 对象是变量的容器"。

但是,我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

提示:JavaScript 对象是属性变量的容器。    


对象键值对的写法类似于:

  • PHP 中的关联数组

  • Python 中的字典

  • C 语言中的哈希表

  • Java 中的哈希映射

  • Ruby 和 Perl 中的哈希表


访问对象属性

你可以通过两种方式访问对象属性:

方法一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    </head>
<body>
<p>
    有两种方式可以访问对象属性:
</p>
<p>
    你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
    var person = {
        firstName : "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
            person.firstName + " " + person.lastName;
</script>
</body>
</html>

运行程序尝试一下


方法二

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> PHP中文网</title>
</head>
<body>
<p>
    有两种方式可以访问对象属性:
</p>
<p>
    你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566
    };
    document.getElementById("demo").innerHTML =
            person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>

运行程序尝试一下


访问对象方法

你可以使用以下语法创建对象方法:

methodName : function() { code lines }

你可以使用以下语法访问对象方法:

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。

有多种方式可以创建,使用和修改 JavaScript 对象。

同样也有多种方式用来创建,使用和修改属性和方法。



继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</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>
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载
我又来了

我又来了

一直对对象不是很懂,但是这个写的对象我能看懂代码

4年前    添加回复 0

回复
学习ing

学习ing

又是对象,万物皆对象

4年前    添加回复 0

回复
小天

小天

原来是这样的!

4年前    添加回复 0

回复
末日的春天

末日的春天

拼接字符串

4年前    添加回复 0

回复
小天

小天

var person = { firstName : "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;

4年前 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~