首页手记 JS学习：js面向对象编程(es6和jsface库技术选型)

JS学习：js面向对象编程(es6和jsface库技术选型)

标签：

Html/CSS JavaScript

面向对象的三大特性: 继承封装多态

JS学习：nodejs中的类定义和继承的套路在js面向对象编程中存在的问题?
es6还是jsface库?
这是本篇要解决的问题！

1. 子类override基类同名方法时出现问题

原本要继续写渲染器方面的东西，但是在过程中遇到一个问题:根据JS学习：nodejs中的类定义和继承的套路的套路，发现一个致命的问题，无法对子类进行override，具体代码如下:

父类的render方法，绘制背景

BLFBaseSprite.prototype.render = function(render) {
    render.drawGrid('black', 'white', 10, 10);
}

子类override父类render方法，增加绘制文字

BLFBaseSprite.prototype.render = function(render) {
    render.drawGrid('black', 'white', 10, 10);
    render.drawText(10, 10, 'blue', "随风而行之青衫磊落险峰行测试RenderSurface");
}

测试代码:(创建的是BLFBaseSprite，原本是没有文字的，但是实际却显示了文字)

 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext('2d');
 var render = new BLFRender(context);
 var base= BLFBaseSprite();
 base.render(render);

出问题啦！！！

原因: 是因为inherits函数中子类和父类的prototype指向的对象是同一个，共享了同一个prototype

也不想多花时间在这方面，于是决定选择是使用es6还是jsface库来进行js面向对象方式的编程。至于说typescript，是我非常喜欢的一门语言，但是客户端编程，就不选他了。

2. 测试es6和jsface面向对象编程的能力(继承封装多态)。

继承(包含子类覆写父类方法[override],以及子类调用父类方法)
jsface版本:

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/jsface/2.4.9/jsface.min.js"></script>
<script>
        //Class方法1
        var Base = Class({
            constructor: function(name) {
                this.name = name;
            },

            toString: function() {
                return this.name;
            }
        });

        //Class重载方法进行继承
        var Child = Class(Base, {
            //构造函数增加一个id参数
            constructor: function(id, name) {
                this.id = id;
                //同时要调用基类的构造函数用于初始化name属性
                Child.$super.call(this, name);
            },

            //override 基类方法
            toString: function() {
                return this.name + '-' + this.id;
            }
        });

        var base = new Base("base");
        var child = new Child(1234, "child");
        alert(base.toString());
        alert(child.toString());
  </script>

上述代码可以在imooc中点击运行

es6版本:

<script>
       class ESBase {
            constructor(name) {
                this.name = name;
            }

            toString() {
                return this.name;
            }
        }

        class ESChild extends ESBase {
            constructor(id, name) {
                super(name); //调用基类方法
                this.id = id;
            }

            //override基类方法
            toString() {
                return this.name + '_' + this.id;
            }
        }

        var esBase = new ESBase("esBase");
        var esChild = new ESChild(4321, "esChild");
        alert(esBase.toString());
        alert(esChild.toString());
</script>

上述代码可以在imooc中点击运行

通过使用es6和jsface，完美解决今天碰到的问题。其威力来源与子类覆写父类方法[override],以及子类调用父类方法这两个关键功能。

封装(数据隐藏)
封装最简单的解释就是java c# c++等面向对象语言中的public/protected/private这些关键词起的作用:

public: 表明该数据成员、成员函数是对所有用户开放的，所有用户都可以直接进行调用
private：表示私有，私有的意思就是除了class自己之外，任何人都不可以直接使用，私有财产神圣不可侵犯嘛，即便是子女，朋友，都不可以使用。
protected：protected对于子女、朋友来说，就是public的，可以自由使用，没有任何限制，而对于其他的外部class，protected就变成private。

数据隐藏功能要在js中完美实现，难度非常大。并且感觉也没必要。数据隐藏最大的功能是隐藏实现细节，提供公开接口给第三方(面向接口编程)。js本身都是源码随意可见，因此封装数据隐藏也就不用考虑了。
为了使用代码更加清晰，可以自行设计相关规则，例如：