1.首先通过一个函数来实现JS的单继承。使用原型方式来实现继承
1 (function () { 2 3 $.extend({ 4 oop: { 5 extend: function (child, father) { 6 if (father == null) { 7 var father = function () { }; 8 console.log(this); 9 father.prototype = this 10 } 11 child.prototype = new father(); 12 13 child.base = father; 14 child.prototype.base = child.prototype; 15 } 16 } 17 18 }); 19 window.oop = $.opp; 20 })();
该方法向子类追加base实例属性及静态实例属性,以便找到父类。
2.创建一个基类。
1 (function () { 2 oop.ui = function () { 3 /** 4 *渲染之前 5 *基类不开启渲染。 6 */ 7 this.renderBefor = function (self) { 8 return false; 9 } 10 /* 11 * 渲染函数 12 */ 13 this.render = function () { 14 if (this.renderBefor()==false) return; 15 if (this.element) { 16 this.element.wrap("<span class='oop_ui'></span>"); 17 } 18 this.redered(); 19 } 20 this.redered = function (self) { 21 22 } 23 } 24 oop.extend(oop.ui); 25 })();
3.创建一个子类。
1 (function () { 2 oop.ui.select = function ($input) { 3 4 this.element = $input 5 6 this.renderBefor = function () { 7 return true; 8 } 9 this.render = function () { 10 /** 11 *通过apply方法来调用基类的render方法。 12 */ 13 this.base.render.apply(this,arguments); 14 this.element.parent().addClass("oop-ui-select"); 15 } 16 }; 17 oop.extend(oop.ui.select, oop.ui); 18 19 })();
子类oop.ui.select的render 方法中。
调用基类的方法是this.base.render.apply(this,arguments);
apply是将base.render()方法中的this覆盖为当前子类的this(也就是指向oop.ui.select)。