zoukankan      html  css  js  c++  java
  • JavaScript继承的模拟实现

      我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。

    先定义一个父类,

    1         //父类
    2         function ParentClass() {
    3             this.className = "ParentClass";
    4             this.auth = "Auth";
    5             this.version = "V1.0";
    6             this.parentClassInfo = function () {
    7                 return this.className + "
    " + this.auth + "
    " + this.version;
    8             }
    9         }

    一、prototype 实现:

     1         //子类
     2         //1、prototype继承
     3         function ChildClassByPrototype() {
     4             this.date = "2013-07-26";
     5             this.classInfo = function () {
     6                 return this.parentClassInfo() + "
    " + this.date;
     7             }
     8         }
     9 
    10         ChildClassByPrototype.prototype = new ParentClass();
    11 
    12         var cctest1 = new ChildClassByPrototype();
    13         cctest1.parentClassInfo();
    14         cctest1.classInfo();

       这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的 cctest1.parentClassInfo() 方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。

    二、apply 实现:

    1         //2、apply继承
    2         function ChildClassByApply() {
    3             ParentClass.apply(this, new Array());//ParentClass.apply(this, []);
    4             this.date = "2013-07-26";
    5             this.classInfo = function () {
    6                 return this.parentClassInfo() + "
    " + this.date;
    7             }
    8         }

       JavaScript中的apply可以理解为用A方法替换B方法,第一个参数为B方法的对象本身,第二个参数为一个数组,该数组内的值为需要传递给A方法对应的参数列表,如果参数为空,即没有参数传递,可通过 new Array()、[] 来传递

    三、call + prototype 实现:

    1         //3、call+prototype继承
    2         function ChildClassByCall() {
    3             ParentClass.call(this, arguments);
    4             this.date = "2013-07-26";
    5             this.classInfo = function () {
    6                 return this.parentClassInfo() + "
    " + this.date;
    7             }
    8         }
    9         ChildClassByCall.prototype = new ParentClass();

      callapply作用类似,即都是用A方法替换B方法,只是传递的参数不一样,call方法的第一个参数为B方法的对象本身,后续的参数则不用Array包装,需直接依次进行传递。既然作用差不多,为何多了一句 原型赋值呢?这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。

      每种方法都有其适用环境,比如,如果父类带有有参构造函数:

    1         function ParentClass(className, auth, version) {
    2             this.className = className;
    3             this.auth = auth;
    4             this.version = version;
    5             this.parentClassInfo = function () {
    6                 return this.className + "
    " + this.auth + "
    " + this.version;
    7             }
    8         }

    这种情况下,prototype就不适用了,可选用apply或call;

     1         function ChildClassByApply(className, auth, version) {
     2             ParentClass.apply(this, [className, auth, version]);
     3             this.date = "2013-07-26";
     4             this.classInfo = function () {
     5                 return this.parentClassInfo() + "
    " + this.date;
     6             }
     7         }
     8 
     9
    10         function ChildClassByCall(className, auth, version) {
    11             ParentClass.call(this, arguments[0], arguments[1], arguments[2]); //ParentClass.call(this, className, auth, version);
    12             this.date = "2013-07-26";
    13             this.classInfo = function () {
    14                 return this.parentClassInfo() + "
    " + this.date;
    15             }
    16         }
    17         ChildClassByCall.prototype = new ParentClass();

    实例化:

    1        var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
    2        var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

      在apply和call中,又该如何取舍呢?在OO的继承中,子类继承于父类,那么它应该也是父类的类型。即,ChildClassByCall、ChildClassByApply应该也是ParentClass类型,但我们用"instanceof"检测一下就会发现,通过apply继承的子类,并非ParentClass类型。所以,我们建议用call + prototype 来模拟实现继承。据说,Google Map API 的继承就是使用这种方式哟。


    参考资料:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

  • 相关阅读:
    Flagger on ASM——基于Mixerless Telemetry实现渐进式灰度发布系列 2 应用级扩缩容
    Flagger on ASM·基于Mixerless Telemetry实现渐进式灰度发布系列 1 遥测数据
    HTML特殊符号整理
    jq代替jsdom操作部分
    js操作html的基本方法
    使用for循环疑难问题
    使用盒子定位布局时margin和padding使用
    四使用浮动div布局
    解决Junit单元测试 找不到类 ----指定Java Build Path
    微信服务号申请、认证、认证后申请商家支付接口
  • 原文地址:https://www.cnblogs.com/maoniu602/p/3217173.html
Copyright © 2011-2022 走看看