JavaScript 创建自己的自定义对象

创建自定义的 JavaScript 对象

前面的章节说过,JavaScript 中没有类(class)的概念。因此我们没有办法像其他面向对象语言如 Java、C++ 等一样,先创建类,类包含方法,然后再实例化对象来创建对象。

在 JavaScript 中,当我们用 function 关键字来创建一个函数时,实际上在 JavaScript 中,是按照对象来进行管理的,且我们可以动态的设置该对象的属性及方法等。具体来看下面的例子:

<script language="JavaScript">
// 定义构造函数,并设定一个属性
function Person(name)
{
    this.name = name;
}

// 为 Person 增加一个方法
Person.prototype.showName = function()
{
    alert("我叫" + this.name);
};

// new 关键字实例化一个对象
var Tom = new Person("Tom");
// 运行该对象内的 showName() 方法
Tom.showName();
</script>

运行该例子,弹出一个消息提示框:我是Tom

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

对象属性和方法的访问

对象的属性和方法都通过 . 符号来访问,语法格式为:

对象名.属性[方法]
// 对象内部使用 this 关键字:
this.属性[方法]

在上面的例子中,Tom.showName() 即表示访问 Tom 对象的 showName() 方法。要直接访问属性也一样:

alert( Tom.name );

将输出:Tom

设置对象属性

JavaScript 是松散类型的语言,可以动态地增加属性和方法到对象中。增加、修改、删除对象属性语法如下:

// 增加属性
对象名.新属性 = 属性值;
// 修改属性值
对象名.新属性 = 新属性值;
// 删除属性值
delete 对象名.属性;
// 或者直接设置为 undefined
对象名.属性 = undefined;

应用于上面的例子:

// 增加属性
Tom.age = 20;
// 修改属性值
Tom.name = Jack;
// 删除属性值
delete Tom.name;

注意,当对象属性被删除后,再访问该属性,将返回 undefined 类型。

设置对象方法

同样地,我们也可以方便的动态改变 JavaScript 对象的方法,增加、修改、删除对象方法语法如下:

// 增加方法
对象名.新方法 = function(){ ... }
// 修改方法,即将方法重新定义即可
对象名.方法 = function(){ ... }
// 删除方法
对象名.方法 = undefined;

应用于上面的例子:

// 增加方法
Tom.showAge = function()
{
    alert("今年" + this.age + "岁");
};
// 增加属性
Tom.age= 20;
// 运行新增加的方法
Tom.showAge();

注意:使用 new 关键字实例化的对象,在增加新的方法时,是不需要 prototype 属性的(无 prototype 属性),注意与上文构造函数比较一下。

本章节内容共分 4 部分:

  1. 1. JavaScript 面向对象(OOP)简介
  2. 2. JavaScript 对象的属性与方法
  3. 3. JavaScript 创建自己的自定义对象
  4. 4. JavaScript 对象的 prototype 属性
海外1核2G服务器低至2折

5idev.com(我爱开发网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程