JavaScript高级教程 - 第四课

作者： Thau   

对象的概念使你能够以一种更易理解的方式去组织你的信息。 让 我们从创建一个雇员数据库的简单例子开始, 然后利用我们课程 里学到的东西去实现一个比这复杂得多的, 和我们的生活有关 的事：编写一个 JavaScript 虚拟宠物。

为了这个练习, 让我们先不管如何把现代资本主义社会工人进行 对象化的方方面面, 我们把每一个雇员当作一个具有属性与方法 的对象。 每一个雇员有一个名字, 职务, 薪水, 生日, 地址等 属性。 雇员可以被提升, 去休假, 换部门或者去下厨等。 对象包 括了所有这些信息, 而雇员对象就象是一个模板。 每个雇员都有 这些属性如姓名, 职务等, 是属性值的不同使得不同的雇员得以 区分开来。

要创建你自己的对象, 你需要从模板开始。 在面向对象编程中模 板也称为对象的构造器。 一旦你建立了模板, 你就可以创建对象 的实例, 就象这样：

        
  var fred = new Employee("Fred Flintstone", 33, "Surface Miner", 20000);
var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);
var boss = new Employee("Mr. Slate",50, "CEO", 1000000);
  

如果这几个实例已被创建, 你可以做这些事情：

          
  barney.promotion("Chief Slacker","10");
fred.fired();
boss.vacation(365);
  

这样就把 Barney 提升为‘首席懒鬼’并增加 10% 的薪水, 炒掉 Fred , 让首席执行官休上一年的假。

当然你得自己从属性开始编写对象构造器和方法, 这里是雇员的 构造器：

          
  function Employee(name, age, title, salary)
{
    this.name = name;
    this.age = age;
    this.title = title;
    this.salary = salary;
}
  

请注意构造器其实就是一个函数。 在函数中我们需要给 this.property_name 赋值, 我们不直接给 age 赋值, 而是给 this.age 赋值, 对姓名, 职务等也一样。

你可以给构造函数传递参数 , 当象下面这个语句这样调用构造函 数时： var barney = new Employee("Barney Rubble", 33, "Slacker", 40000);

... 然后在构造函数中的这条语句：

          
  this.name = name;
  

... 我们就把这个雇员的名字设成了传递给雇员构造函数的参数 的值。

构造函数中使用的 "this" 关键字的原因是你可能一次创建多个雇 员实例。 为了让方法和构造函数正确工作, 必须 清楚地告诉它 们到底是在对哪个雇员进行操作。 这里的 "this" 所指的是 is: 你 正在创建的实例。 下面我们讲讲方法的例子或许能让你理解得 更好。

方法只不过是加在对象上的函数。 首先定义函数, 然后把函数加 载到对象上（在对象的构造函数中）我们以 promotion() 方法 为例：

          
  function promotion(new_title,percent_raise)
{
    var salary_increase = this.salary * percent_raise;
    this.salary = this.salary + salary_increase;
    this.title = new_title;
}
  

这个函数计算雇员的新工资并把新工资和新职位赋给雇员。 JavaScript 通过使用 "this" 关键字知道你说的是哪个雇员, 所以如 果有这个语句：

          
  barney.promotion("Chief Slacker",10);
  

那 "this" 就是指 is Barney. 这看起来确实有一点怪异, 可能要 一段时间去适应它, 但是一旦你开始以对象的眼光去思考, 你马 上就能养成习惯了。

创建对象的最后一步就是把方法连到对象上。 我刚才提到了, 你 要在构造函数中做这个。 你写完提升方法后, 如果要把它连到雇 员对象上, 就在构造函数里加上：

          
  this.promotion = promotion;
  

下面是增加了提升方法的构造函数：

          
  function Employee(name, age, title, salary)
{
    this.name = name;
    this.age = age;
    this.title = title;
    this.salary = salary;

    this.promotion = promotion;
}

function promotion(new_title,percent_raise)
{
    var salary_increase = this.salary * percent_raise;
    this.salary = this.salary + salary_increase;    
    this.title = new_title;
}

  

如要增加其它信息, 比如雇员的办公室, 可以增加一个名为 "office" 的属性。 然后如果你想记录雇员换办公室的情况, 你就创 建一个 transfer() 方法 .

明白了吗 ? 现在来看看更复杂和重要的面向对象的 JavaScript, 去 创建一个虚拟宠物。 >>

JavaScript高级教程
第一页 JavaScript高级教程- 第4天
第二页 图象映射与JavaScript
第三页 预装图象 - 是什么?
第四页 预装图象 - 怎么做?
第五页 对象的优点
第六页 创建你自己的对象
第七页 你的面向对象的虚拟宠物
第八页 计算字符串
第九页 获取难以索引的对象
第十页 另一种获取难以索引的对象的手段
第十一页 第四天课程复习

[第1课][第2课][第3课][第4课][第5课]

来源： Wired Digital Inc.