JavaScript学习笔记:实现类的多重继承

2019-05-1714:47:02WEB前端开发Comments1,973 views字数 1430阅读模式

1.定义一个空的父类构造函数,然后通过prototype的方式为该父类定义属性和方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12517.html

2.定义一个空的子类的构造函数,然后将子类的原型绑定在父类的实例上,再将子类原型的父类也绑定在父类的实例上。通过prototype的方式为子类设置自己的属性和方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12517.html

3.定义一个空的孙类构造函数,然后将孙类的原型绑定到子类的实例上,再将孙类原型的父类绑定到子类的实例上。通过prototype方式为孙类定义自己的属性和方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12517.html

4.实例化一个孙类对象,通过调用该实例对象,调用自身的方法,也可以调用孙类的父类即文中的子类的方法,也可直接调用最大父类即这里父类的方法,也可以为当前对象添加属性和方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12517.html

function Person(){}
Person.prototype.name = "人";// 为人类创建一个name属性
Person.prototype.say = function(content){// 为人类创建一个说话的方法
    if(!){  // 如果对象不存在name属性,则使用原型链的name
         = this.__proto__.name;
    }
    ("我是" +  + ",我想说"+content);
};


function Parent(){}
Parent.prototype = new Person();   // 设置Parent类继承Person类
Parent.prototype.superClass = new Person();// 设置superClass保存父类Person的方法属性
Parent.prototype.name = "父辈类";// 设置Parent类的name属性
Parent.prototype.say = function(){// 设置Parent类自己的 say 方法
    ("我是Parent类的say方法!");
};


function Child(){}

Child.prototype = new Parent();// 设置Child类继承Parent类

Child.prototype.superClass = new Parent();// 设置superClass保存父类Parent的方法属性
Child.prototype.say = function(){   //设置Child类自己的say方法
    ("我是Child类的say方法!");
}

var c = new Child();// 实例化一个Child对象
();   // 调用自身原型的say方法,输出:我是Child类的say方法!
(); // 调用父类Parent的say方法,输出: 我是Parent类的say方法!
("哈哈");// 直接调用最大的父类Person的say方法(方法中的this指向Person),输出:我是人,我想说哈哈"

// 用call调用最大的父类Person的say方法(方法中的this指向实例化对象c,但此时c并没有name属性,所以用的是Parent的name)
.call(c,"嘻嘻"); // 输出:我是父辈类,我想说嘻嘻

c.name = "子类实例";// 给当前对象增加name属性

// 还是用call调用最大父类Person的say方法(此时c对象中已经有name属性);
.call(c,"我是子类的实例化对象"); // 输出:我是子类实例,我想说我是子类的实例化对象

ps:多重继承可以在原型对象上新增一个属性用以保存父类的对象和属性,子类调用的时候使用superClass点出父类方法,这样一来就解决了父类和子类方法同名,子类继承父类之后会覆盖父类方法的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12517.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/12517.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定