JavaScript 利用 prototype 给类添加方法详解

本文通过具体实例，讲解如何在 JavaScript 中利用 prototype 属性为类添加方法，供读者参考学习。

如何定义一个简单的类

1. 如何定义一个简单的类？

以下展示一个不包含任何属性和方法的类定义方式：

function MyClass(){};

这看起来像是一个普通的函数声明，但在 JavaScript 中，这个函数实际上就是类的定义实现。接下来演示如何使用该类：

var cls1 = new MyClass();

通过 new 关键字即可生成 MyClass 的一个实例。因此在 JavaScript 中，函数与类是等同的概念，类即为函数。

给类增加属性和方法

2. 给类增加属性和方法

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
var cls1 = new MyClass("lily",18);
alert(cls1.name);

从上述代码可见，在函数内部使用 this 关键字即可为函数本身添加属性。例如上面的代码中，myClass 函数被赋予了 name 和 age 两个属性。

此外，还可以利用 this 关键字为该类添加一个 toString 方法，具体代码如下：

function MyClass(name,age){
  this.name = name;
  this.age = age;
  this.toString() = function(){
    alert(this.name +":"+ this.age);
  };
}
var cls1 = new MyClass("liming",10);
cls1.toString();

此时 MyClass 已成功拥有 toString 方法。另外，也可以采用以下代码形式来添加方法：

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
var cls1 = new MyClass("liming",10);
cls1.toString() = function(){
            alert(this.name +":"+ this.age);
          };
cls1.toString(); // [liming:10]
var cls2 = new MyClass("zhang",10);
cls2.toString(); //报错

虽然这种方式能为类添加方法，但它仅针对 cls1 这个特定实例生效，并未真正添加到 MyClass 类本身。

因此，cls2 实例并不存在 toString 方法。

引出prototype

3. 引出 prototype

由前文可知，若要在 MyClass 类本身添加方法，需将方法定义在 MyClass 函数内部。然而，每声明一个新实例时，都会复制一遍 MyClass 的方法，这显然不是最优方案。

既然不能将所有方法都定义在函数内部，那么如何给类添加方法呢？这就需要用到函数的 prototype 属性。

每个函数都包含一个 prototype 属性，该属性指向一个 prototype 对象。我们可以指定函数对应的 prototype 对象；若不指定，函数将指向默认的 prototype 对象，且该默认对象的 constructor 属性会指向该函数。

当使用构造函数创建新对象时，新对象会继承构造函数 prototype 属性所指向的 prototype 对象的所有属性和方法。这意味着，对构造函数对应的 prototype 对象所做的任何操作，都会反映到由其生成的所有对象上，这些对象将共享与构造函数对应的 prototype 对象的属性和方法。

虽然新创建的对象可以使用其构造函数指向的 prototype 对象的属性和方法，但不能像调用构造函数那样直接调用 prototype 对象（因为普通对象没有 prototype 属性）。

简而言之，若使用函数的 prototype 对象来添加方法，在创建新对象时，并不会复制函数的所有方法，而是让新对象指向这些共享方法。

具体代码如下：

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
MyClass.prototype.toString = function(){
  //
}
var cls1 = new MyClass("liming",10);
cls1.toString(); //
var cls2 = new MyClass("zhang",10);
cls2.toString();

若要加入多个方法，也可采用以下方式：

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
MyClass.prototype = {
  toString:function(){
    //
  },
  sayHellow:function(){
    //
  }
};

这就是 JavaScript 中利用 prototype 实现类方法封装的原理。

感兴趣的朋友可使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家 JavaScript 程序设计有所帮助。