一段让JavaScript模仿其他语言类的语法去写的有趣的代码

先上源码: 

JS = {};
// 这个是库的源代码;
JS.Class = function(classDefinition) {

  //返回目标类的真正构造器
  function getClassBase() {
    return function() {
      //它在里面执行用户传入的构造器construct
      //preventJSBaseConstructorCall是为了防止在createClassDefinition辅助方法中执行父类的construct
      if (typeof this['construct'] === 'function' && preventJSBaseConstructorCall === false) {
          this.construct.apply(this, arguments);
      }
    };
  }
  //为目标类添加类成员与原型成员
  function createClassDefinition(classDefinition) {
    //此对象用于保存父类的同名方法
    var parent = this.prototype["parent"] || (this.prototype["parent"] = {});
    for (var prop in classDefinition) {
      if (prop === 'statics') {
        for (var sprop in classDefinition.statics) {
          this[sprop] = classDefinition.statics[sprop];
        }
      } else {
        //为目标类添加原型成员,如果是函数,那么检测它还没有同名的超类方法,如果有
        if (typeof this.prototype[prop] === 'function') {
          var parentMethod = this.prototype[prop];
          parent[prop] = parentMethod;
        }
        this.prototype[prop] = classDefinition[prop];
      }
    }
  }

  //其实就是这样的Base = function() {};别想太多了;
  var preventJSBaseConstructorCall = true;
  var Base = getClassBase();
  preventJSBaseConstructorCall = false;

  createClassDefinition.call(Base, classDefinition);

  //用于创建当前类的子类
  Base.extend = function(classDefinition) {
    //其实就是这样的Base = function() {};别想太多了;
    preventJSBaseConstructorCall = true;
    var SonClass = getClassBase();
    SonClass.prototype = new this();//将一个父类的实例当作子类的原型
    preventJSBaseConstructorCall = false;

    createClassDefinition.call(SonClass, classDefinition);
    SonClass.extend = this.extend;

    return SonClass;
  };
  return Base;
};

在webpack、es6、typescript等技术盛行的年代其实并不太需要这种库,但我们还是当做好玩来研究一下吧,或者做一些小项目又不想es6转es5代码的,可以让代码更清晰。

看一下想要创建一个类是怎样进行的

var Animal = JS.Class({
    //construct就代表构造函数
    construct: function(name) {
        //声明一个public属性
        this.name = name;
    },
    //声明一个public方法
    shout: function(s) {
        console.log(s);
    }
});
var animal = new Animal();
animal.shout('animal'); // animal

是不是已经和其他语音的类很像了,实现继承也很简单。

var Dog = Animal.extend({
    construct: function(name, age) {
        //调用父类构造器 等价于ES6的super()
        this.parent.construct.apply(this, arguments);
        this.age = age;
    },
    run: function(s) {
        console.log(s);
    }
});
var dog = new Dog("dog", 4);
//可以直接调用父类的方法
dog.shout("dog"); // dog
dog.run("run"); // run

继承也很简单,而且也可以直接调用父类的方法。而且就算父类方法重名也可以调用。

var Shepherd = Dog.extend({
    //静态成员这样声明
    statics: {
        TYPE: "Shepherd"
    },
    run: function() {
        //方法链,调用超类同名方法
        this.parent.run.call(this, "fast");
    }
});

console.log(Shepherd.TYPE); //Shepherd
var shepherd = new Shepherd("shepherd", 5);
shepherd.run(); //fast

有继承、有静态方法、可以调用父类方法,基本上满足了类的需要,让代码更清晰,也弥补了es6之前没有类的缺憾。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值