javascript实现OOP编程

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)。