小白教程
所有教程
关于
Search
172.70.131.154
172.70.131.154
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JavaScript 对象”的源代码
本页内容
上一节:
JavaScript_HTML_DOM_节点列表
下一节:
JavaScript_prototype
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:JavaScript 对象}}[[Category:Javascript 教程|11]] = JavaScript 对象 = JavaScript 对象是拥有属性和方法的数据。 == 真实生活中的对象,属性和方法 == 真实生活中,一辆汽车是一个对象。 对象有它的属性,如重量和颜色等,方法有启动停止等: <blockquote>在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。</blockquote> 你已经学习了 JavaScript 变量的赋值。 以下代码为变量 '''car''' 设置值为 "Fiat" : <sample title="" desc="" lang="html" hererun="1"> var car = "Fiat"; </sample> 对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 name:value 对呈现。 <sample title="" desc="" lang="html" hererun="1"> var car = {name:"Fiat", model:500, color:"white"}; </sample> 在以上实例中,3 个值 ("Fiat", 500, "white") 赋予变量 car。 <blockquote>JavaScript 对象是变量的容器。</blockquote> == 对象定义 == 你可以使用字符来定义和创建 JavaScript 对象: <sample title="" desc="" lang="html" hererun="1"> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> 定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的: <sample title="" desc="" lang="html" hererun="1"> var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> == 对象属性 == 可以说 "JavaScript 对象是变量的容器"。 但是,我们通常认为 "JavaScript 对象是键值对的容器"。 键值对通常写法为 '''name : value''' (键与值以冒号分割)。 键值对在 JavaScript 对象通常称为 '''对象属性'''。 <blockquote>JavaScript 对象是属性变量的容器。</blockquote> 对象键值对的写法类似于: * PHP 中的关联数组 * Python 中的字典 * C 语言中的哈希表 * Java 中的哈希映射 * Ruby 和 Perl 中的哈希表 == 访问对象属性 == 你可以通过两种方式访问对象属性: == 实例 1 == <sample title="" desc="" lang="html" hererun="1"> person.lastName; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> == 实例 2 == <sample title="" desc="" lang="html" hererun="1"> person["lastName"]; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> == 对象方法 == 对象的方法定义了一个函数,并作为对象的属性存储。 对象方法通过添加 () 调用 (作为一个函数)。 该实例访问了 person 对象的 fullName() 方法: <sample title="" desc="" lang="html" hererun="1"> name = person.fullName(); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> 如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回: <sample title="" desc="" lang="html" hererun="1"> name = person.fullName; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> <blockquote>JavaScript 对象是属性和方法的容器。</blockquote> 在随后的教程中你将学习到更多关于函数,属性和方法的知识。 == 访问对象方法 == 你可以使用以下语法创建对象方法: <pre> methodName : function() { // 代码 }</pre> 你可以使用以下语法访问对象方法: <sample title="" desc="" lang="html" hererun="1"> objectName.methodName() </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> 通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。 如果使用 fullName 属性,不添加 '''()''', 它会返回函数的定义: <sample title="" desc="" lang="html" hererun="1"> objectName.methodName </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> </run> 有多种方式可以创建,使用和修改 JavaScript 对象。 同样也有多种方式用来创建,使用和修改属性和方法。 <blockquote>在随后的教程中,你将学习到更多关于对象的知识。</blockquote> == 更多实例 == [[tryit.php?filename=tryjs_object_create_1|创建 JavaScript 对象 I]] [[tryit.php?filename=tryjs_object_create_2|创建 JavaScript 对象 II]] [[tryit.php?filename=tryjs_object_properties_1|访问对象属性 I]] [[tryit.php?filename=tryjs_object_properties_2|访问对象属性 II]] [[tryit.php?filename=tryjs_object_method|函数属性作为一个方法访问]] [[tryit.php?filename=tryjs_object_function|函数属性作为一个属性访问]]
返回至“
JavaScript 对象
”。
上一节:
JavaScript_HTML_DOM_节点列表
下一节:
JavaScript_prototype