js中的继承问题

最新推荐文章于 2022-09-13 15:33:03 发布

不脱发的前端

最新推荐文章于 2022-09-13 15:33:03 发布

阅读量123

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48958175/article/details/118057129

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了两种JavaScript中的继承方式：构造函数继承和原型对象继承。通过Father构造函数创建父类对象，并使用call()方法实现属性继承。接着探讨了原型对象继承，如何将父类方法添加到子类的原型上，以及如何处理原型链中的问题，确保子类与父类之间的独立性。最后展示了实例代码，演示了这两种继承方式的应用。

摘要由CSDN通过智能技术生成

借用构造函数继承父类型属性

核心原理：通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。

function Father(uname, age) {
      this.uname = uname
      this.age = age
    }
    function Son() {
      Father.call(this, 'kobe', '18')
    }
    console.log(new Son());

在这里插入图片描述

借用原型对象继承父类型方法

核心原理：

将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
将子类的 constructor 从新指向子类的构造函数

在这里插入图片描述

function Father(uname, age) {
      this.uname = uname
      this.age = age
      
    }
    Father.prototype.basketBall = function() {
      console.log('我会打篮球');
    }
    function Son(uname, age) {
      Father.call(this, 'kobe', 18)
    }
    // Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
    Son.prototype = new Father()
     // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
    Son.prototype.constructor = Son
    Son.prototype.footBall = function() {
      console.log('我会踢足球');
    }
    var son = new Son()
    var father = new Father()
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);