JavaScript 对象

JavaScript 是面向对象的编程语言(OOP),但又与通常的 C++,Java 等面向对象语言有所差别,如 JavaScript 中没有类(class)的概念。因此在按照 OOP 的思维来编写 JavaScript 代码时,总会有点那么不自然的感觉。

实际上,JavaScript 是基于对象(object-based)的语言,可以认为 JavaScript 里面所有东西几乎都是对象。在前面的教程及实例中,虽然我们几乎没提及对象的概念,但学习完本章之后,您就会知道,其实它们都是基于对象的。

什么是对象?

对象是一些属性和方法的集合。下面用一个简单的例子来帮助理解一下什么是对象及与对象有关的一些概念。例如我们一个人,就是一个对象,那么:

属性与方法:人有名字,有身高体重等特征,这些特征我们称为对象的属性。人能说话,能走路,这种能力我们称之为对象的方法。

私有方法与公共方法:一个人在学习了编程语言之后可以写程序,在学习了外语之后可以当翻译,这种个别对象才有的能力我们称之为对象的私有方法。反之,上面说话,走路等人人都具备的方法,称之为对象的公共方法。

封装:同样的两个人学习了编程语言,虽然都可以写程序,但由于是两个不同的对象,往往在写程序上是有差别的。对象的某些数据和代码可以是私有的,不能被外界访问,称之为封装。

继承:继承本是类里面的概念。继承是指子类通过继承(extends)父类,从而获得父类的属性与方法(私有属性和方法除外)。这就如一株大树,通过继承层层叠进,使最终的程序层次清晰而又功能强大。由于 JavaScript 语言没有类的概念,因此其本身并不直接提供继承功能,但现在有不少人和一些 JavaScript 框架,都在尝试让 JavaScript 具有继承的能力。

多态:多态是指不同事物具有不同表现形式的能力。多态机制使具有不同内部结构的对象可以共享相同的外部接口,通过这种方式减少代码的复杂度。遗憾的是,同继承一样,JavaScript 也不支持多态这一 OOP 中非常重要的概念。当然也有不少人和 JavaScript 框架尝试着间接实现 JavaScript 的多态性。

鉴于篇幅及本教程的宗旨,关于对象的一些基本概念简单描述到此为止。面向对象编程是一门专门的学科,感兴趣的同学可以另外阅读关于 OOP 专门的著作。

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

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!

使用函数来构造对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
function person(firstname,age){
this.firstname=firstname;
this.age=age;
}
myFather=new person("John",50);
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>

创建 JavaScript 对象实例

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

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

把属性添加到 JavaScript 对象

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

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

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

x=person.firstname;

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

John


创建自定义的 JavaScript 对象

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script>
  // 定义构造函数,并设定一个属性
    function Person(name)
    {
    this.name = name;
    }
    // 为 Person 增加一个方法
    Person.prototype.showName = function()
    {
    alert("我叫" + this.name);
    };
    // new 关键字实例化一个对象
    var Tom = new Person("Tom");
    // 运行该对象内的 showName() 方法
    Tom.showName();
</script>
</head>
<body>
</body>
</html>

如上面例子所示,我们在构造函数里设定了对象 name 属性,并通过对象的 prototype 属性增加一个 showName() 方法,最后通过 new 关键字来实例化一个对象。

JavaScript 类

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

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

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

JavaScript for...in 循环

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

语法

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
     var x;
     var txt="";
     var person={fname:"Bill",age:56}; 
     for (x in person){
        txt=txt + person[x];
     }
     document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </head> <body> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JavaScript学习指南