解析John Resig Simple JavaScript Inheritance代码

解析 John Resig 在 Simple JavaScript Inheritance 代码的思路可以分为以下几个部分：

简介

这是 John Resig 在 2008 年发布的一个 JavaScript 类继承的库，用来实现类的继承。

源代码及解析

下面我们来逐行分析源代码实现：

首先，定义了一个匿名函数，并将其赋值给 Class 变量。

var Class = (function() {
    // ...
})();

这里利用了函数声明的特性，定义了一个 IIFE，返回一个对象。

1. Fn.prototype.extend

接下来就是对象的方法，其中，最重要的就是 extend 方法，这个方法有两个参数，第一个是一个对象，表示新的类的原型对象，第二个是一个对象，表示新的类的静态属性和方法。

// 添加方法和静态属性
Function.prototype.extend = function(prop) {
  var _super = this.prototype;

  function F() {};
  F.prototype = _super;

  var prototype = new F();

  for(var name in prop) {
    if(typeof prop[name] === "function" &&
       typeof _super[name] === "function" &&
       fnTest.test(prop[name])) {

      prototype[name] = (function(name, fn) {
        return function() {
          var tmp = this._super;
          this._super = _super[name];
          var ret = fn.apply(this, arguments);
          this._super = tmp;
          return ret;
        };
      })(name, prop[name]);

    } else {
      prototype[name] = prop[name];
    }
  }

  function Class() {
    if (this.init) {
      this.init.apply(this, arguments);
    }
  }

  Class.prototype = prototype;
  Class.constructor = Class;
  Class.extend = arguments.callee;

  return Class;
};

在这个方法的内部中，核心部分就是以下这段代码：

var _super = this.prototype;
function F() {};
F.prototype = _super;
var prototype = new F();

这里定义了一个代理函数 F，这个函数的作用是一个中间代理层，可以用来保存原型对象 _super 的引用，从而避免对父类对象的修改。

接下来，将代理函数 F 的原型属性指向当前对象的原型属性，这样代理函数 F 就成为了一个新的对象，这个新的对象有原型属性继承自当前对象。

接着定义一个 for 循环，遍历新的类的原型对象上的属性，将方法保存至新的原型对象上。

其中，最重要的部分在于这样的一个条件判断：

typeof prop[name] === "function" &&
typeof _super[name] === "function" &&
fnTest.test(prop[name])

如果当前对象和父类对象上都拥有相同名称的方法，并且这个方法符合正则表达式 fnTest 规定的格式，则使用 closure 的思想实现闭包函数。

这里 closure 函数在 arguments 对象中做了一个小的修改，简单来说就是是利用 arguments 对象保存 this 的引用，并在函数返回的时候计算出方法的返回值。

对于非方法的属性，直接将属性保存到新的原型对象上。

最后，定义并返回一个改写过的函数 Class，用来定义新的类。

在 Class 中，还增加了一个新的方法 init，用来在对象创建时初始化对象的属性。

2. _super 属性

另外一个重要的功能就是函数中的 _super 属性，这个属性用来在子类中调用父类中相同名称的方法。

var _super = this._super || function() {};

这个属性也是利用了 closure 函数的思想，每一次将 _super 模拟为当前方法的上一个版本，避免对父类对象进行操作。

3. 对象的创建

Class 这个对象是通过原型属性来定义的，因此可以用 new 关键字来创建新的对象。在对象创建的时候，可以传递参数给 init 方法初始化对象的属性。

示例说明

示例 1：

// 父类
var Person = Class.extend({
  init: function(name, age) {
    this.name = name;
    this.age = age;
  },
  sayName: function() {
    console.log("name: " + this.name);
  },
  sayAge: function() {
    console.log("age: " + this.age);
  }
});

// 子类
var Student = Person.extend({
  init: function(name, age, stuNo) {
    this._super(name, age);
    this.stuNo = stuNo;
  },
  sayStuNo: function() {
    console.log("student number: " + this.stuNo);
  }
});

// 创建父类对象
var p = new Person("Tom", 20);
console.log(p); // Person {name: "Tom", age: 20}

// 创建子类对象
var s = new Student("Jhon", 18, 20210001);
console.log(s); // Student {name: "Jhon", age: 18, stuNo: 20210001}

s.sayName(); // name: Jhon
s.sayAge(); // age: 18
s.sayStuNo(); // student number: 20210001

以上是一个简单 class 继承的示例，通过相同的名称的方法实现了类的继承。

示例 2：

var Animal = Class.extend({
  makeSound: function() {
    console.log("Animal sound...");
  }
});

var Cat = Animal.extend({
  makeSound: function() {
    console.log("Mew...");
    this._super();
  }
});

var cat = new Cat();
cat.makeSound(); // Mew... \n Animal sound...

这是一个更加直观的 _super 方法的使用示例。通过先在子类中重写方法，再显示调用父类的方法实现了在子类方法中调用父类方法的使用。