正文

javascript实现OOP编程

IP云
IP云V管理员/5 阅读
10/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.首先通过一个函数来实现JS的单继承。使用原型方式来实现继承

(function () { $.extend({
oop: {
extend: function (child, father) {
if (father == null) {
var father = function () { };
console.log(this);
father.prototype = this
}
child.prototype = new father(); child.base = father;
child.prototype.base = child.prototype;
}
} });
window.oop = $.opp;
})();

该方法向子类追加base实例属性及静态实例属性，以便找到父类。

2.创建一个基类。

(function () {
oop.ui = function () {
/**
*渲染之前
*基类不开启渲染。
*/
this.renderBefor = function (self) {
return false;
}
/*
* 渲染函数
*/
this.render = function () {
if (this.renderBefor()==false) return;
if (this.element) {
this.element.wrap("<span class='oop_ui'></span>");
}
this.redered();
}
this.redered = function (self) { }
}
oop.extend(oop.ui);
})();

3.创建一个子类。

(function () {
oop.ui.select = function ($input) { this.element = $input this.renderBefor = function () {
return true;
}
this.render = function () {
/**
*通过apply方法来调用基类的render方法。
*/
this.base.render.apply(this,arguments);
this.element.parent().addClass("oop-ui-select");
}
};
oop.extend(oop.ui.select, oop.ui); })();

子类oop.ui.select的render 方法中。

调用基类的方法是this.base.render.apply(this,arguments);

apply是将base.render()方法中的this覆盖为当前子类的this(也就是指向oop.ui.select)。