• ES5中实现继承


      本篇文章主要说明在ES5中最通用最兼容的继承实现方式,继承作为面向对象的三大特性之一,在js中实现继承对代码的简洁性,逻辑的连贯性都有很大的帮助。

    实现思路

    封装创建中间联系对象的函数

      继承可以简单理解为建立子类和父类之间的联系,从而实现代码和函数的复用,建立子类和父类的联系,也就是建立两个构造函数之间的联系,我们不难想到可以通过原型,原型链来实现,让子类与父类的原型建立联系,就可以达到我们的目的。

      如果我们直接将子类的prototype属性指向父类的原型的话,就会导致继承很多我们并不需要的属性,所以我们通过下图这种方式:

      将创建中间建立联系对象的代码封装成为一个函数,传入的参数p为父类的原型对象,将p赋值给F的原型,并将其实例返回。

    封装继承函数

      接下来,我们将createObj返回的实例对象赋值给子类的原型,建立父类和子类的联系,也就是继承关系,实现代码如下图:

      封装成继承函数,将子类和父类作为参数传入,将子类的prototype指向createObj函数返回的实例对象,并在子类原型中添加constructor属性,指向子类的构造函数对象,在需要继承的位置,直接调用inherit函数就能完成继承。

    完整代码

    1. function Person(name, age) {
    2. this.name = name;
    3. this.age = age;
    4. };
    5. Person.prototype.work = function() {
    6. console.log("撸起袖子加油干")
    7. }
    8. function Children(name, age, responsibility) {
    9. Person.call(this, name, age);
    10. this.responsibility = responsibility;
    11. };
    12. function createObj(p) {
    13. function F() {};
    14. F.prototype = p;
    15. return new F()
    16. }
    17. function inherit(Subtype, Supertype) {
    18. Subtype.prototype = createObj(Supertype.prototype);
    19. Object.defineProperty(Subtype.prototype, 'constructor', {
    20. enumerable: false,
    21. configurable: true,
    22. writable: true,
    23. value: Subtype
    24. })
    25. }
    26. inherit(Children, Person);
    27. Children.prototype.study = function() {
    28. console.log("学习");
    29. }
    30. var child = new Children("guanju", 18, "成家立业");
    31. console.log(child);
    32. child.study();
    33. child.work();

  • 相关阅读:
    赋能千行百业,AI究竟走到哪一步了?
    SpringBoot之用拦截器避免重复请求
    ThreadLocal(1):ThreadLocal介绍
    MongoDB CRUD操作:快照查询
    Java JSP JAVAweb在线考试系统源码网上考试系统源码(ssm考试管理系统)
    ubuntu22.04 安装PlatformIO IDE
    SkeyeVSS视频安防综合管理系统助力智慧楼宇解决方案
    【Linux】在 Ubuntu 系统下使用 Screen 运行 Python 脚本
    一个注解搞定责任链,学还是不学?
    Create Engaging Diagrams with Animation
  • 原文地址:https://blog.csdn.net/z020729/article/details/134452023