JavaScript中的继承（最全版）

已于 2023-04-12 22:03:53 修改
阅读量192 收藏
点赞数 2
文章标签： javascript 前端 开发语言
于 2023-04-05 19:41:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fighting0923/article/details/129974769
版权

文章目录

一、为什么要继承？

1.为了把公共的内容提取出来变成更加公共的内容
2.为了让所有的类都能使用

二、继承的含义？

  1. 当 A 构造函数的实例, 能够使用 B 构造函数的 属性(构造函数体内)和方法(构造函数原型)
  2. 我们说 A 构造函数(类) 继承自 构造函数B(类)
    + 我们管 A 构造函数(类) 叫做 子类
    + 我们管 B 构造函数(类) 叫做 父类

三、原型继承？

原型继承
+ 核心: 子类的原型指向父类的实例
          => 核心: 子类的原型指向父类的实例
+ 通过改变原型链来实现继承
          => 当你访问一个对象的成员的时候
          => 会按照原型链规则查找
+ 优点
          => 属性和方法 都能继承下来
+ 缺点
          => 子类不能存在自己的私有方法, 一旦你想 子类.prototype 上插入方法, 就是在向父类的实例身上插入
          => 继承下来的属性是一模一样的

// 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子类
    function Student(gender) {
      this.gender = gender
    }

    // 实现继承
    Student.prototype = new Person('Rose', 18)

    const s = new Student('男')
    console.log(s)
    console.log(s.gender)
    console.log(s.name)
    s.sayHi()

    const s2 = new Student('女')
    console.log(s2)

四、借用继承

         借用继承 / call 继承(需要利用 call 或者 apply 方法)
+ 核心: 利用 call 来调用父类构造函数, 改变构造函数内的 this 指向
          => 父类.call(子类的this)
+ 构造函数也是函数, 通过 call 方法改变 this 指向
          => 实现讲父类内添加的内容插入到子类内
+ 优点
          => 子类可以有自己的原型
          => 每一个继承下来的属性都是自己的独立私有属性
+ 缺点
          => 父类的方法不能继承

// 分析父类:
    // 如果你想用 Person 创建实例
    // new 关键字做了几个事情
    //   创建了一个对象
    //   this 指向这个对象
    //   this.__proto__ 指向构造函数的原型
    //   返回这个对象
    // const p = new Person('Jack', 18)
    // 如果没有 new 关键字
    // 构造函数的本质, 依旧是函数, 可以不和 new 关键字连用
    // 不会自动创建对象了, 不会设置 __proto__ 了, 不会返回这个对象
    // 问题: 代码要不要执行 ?
    // 单纯的考虑一个函数的调用, this 指向谁了 ?
    // 因为 this 指向 window 了
    // 所以两个成员添加到 window 身上了
    // const p2 = Person('Rose', 20)
    // console.log(p2)
    // 只要是函数, 就可以通过 call 和 apply 和 bind 方法改变 this 指向
    // Person 函数也利用 call 方法改变一下 this
    // const obj = {}
    // 让 Person 内的 this 指向 obj
    // 当 Person 函数执行的时候, 两个成员添加到了 obj 身上
    // Person.call(obj, 'Jerry', 22)
    // console.log(obj)

    // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子类
    function Student(gender, name, age) {

      // 在这里把 Person 当做普通函数执行一遍
      // 并且在调用的时候, 使用 call 来调用, 改变 this 指向
      // 在这个函数内, this 指向 Student 的实例
      // 我现在利用 call 把 Person 函数内的 this 指向了 Student 的实例
      // Person 函数内添加的两个成员, 就加在了 Student 的实例 身上
      Person.call(this, name, age)

      this.gender = gender
    }

    // 子类自己的原型方法
    Student.prototype.study = function () { console.log('学习中...') }


    const s = new Student('男', 'Jack', 18)
    const s2 = new Student('女', 'Rose', 20)


    console.log(s)
    console.log(s2)

五、组合继承1 (原型继承 和 借用继承)

核心: 把 原型继承 和 借用继承 放在一起使用
1.优点:
         => 属性和方法 都能继承下来
          => 每一个继承下来的属性都是自己的独立私有属性
2. 缺点:
          => 没有自己的原型
          => 多一套属性, 虽然没有值, 但是多出来了

 // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子类
    function Student(gender, name, age) {
      // 利用借用继承继承属性
      Person.call(this, name, age)

      this.gender = gender
    }

    // 利用原型继承继承方法(属性和方法都能继承)
    Student.prototype = new Person()

    const s = new Student('男', 'Jack', 18)
    console.log(s)
    s.sayHi()

六、拷贝继承

1.in 关键字的作用
          => 语法: ‘key’ in 对象
          => 得到结果: 一个布尔值
          -> true, 表示该 key 在该对象的原型链上(可能是自己的属性, 也可能是原型上的属性)
          -> false, 表示该 key 在该对象的整个原型链上查找不到

  1. hasOwnProperty()
              => 语法: 对象.hasOwnProperty(‘key’)
             => 返回值: 一个布尔值
              -> true, 表示该 key 是该对象自己本身的属性
             -> false, 表示该 key 不是该对象自己本身的属性

  2. 拷贝继承 / for in 继承
             + 核心: 利用 in 关键字可以遍历到自己和原型上的成员
              + 把父类实例的所有内容, 遍历一份到子类的原型上

    // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子类
    function Student(gender) {
      this.gender = gender
    }
    Student.prototype.study = function () { console.log('学习中...') }

    // 准备一个子类的实例
    const p = new Person('Jack', 18)
    // 遍历父类的实例
    for (let k in p) {
      Student.prototype[k] = p[k]
    }

    const s = new Student('男')
    console.log(s)

七、组合继承2 (借用继承 和 拷贝继承)

结合了 借用继承 和 拷贝继承的一部分 实现的继承方案
1.出发点
         => 没有自己的私有属性, 利用 借用继承
         => for in 的遍历和属性不可改, 在书写构造函数的时候, 原型上写的是方法, 构造函数体内写的是属性
         -> 如果我的 for in 不去继承属性
         -> 之继承原型上的方法

 // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子类
    function Student(gender, name, age) {
      // 利用借用继承继承属性
      Person.call(this, name, age)

      this.gender = gender
    }
    Student.prototype.study = function () { console.log('学习中...') }

    // 子类的原型继承父类的原型
    // 利用 for in 循环只从 父类.prototype 开始遍历
    for (let k in Person.prototype) {
      Student.prototype[k] = Person.prototype[k]
    }

    const s = new Student('男', 'Jack', 18)
    console.log(s)

八、寄生继承

    // 寄生式组合继承(完善)
    // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }
    // 子类
    function Student(gender, name, age) {
      // 利用借用继承继承属性
      Person.call(this, name, age)
      this.gender = gender
    }
    // -----------------------------------------------
    ; (function () {
      // 把 寄生继承 和 借用继承 完美结合
      function Third() { }
      // 2. 利用赋值操作, 让 Third 的 原型 等于 父类的原型
      Third.prototype = Person.prototype
      // 3. 利用原型继承, 让 Student 继承 Third
      Student.prototype = new Third()
      // 因为没有constructor所以自己补了一个
      Student.prototype.constructor = Student
    })()
    // -----------------------------------------------
    Student.prototype.study = function () { console.log('学习中...') }


    const s = new Student('男', 'Jack', 18)
    console.log(s)

九、ES6 的类继承

1.需要用到 extends 关键字
         => 语法: class 子类 extends 父类 {}
2.需要用到 super 关键字(超类)
          => 需要在子类的 构造器(constructor) 内调用使用
          => 注意: 需要调用在 this.xxx 的前面

 // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 子类
    // 创建一个继承自 Person 的 Student 类
    class Student extends Person {
      constructor (gender, name, age) {
        // super 等价于原先的 借用继承
        super(name, age)

        this.gender = gender
      }

      study () { console.log('学习中...') }
    }


    const s = new Student('男', 'Jack', 18)
    console.log(s)
Woli美美啊
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript中继承用法实例分析
10-24
主要介绍了JavaScript中继承用法,以实例形式较为详细的分析了javascript实现继承的相关技巧,需要的朋友可以参考下
利用javascript中的call实现继承
10-31
总结来说，利用JavaScript中的`call`方法实现继承，主要是通过在子类构造函数内部调用父类构造函数，改变`this`的指向，从而将父类的属性和方法复制到子类实例上。这种方式灵活且易于理解，是JavaScript中实现继承的...
JavaScript中的继承
最新发布
qq_45941368的博客
06-19 472
需要根据具体的需求和情况来选择适合的继承方式，构造函数继承在某些场景下可能更适合，特别是需要独立的属性和方法，并且需要传递参数或实现多继承的情况。结合了原型链继承和构造函数继承的优点：通过原型链继承，可以实现属性和方法的复用；需要根据具体的需求和情况来选择适合的继承方式，组合继承在大多数情况下是一种常用且灵活的继承模式，能够较好地解决原型链继承和构造函数继承的问题。子类与父类的原型链相互独立：子类对象的原型既包含父类构造函数的原型，也包含子类特有的属性和方法，可以实现对父类原型上方法的重写和扩展。
JavaScript继承
m0_61480985的博客
11-28 1567
寄生组合继承存在效率问题，最主要的效率问题是父类构造函数始终被调用两次，一次是在创建子类原型时调用，另一次是在子类构造函数中调用，本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行的时候重写自己的原型就可以了。把子类的原型对象指向父类，就能使用父类中的方法和属性了。采用原型式继承不自定义类型，临时创建一个构造函数，借助已有的对象作为临时构造函数的原型，然后在此基础实例化对象，并返回。继承就是指一个子类继承父类的属性和方法，使得子类对象（实例化对象）具有父类的方法和属性。
js常见的六种继承方式
weixin_46369590的博客
03-29 864
然后，createObject函数通过增强新对象的方式，在新对象上添加了sayName方法，从而实现继承和增强。然后，将子类的原型设置为临时构造函数的实例，从而实现了对父类原型的继承。寄生组合式继承是指通过借用构造函数来继承实例属性，然后通过将原型设置为一个继承父类原型的实例来继承父类原型上的属性和方法。这种方式的缺点是所有新对象的实例属性都会共享obj对象的属性，导致无法实现真正意义上的继承。原型式继承是指通过使用一个已有的对象作为新对象的原型来创建新对象，从而实现继承。，从而创建了一个新的对象，并将。
JavaScript如何实现继承？
pakerder的博客
10-03 1410
由于通过原型链层层遍历可能带来性能问题，当试图访问不存在的属性时，会遍历整个原型链。在原型链上查找比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。因此，我们在设计对象的时候，要注意原型链的长度。除了通过原型链的方式实现JavaScript的继承，JavaScript中实现继承的方式还有：其中，原型链继承方式中引用类型的属性被所有实例共享，无法做到实例私有；经典继承方式可以实现实例属性私有，但要求类型只能通过构造函数来定义虽然继承的方式有很多种，但实际上都离不开原型对象与原型链的内容。
javascript中继承的几种方式
m0_63153901的博客
06-12 3902
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。通过实例化一个函数使子类的原型指向父类的实例，子类就可以调用到父类的属性和方法。代码实现如下： 要注意的问题 1.不要忘记默认的类型： 在js中所有的引用类型都继承了Object，而继承也是通过原型链实现的。所有存在于Object原型对象上的方法同样也存在。比如：hasOwnProperty()、toString(
JavaScript中的继承方式详解
10-24
原型链继承是JavaScript中最基本的继承方式，它利用了原型（prototype）的概念。每个JavaScript对象都有一个`__proto__`属性，它指向创建该对象的构造函数的原型。当试图访问一个对象的属性时，如果该对象本身没有...
JavaScript中的类继承
12-02
JavaScript Inheritance ...And you think you’re so clever ...JavaScript的原型继承比类继承有更强大的表现力，现在就让我们来看看。 Java JavaScript 强类型 弱类型 静态 动态 基于类 基于原型 类
javascript4种方法实现继承
Abudula__的博客
03-04 261
有几种实现继承的方式，以下给予总结. 1.打通原型链 function Person(name,age){ this.name=name; } Person.prototype.sayName=function(){ console.log(this.name); } function Programmer(job){ this.job=job; } Programmer.protot...
JavaScript学习之三 — JavaScript实现继承的7种方式
03-20
NULL 博文链接：https://yueyemaitian.iteye.com/blog/785325
Javascript实现继承的6种方式
博勋的博客
08-06 4857
一.类式继承 简介：将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。 //1.类式继承 //声明父类 function SuperClass() { this.superValue = true; } //为父类添加公有方法 SuperClass.prototype.getSuperValue = function () {
js的拷贝继承的两种方式
Scrow1204的博客
11-18 467
要点： 1.通过改变新实例对象的指针指向被继承的实例对象的地址，达到继承的效果 2.通过遍历复制前一个对象的属性和方法达到拷贝的效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</t
javascript的几种继承方式
吴佳陶的博客
06-16 480
通过继承，子类可以继承并使用父类的属性和方法。提高代码的复用。js继承主要是对构造函数和原型属性的继承。本文描述几种继承方式：原型链继承、组合继承、寄生组合式继承
【JavaScript】来唠一唠JavaScript中的继承
qq_53715003的博客
11-01 191
JS的继承方式可以说是五花八门，好多小伙伴都不能系统地将其讲解出来。所以今天我们就来唠一唠这个JS的继承方式。
JavaScript继承(六种方式)（一）
10-21 771
前言：大多OO语言都支持两种继承方式： 接口继承和实现继承 ，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠 原型链 来实现。 1.原型链 基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。 构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向
详细讲解JavaScript继承
L1780105381的博客
02-27 552
JavaScript继承的常见四种方式（包含ES6） 四种继承方式 构造函数 原型链 构造函数+原型链 ES6类实现继承 构造函数实现继承 function Parent(){ this.name = "Parent" } function Child(){ Parent.call(this) this.type = "child的属性" } console.log(new Child) 在子类构造函数中写了Parent.call(this)指让Parent的构造函数在Chi
JS继承的6种方式
hhthwx的博客
09-26 7285
JS实现继承的集中方式逛了一圈博客，对JS继承的集中方式进行总结 在实现继承之前，先定义一个父类，并且对属性进行约定function Fun(){ //私有属性 var val = 1;//私有属性 var arr = [1];//私有引用属性 function fun(){} //私有函数（引用属性） //实例属性 this.val = 1; //实例基本属性 this.arr = [1];
js中的继承与原型链1
08-08
在JavaScript中，继承是一个重要的概念，它允许一个对象获取另一个对象的属性和方法。继承使得代码重用变得更加容易，同时也使得代码更加可靠和易于维护。JavaScript中的继承是通过原型链来实现的。 原型链是一种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Woli美美啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值