“JavaScript 对象”的版本间差异

本页内容
(创建页面,内容为“{{DISPLAYTITLE:JavaScript 对象}}11 = JavaScript 对象 = JavaScript 对象是拥有属性和方法的数据。 == 真实生活中的对象,属性和方法 == 真实生活中,一辆汽车是一个对象。 对象有它的属性,如重量和颜色等,方法有启动停止等: <blockquote>在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。</blockquote> 你已经学习…”)
 
Neo讨论 | 贡献
无编辑摘要
 
第1行: 第1行:
{{DISPLAYTITLE:JavaScript 对象}}[[Category:Javascript 教程|11]]
{{DISPLAYTITLE:JavaScript 对象}}[[Category:Javascript 教程|57]]
= JavaScript 对象 =
= JavaScript 对象 =


JavaScript 对象是拥有属性和方法的数据。
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...


== 真实生活中的对象,属性和方法 ==
此外,JavaScript 允许自定义对象。


真实生活中,一辆汽车是一个对象。
== 所有事物都是对象 ==


对象有它的属性,如重量和颜色等,方法有启动停止等:
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。


<blockquote>在 JavaScript 中,对象是非常重要的,当你理解了对象,就可以了解 JavaScript 。</blockquote>
* 布尔型可以是一个对象。
你已经学习了 JavaScript 变量的赋值。
* 数字型可以是一个对象。
* 字符串也可以是一个对象
* 日期是一个对象
* 数学和正则表达式也是对象
* 数组是一个对象
* 甚至函数也可以是对象


以下代码为变量 '''car''' 设置值为 &quot;Fiat&quot; :
== JavaScript 对象 ==


<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 个值 (&quot;Fiat&quot;, 500, &quot;white&quot;) 赋予变量 car。


<blockquote>JavaScript 对象是变量的容器。</blockquote>
属性是与对象相关的值。
== 对象定义 ==


你可以使用字符来定义和创建 JavaScript 对象:
访问对象属性的语法是:


<sample title="" desc="" lang="html" hererun="1">
<pre>objectName.propertyName</pre>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
这个例子使用了 String 对象的 length 属性来获得字符串的长度:


</sample>
<pre>var message=&quot;Hello World!&quot;;
<run name=""> <!DOCTYPE html>
var x=message.length;</pre>
<html>
在以上代码执行后,x 的值将是:
<head>
<meta charset="utf-8">
<title>小白教程(xiaobai.wang)</title>
</head>
<body>


<p>创建 JavaScript 对象。</p>
<pre>12</pre>
<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",
<pre>objectName.methodName()</pre>
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:


    lastName:"Doe",
<pre>var message=&quot;Hello world!&quot;;
var x=message.toUpperCase();</pre>
在以上代码执行后,x 的值将是:


    age:50,
<pre>HELLO WORLD!</pre>


    eyeColor:"blue"
== 创建 JavaScript 对象 ==


};
通过 JavaScript,您能够定义并创建自己的对象。
</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>
* 使用 Object 定义并创建对象的实例。
</html> </run>
* 使用函数来定义对象,然后创建新的对象实例。
== 对象属性 ==


可以说 &quot;JavaScript 对象是变量的容器&quot;。
=== 使用 Object ===


但是,我们通常认为 &quot;JavaScript 对象是键值对的容器&quot;。
JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。


键值对通常写法为 '''name : value''' (键与值以冒号分割)。
Object 构造函数创建一个对象包装器。


键值对在 JavaScript 对象通常称为 '''对象属性'''。
Object 构造函数,会根据给定的参数创建对象,具体有以下情况:


<blockquote>JavaScript 对象是属性变量的容器。</blockquote>
* 如果给定值是 null 或 undefined,将会创建并返回一个空对象。
对象键值对的写法类似于:
* 如果传进去的是一个基本类型的值,则会构造其包装类型的对象。
* 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。
* 当以非构造函数形式被调用时,Object 的行为等同于 new Object()。


* PHP 中的关联数组
语法格式:
* Python 中的字典
* C 语言中的哈希表
* Java 中的哈希映射
* Ruby 和 Perl 中的哈希表


== 访问对象属性 ==
<pre>
// 以构造函数形式来调用
new Object([value])</pre>
value 可以是任何值。


你可以通过两种方式访问对象属性:
以下实例使用 Object 生成布尔对象:


== 实例 1 ==
<pre>// 等价于 o = new Boolean(true);
var o = new Object(true);</pre>
这个例子创建了对象的一个新实例,并向其添加了四个属性:


<sample title="" desc="" lang="html" hererun="1">
<sample title="" desc="" lang="html" hererun="1">
person.lastName; </sample>
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
</sample>
<run name=""> <!DOCTYPE html>
<run name=""> <!DOCTYPE html>
<html>
<html>
第125行: 第101行:
<body>
<body>


<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
<script>
var person = {
var person=new Object();
    firstName : "John",
person.firstname="John";
    lastName : "Doe",
person.lastname="Doe";
    id : 5566
person.age=50;
};
person.eyecolor="blue";
document.getElementById("demo").innerHTML =
document.write(person.firstname + " is " + person.age + " years old.");
    person.firstName + " " + person.lastName;
</script>
</script>


</body>
</body>
</html> </run>
</html> </run>
也可以使用对象字面量来创建对象,语法格式如下:


== 实例 2 ==
<pre>{ name1 : value1, name2 : value2,...nameN : valueN }</pre>
其实就是大括号里面创建 '''name:valu'''e 对,然后 '''name:value''' 对之间以逗号 , 隔开。


<sample title="" desc="" lang="html" hererun="1">
<sample title="" desc="" lang="html" hererun="1">
person["lastName"];
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
  </sample>
  </sample>
<run name=""> <!DOCTYPE html>
<run name=""> <!DOCTYPE html>
第158行: 第128行:
<body>
<body>


<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
<script>
var person = {
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
    firstName: "John",
document.write(person.firstname + " is " + person.age + " years old.");
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
    person["firstName"] + " " + person["lastName"];
</script>
</script>


</body>
</body>
</html> </run>
</html> </run>
== 对象方法 ==
JavaScript 对象就是一个 '''name:value''' 集合。


对象的方法定义了一个函数,并作为对象的属性存储。
== 使用对象构造器 ==


对象方法通过添加 () 调用 (作为一个函数)。
本例使用函数来构造对象:
 
该实例访问了 person 对象的 fullName() 方法:


<sample title="" desc="" lang="html" hererun="1">
<sample title="" desc="" lang="html" hererun="1">
name = person.fullName(); </sample>
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}
</sample>
<run name=""> <!DOCTYPE html>
<run name=""> <!DOCTYPE html>
<html>
<html>
第195行: 第158行:
<body>
<body>


<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
<script>
var person = {
function person(firstname,lastname,age,eyecolor){
    firstName: "John",
     this.firstname=firstname;
    lastName : "Doe",
     this.lastname=lastname;
     id : 5566,
     this.age=age;
     fullName : function()
    this.eyecolor=eyecolor;
     {
}
      return this.firstName + " " + this.lastName;
myFather=new person("John","Doe",50,"blue");
    }
document.write(myFather.firstname + " is " + myFather.age + " years old.");
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</script>


</body>
</body>
</html> </run>
</html> </run>
如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
 
== 创建 JavaScript 对象实例 ==
 
一旦您有了对象构造器,就可以创建新的对象实例,就像这样:
 
<pre>var myFather=new person(&quot;John&quot;,&quot;Doe&quot;,50,&quot;blue&quot;);
var myMother=new person(&quot;Sally&quot;,&quot;Rally&quot;,48,&quot;green&quot;);</pre>
 
== 把属性添加到 JavaScript 对象 ==
 
您可以通过为对象赋值,向已有对象添加新属性:
 
假设 person 对象已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:
 
<pre>person.firstname=&quot;John&quot;;
person.lastname=&quot;Doe&quot;;
person.age=30;
person.eyecolor=&quot;blue&quot;;
 
x=person.firstname;</pre>
在以上代码执行后,x 的值将是:
 
<pre>John</pre>
 
== 把方法添加到 JavaScript 对象 ==
 
方法只不过是附加在对象上的函数。
 
在构造器函数内部定义对象的方法:
 
<pre>
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
 
    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}
</pre>
changeName() 函数 name 的值赋给 person 的 lastname 属性。
 
== 现在您可以试一下: ==


<sample title="" desc="" lang="html" hererun="1">
<sample title="" desc="" lang="html" hererun="1">
name = person.fullName; </sample>
 
myMother.changeName("Doe"); </sample>
<run name=""> <!DOCTYPE html>
<run name=""> <!DOCTYPE html>
<html>
<html>
第224行: 第231行:
</head>
</head>
<body>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
<script>
var person = {
function person(firstname,lastname,age,eyecolor){
     firstName: "John",
    this.firstname=firstname;
     lastName : "Doe",
    this.lastname=lastname;
     id : 5566,
     this.age=age;
     fullName : function()
     this.eyecolor=eyecolor;
    {
     this.changeName=changeName;
      return this.firstName + " " + this.lastName;
     function changeName(name){
        this.lastname=name;
     }
     }
};
}
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:" + person.fullName;
myMother=new person("Sally","Rally",48,"green");
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:"  +  person.fullName();
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>
</script>


</body>
</body>
</html> </run>
</html> </run>


<blockquote>JavaScript 对象是属性和方法的容器。</blockquote>
== JavaScript 类 ==
在随后的教程中你将学习到更多关于函数,属性和方法的知识。
 
JavaScript 是面向对象的语言,但 JavaScript 不使用类。
 
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
 
JavaScript 基于 prototype,而不是基于类的。
 
== JavaScript for...in 循环 ==


== 访问对象方法 ==
JavaScript for...in 语句循环遍历对象的属性。


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


<pre>
<pre>
methodName : function() {
for (variable in object)
     // 代码
{
}</pre>
     执行的代码……
你可以使用以下语法访问对象方法:
}
</pre>
'''注意:''' for...in 循环中的代码块将针对每个属性执行一次。
 
==
 
循环遍历对象的属性:
 
<sample title="" desc="" lang="html" hererun="1">
var person={fname:"John",lname:"Doe",age:25};


<sample title="" desc="" lang="html" hererun="1"> objectName.methodName() </sample>
for (x in person)
{
    txt=txt + person[x];
}
</sample>
<run name=""> <!DOCTYPE html>
<run name=""> <!DOCTYPE html>
<html>
<html>
第269行: 第292行:
<body>
<body>


<p>创建和使用对象方法。</p>
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<p id="demo"></p>
<script>
<script>
var person = {
function myFunction(){
    firstName: "John",
    var x;
    lastName : "Doe",
    var txt="";
    id : 5566,
    var person={fname:"Bill",lname:"Gates",age:56};
     fullName : function()
     for (x in person){
    {
        txt=txt + person[x];
      return this.firstName + " " + this.lastName;
     }
     }
};
    document.getElementById("demo").innerHTML=txt;
document.getElementById("demo").innerHTML = person.fullName();
}
</script>
</script>


</body>
</body>
</html> </run>
</html> </run>
通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。


如果使用 fullName 属性,不添加 '''()''', 它会返回函数的定义:
== JavaScript 的对象是可变的 ==
 
对象是可变的,它们是通过引用来传递的。
 
以下实例的 person 对象不会创建副本:
 
<pre>var x = person;  // 不会创建 person 的副本,是引用</pre>
如果修改 x ,person 的属性也会改变:


<sample title="" desc="" lang="html" hererun="1"> objectName.methodName </sample>
<sample title="" desc="" lang="html" hererun="1"> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
 
var x = person;
x.age = 10;          //  x.age 和 person.age 都会改变 </sample>
<run name=""> <!DOCTYPE html>
<run name=""> <!DOCTYPE html>
<html>
<html>
第300行: 第331行:
<body>
<body>


<p>创建和使用对象方法。</p>
<p>JavaScript 对象是可变的。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p>拷贝的对象改变来,原始的也会跟着改变。</p>
<p id="demo1"></p>
 
<p id="demo2"></p>
<p id="demo"></p>
 
<script>
<script>
var person = {
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
    firstName: "John",
 
    lastName : "Doe",
var x = person;
    id : 5566,
x.age = 10;
    fullName : function()
 
    {
document.getElementById("demo").innerHTML =
      return this.firstName + " " + this.lastName;
person.firstName + " is " + person.age + " years old.";
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:"  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:" + person.fullName();
</script>
</script>


</body>
</body>
</html> </run>
</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|函数属性作为一个属性访问]]

2022年8月19日 (五) 11:19的最新版本

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。

所有事物都是对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

JavaScript 对象

对象只是一种特殊的数据。对象拥有属性方法

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值将是:

12

访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法:

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值将是:

HELLO WORLD!

创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

  • 使用 Object 定义并创建对象的实例。
  • 使用函数来定义对象,然后创建新的对象实例。

使用 Object

在 JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。

Object 构造函数创建一个对象包装器。

Object 构造函数,会根据给定的参数创建对象,具体有以下情况:

  • 如果给定值是 null 或 undefined,将会创建并返回一个空对象。
  • 如果传进去的是一个基本类型的值,则会构造其包装类型的对象。
  • 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。
  • 当以非构造函数形式被调用时,Object 的行为等同于 new Object()。

语法格式:

// 以构造函数形式来调用
new Object([value])

value 可以是任何值。

以下实例使用 Object 生成布尔对象:

// 等价于 o = new Boolean(true);
var o = new Object(true);

这个例子创建了对象的一个新实例,并向其添加了四个属性:


示例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

也可以使用对象字面量来创建对象,语法格式如下:

{ name1 : value1, name2 : value2,...nameN : valueN }

其实就是大括号里面创建 name:value 对,然后 name:value 对之间以逗号 , 隔开。


示例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

JavaScript 对象就是一个 name:value 集合。

使用对象构造器

本例使用函数来构造对象:


示例

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)

创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性:

假设 person 对象已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

在以上代码执行后,x 的值将是:

John

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

现在您可以试一下:

示例

myMother.changeName("Doe");

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object)
{
    执行的代码……
}

注意: for...in 循环中的代码块将针对每个属性执行一次。

==

循环遍历对象的属性:


示例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
    txt=txt + person[x];
}

JavaScript 的对象是可变的

对象是可变的,它们是通过引用来传递的。

以下实例的 person 对象不会创建副本:

var x = person;  // 不会创建 person 的副本,是引用

如果修改 x ,person 的属性也会改变:


示例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

var x = person;
x.age = 10;           //  x.age 和 person.age 都会改变

此页面最后编辑于2022年8月19日 (星期五) 11:19。