class 模拟继承-白红宇

class 模拟继承

阅读量：5130 次

发布时间：2019-06-13

本文共 6570 字，大约阅读时间需要 21 分钟。

define([], function() {   var initializing = false;   var fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;   /*    * 将 superProxy 提出来以优化性能    * 性能优化 log 见    * http://jsperf.com/johnresig-class-extend    */   function superProxy(_super, fn) {      return function() {         // make a copy of this._super         var tmp = this._super;         // Add a new ._super() method that is the same method         // but on the super-class         this._super = _super;         // The method only need to be bound temporarily, so we         // remove it when we're done executing         var ret = fn.apply(this, arguments);         // revert this._super         this._super = tmp;         return ret;      };   }   // The base Class implementation (does nothing)   var Class = function(){};   // Create a new Class that inherits from this class   Class.extend = function(prop) {      var _super = this.prototype;      // Instantiate a base class (but only create the instance,      // don't run the init constructor)      initializing = true;      var prototype = new this();      initializing = false;      // Copy the properties over onto the new prototype      for (var name in prop) {         // Check if we're overwriting an existing function         prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? superProxy(_super[name], prop[name]) : prop[name];      }      // The dummy class constructor      function Class() {         // All construction is actually done in the init method         if ( !initializing && this.init )            this.init.apply(this, arguments);      }      // Populate our constructed prototype object      Class.prototype = prototype;      // Enforce the constructor to be what we expect      Class.constructor = Class;      // And make this class extendable      Class.extend = arguments.callee;      return Class;   };   return Class;});

Breakdown of the Simple Inheritance script

下面我们来分析一下, 它是如何实现和有哪些技术被使用.

(function(){
// ... })();//创建一个自执行匿名函数, 为代码创建一个作用域.

var initializing = false

这 initializing 用来检查Class Function(稍后介绍)什么时候被调用. 在创建实例时设置 initializing 为true/false 或者只是返回一个对象指向当前的原型链上来达到"继承"的目的.

如果我们创建一个实例(initializing == false), 正好Class有一个init方法, 这样 init 会自动执行。再或者, 如果我们仅仅将它分配给原型上(initializing == true), 将不会发生什么, init 方法不会被执行。这样做是为了避免每次调用构造方法都要执行 init 方法. （var prototype = new this()）;.

fnTest = /xyz/.test(function(){
xyz;}) ? /\b_super\b/ : /.*/;

这个fnTest的目的就是为了验证 class method 中是否使用了 "_super()" 调用. 这种技术叫做 " function decompilation(函数反编译)" 也叫做 "function serialisation(函数序列化)"， Function serialisation 是在一个函数被转换成字符串时发生的. 现在很多浏览器都支持 toString 方法。

测试 Function serialisation, fnTest 使用一个匿名函数 funciton(){xyz;} 设置内容为 "xyz", 在转变成字符串后使用正则对 "xyz" 进行查找. 它将返回true (如果浏览器支持 function serialisation) 因为函数将转变成字符串所以 "xyz" 也民属于字符串的一部分. 在这个例子中 fnTest 将返回 "/\b_super \b/"，另一种则返回 "/.*/" 如果浏览器不支持 function serialisation 则始终返回 true。(这个指的是原始代码中的fnTest.test)使用 fnTest 正则, 和函数序列化技术, 我们能很容易方法中是否使用了 "_super" 如果它们使用, 则执行一些特殊方法. 反之正常. 这个特殊方法是为了避免在父类与子类中同时出现同一个方法. 父类将会被覆盖.

浏览器不支持 Function serialisation 将会始终返回 true, 那么会始终对 _super 进行额外的操作, 导致这些新的方法不能在 _super 中使用. 这会有一些小的性能消耗. 但能保证在所有浏览器中正常执行.

this.Class = function(){};

创建一个空的构造方法, 放到全局变量中. 这将会是最上层的构造方法. 它没有定义内容, 或一个原型对象. 除了下面的 extends 方法. this 指的是window对象. 使 Class 变量为全局对象.

Class.extend = function(prop) {

// ...

}

加入 extends 方法和一个简单的 prop(一个对象) 参数. 它将返回新构造方法的原型 + 父对象的原型;

var _super = this.prototype;

将当前对象的原型对象存储在 _super中. this.prototype是被扩展对象的原型, 它可以访问父级方法在你需要的地方, 这个变量叫什么 _super , 是因为 super 是保留字. 尽管现在还没有应用起来.

initializing = true;

var prototype = new this();

initializing = false;

实例 class 对象存储在 prototype 变量中, 但不执行 init 方法. 之前设置 initializing 为 true 所以在 new Class的时候不会 fire init 方法. prototype变量分配后, initializing 被设置回 false, 为了下一步可以正常工作. ( e.g 当想要创建一个真正的实例的时候)