JavaScript全解析-继承

最新推荐文章于 2024-10-18 11:12:30 发布
最新推荐文章于 2024-10-18 11:12:30 发布
阅读量224 收藏
点赞数
分类专栏： JavaScript全解析专栏 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longz_org_cn/article/details/130760274
版权
文章详细介绍了JavaScript中几种继承的方式，包括原型继承、借用构造函数继承、组合继承、ES6的类继承以及拷贝继承、寄生式继承和冒充式继承。每种方式都有其优缺点，例如原型继承能继承属性但属性不在实例本身，而借用构造函数继承则可使属性在实例上但无法继承原型方法。ES6的类继承提供了更规范的语法来实现继承。
摘要由CSDN通过智能技术生成

继承

 

 

●要知道什么是继承
●要知道继承的方式有哪些
●每种的继承方式是如何实现的
什么是继承
●继承关系出现在构造函数和构造函数之间
●当构造函数A 的实例使用了 构造函数B 的属性和方法
●我们就说 构造函数A 继承自 构造函数B
○管 构造函数A 叫做子类
○管 构造函数B 叫做父类
●总结 ：继承就是获取存在对象已有属性和方法的一种方式

function Person(name, age) {
      this.name = name
      this.age = age
    }

    Person.prototype.play = function () { console.log('玩游戏') }

    // 将来我创建的 Person 的实例, 就会出现两个属性一个方法
    const p = new Person('Jack', 18)
    console.log(p)

    function Student(classRoom) {
      this.classRoom = classRoom
    }

    // 将来我创建的 Student 的实例
    // 当我的 s 实例能使用 name 属性, age 属性 和 play 方法的时候
    // 我们就说 Student 构造函数继承自 Person 构造函数
    // Student 就是 子类
    // Person 就是 父类
    const s = new Student(2114)
    console.log(s)


复制代码

文章底部扫码，免费领取web前端资料大礼包！

继承的方式有哪些
原型继承
●核心: 让子类的原型指向父类的实例
●优点:
○父类构造函数体内的属性和原型上的方法都可以实现继承
●缺点:
○继承下来的属性不在自己身上, 在自己的原型上
○一个构造函数的实例, 需要在两个地方传递参数
○所有子类的实例, name 和 age 一模一样

<script>
    // 父类
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.play = function() {
        console.log('玩游戏')
    }
    // 子类
    function Student(classRoom) {
        this.classRoom = classRoom
    }
    // 实现继承
    const p = new Person('Jack', 18)
    Student.prototype = p
    //  此时 s 的 __proto__ 指向谁 ?
    //  指向所属构造函数的 prototype
    //  因为 Student.prototype 就是 就是 Person 的实例
    //  s 的 __proto__ 就是 Person 的实例
    const s = new Student(2114)
    console.log(s)
    // 当你访问 s 的 classRoom 成员的时候
    // 自己有直接使用
    console.log(s.classRoom)
    // 当你访问 s 的 name 成员的时候
    // 自己没有, 去到自己的 __proto__ 上查找
    // 因为自己的__proto__ 就是 Person 的实例
    // 其实就是去到 Person 的实例上查找
    console.log(s.name)
    // 当你访问 s 的 play 成员的时候
    // 自己没有, 去到自己的 __proto__ 上查找
    // 也就是去到 Person 的实例上查找, 发现还是没有
    // 就再去 __proto__ 上查找
    // 自己的 __proto__ 的 __proto__
    // Person 实例      的 __proto__
    // Person 实例 的 __proto__ 就是 Person.prototype
    s.play()
    const s2 = new Student(2115)
    console.log(s2)
</script>


复制代码

借用构造函数继承
●核心: 把父类构造函数当做普通函数调用, 并且改变其 this 指向
●优点:
○子类的所有继承下来的属性都在自己身上
○子类的所有参数在一个地方传递
○子类的所有实例都可以给继承下来的属性赋不一样的值
●缺点:
○父类的原型上的方法没有继承下来


  // 父类
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.play = function() {
        console.log('玩游戏')
    }
    // 子类
    function Student(classRoom, name, age) {
        this.classRoom = classRoom
        // 实现继承
        Person.call(this, name, age)
    }
    const s = new Student(2114, 'Jack', 18)
    console.log(s)
    const s2 = new Student(2115, 'Rose', 20)
    console.log(s2)


复制代码

组合继承
●核心: 把原型继承和借用构造函数继承放在一起使用
●优点:
○都能继承下来
○属性在自己身上, 每一个子类实例继承的属性值都可以不一样
●缺点:
○子类的原型上多了一套属性


<script>
    // 父类
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.play = function() {
        console.log('玩游戏')
    }
    // 子类
    function Student(classRoom, name, age) {
        this.classRoom = classRoom
        // 借用继承
        // 目的: 把属性继承在自己身上
        Person.call(this, name, age)
    }
    // 原型继承
    // 目的: 继承父类原型上的方法
    Student.prototype = new Person()
    // 创建子类的实例
    const s = new Student(2114, 'Rose', 20)
    console.log(s)
</script>


复制代码

ES6类继承
●类的继承是ES6中提出的一种继承方式
●这个继承有了语法的规定，必须要按照这样的方式来继承
●类的继承的实现： 两个步骤实现继承
○书写子类的时候, 加上 extends 关键字
■class 子类 extends 父类 {}
■目的: 继承父类原型上的方法
○在子类的 constructor 内书写 super()
■super(实参)
■目的: 继承父类的属性
●注意：
○必须要书写 super 和 extends
○在子类的 constructor 内 super 必须写在 this.xxx 的前面(最前面)
●父类可以是构造函数，但是子类不能的构造函数因为extends和super关键字就是给类设计的


<script>
    // 父类
    class Person {
        constructor(name, age) {
            this.name = name
            this.age = age
        }
        play() {
            console.log('玩游戏')
        }
    }
    // 父类
    // function Person(name, age) {
    //   this.name = name
    //   this.age = age
    // }
    // Person.prototype.play = function () { console.log('玩游戏') }
    // 子类
    class Student extends Person {
        constructor(classRoom, name, age) {
            super(name, age)
            this.classRoom = classRoom
        }
        study() {
            console.log('学习')
        }
    }
    const s = new Student(2114, 'Jack', 18)
    console.log(s)
    class Teacher extends Person {
        constructor(gender, name, age) {
            super(name, age)
            this.gender = gender
        }
    }
    const t = new Teacher('男', 'Jack', 20)
    console.log(t)
</script>


复制代码

文章底部扫码，免费领取web前端资料大礼包！

拷贝继承
●利用 for in 循环遍历对象
●把所有的内容复制一份放在子类的原型上


   // 书写 for in 循环的时候, 不光可以遍历到对象自己身上的属性, 也可以遍历到原型上的属性
    // 父类
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 创建一个父类的实例
    // const p = new Person('Jack', 18)
    // console.log(p)
    // for (let k in p) {
    //   console.log(k)
    // }

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

      // 创建一个父类的实例
      const p = new Person(...arg)
      // 利用 for in 循环继承
      for (let k in p) {
        // 随着循环, k 分别是 name age 和 sayHi
        Student.prototype[k] = p[k]
      }
    }

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


复制代码

寄生式继承

   /*
      寄生式继承1

    */

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

    // 子类
    //   构造函数内不要写 return
    function Student() {
      // 直接在子类里面 return 一个父类的实例
      const p = new Person('Jack')
      return p
    }

    // 创建一个子类的实例
    // 看似得到的是 Student 的实例, 但是其实得到的还是 Person 的实例
    const s = new Student()
    console.log(s)
    
    
    
       /*
      寄生式继承2 - 对寄生式继承1 的 改造
    */

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

    // 子类
    //   构造函数内不要写 return
    function Student(gender) {
      this.gender = gender
    }

    // 寄生一下 父类的原型
    // Student的原型指向 Person的原型
    Student.prototype = Person.prototype

    // 创建一个子类的实例
    // Student 自己没有原型使用了, 直接使用 Person 的原型
    const s = new Student('男')
    console.log(s) 
    
    
    
        // 寄生式组合继承

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


    // 实现继承
    //   借助一个第三方构造函数
    function Third() {}
    //   第三方构造函数去继承 父类
    //   利用寄生继承的方式来实现
    // 第三方的 原型 指向 父类的原型
    Third.prototype = Person.prototype
    // 将来我使用第三方创建实例的时候
    const t = new Third()

    // 子类
    function Student(...arg) {
      // 利用 call 继承
      Person.call(this, ...arg)
    }
    // 子类去想办法继承第三方的内容
    //   利用原型继承去继承第三方内容
    //   子类的原型指向第三方的实例
    Student.prototype = new Third()
    const s = new Student('Jack', 18)
    console.log(s)


    // 利用了一个自执行函数
    // 自执行函数, 不需要名字的函数
    ;(function () {
      var a = 100
      console.log('你好 世界')
    })()


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

      Person.call(this, ...arg)
    }

    // 把 第三方内容 放在自执行函数内
    (function () {
      function Third() {}
      Third.prototype = Person.prototype
      Student.prototype = new Third()
    })()

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



复制代码

文章底部扫码，免费领取web前端资料大礼包！

冒充式继承


    /*
      冒充继承
        + 利用了一个浅拷贝 + 寄生继承
    */

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

    const p = new Person('Jack', 18)

    // 寄生继承
    function Student(gender) {
      this.gender = gender

      // 创建完毕实例以后, 拷贝一个父类的实例
      Object.assign(this, p)
    }
    Student.prototype = Person.prototype

    const s = new Student('男')


    console.log(s)

 

 如果上面的文章看着比较枯燥，点击下面的链接直接观看：

千锋教育JavaScript全套视频教程（10天学会Js，前端javascript入门必备）

 

 也可以扫码直接观看视频哦！绝对的干货满满，更多精彩视频B站搜索“千锋教育” 

 

 

 

千锋IT教育
关注
专栏目录
JavaScript详细解析
Junsunnyl的博客
09-20 2万+
文章目录1、JavaScript详细解析1.1、JavaScript介绍1.2、快速入门引入js的方式一：内部方式引入js的方式一：外部方式1.3、开发环境搭建1.4、快速入门总结2、JavaScript基本语法2.1、注释2.2、输入输出语句2.3、变量和常量2.4、原始数据类型和typeof方法2.4.1、原始数据类型2.4.2、typeof2.5、运算符2.6、流程控制和循环语句2.7、数组2.8、函数2.9、小结3、JavaScript DOM3.1、DOM介绍3.2、Element元素的获取操作3
JavaScript全讲-架构原则解析
Aric_Chen的专栏
02-27 9811
由于最近一直在忙，很久没有更新，见谅。 上篇我们讲完JavaScript函数式编程的特性，今天我们就来聊聊JavaScript中的架构。 提到JavaScript架构，很多人会觉得不可思议，因为架构多是针对类似Java这种强语言，而JavaScript一直被看成是弱语言，它有设计模式，可以用来构建架构吗？ 答案无疑是肯定的！ 设计模式本身是一种
JavaScript状态模式及状态机模型及javascript-state-machine用法和源码解析
u011675037的博客
04-20 6288
JavaScript状态模式及状态机模型这是一篇，我自己都看不完的文章…文章大体就两部分： 状态模式的介绍 状态机模型的函数库javascript-state-machine的用法和源码解析 场景及问题背景：我们平时开发时本质上就是对应用程序的各种状态进行切换并作出相应处理。最直接的解决方案是将这些所有可能发生的情况全都考虑到，然后使用if… ellse语句来做状态判断来进行不同情况的处理。但是对复
javascript面试题--持续更新
jyl919221lc的博客
05-13 3789
事件代理（），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒可以实现当新增子对象时无需再次对其绑定。
JavaScript -- this详解
qq_48113035的博客
04-01 3176
一、第一章：关于this 1.两个误解 ●this指向函数自身 ●this指向函数的作用域 2.this究竟是什么？ this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。 二、第二章：this全面解析 1.调用位置 最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的 调用位置就在当前正在执行的函数的前一个调用中。 2.绑定规则 (1)默认绑定 (2)
JavaScript: 原型链继承(原理解析 + 代码实现 + 结构图解)
技术圈
03-22 2287
原型链是实现继承的一种基础方式，是原型搜索机制的扩展。本文以基本原理，代码实现，结构图解三种方式诠释，无论基础如何，都能通过本文对js原型链继承达到更深入的理解。
前端 JavaScript 设计模式--搭建开发环境
黑木令之佛性
01-05 993
本章节的主要内容是–搭建开发环境 因为所涉及到的知识点包含ES6语法, 也为了我们的执行效率更高所以我们搭建一套自己需要的开发环境。 如图所示: 知识点大纲 1. 搭建开发环境 2. 什么是面向对象 3. UML 类图 搭建开发环境 1. 初始化 npm 环境 。 2. 安装 webpack 。 3. 安装 webpack-dev-server 。 4. 安装 babel (解析 ES6 语法)。 细节知识点: --save-dev: 1. 标识文件除了安装以外, 还要在 package.jso
JavaScript 原型链和继承面试题
木木木森林
10-29 3274
JavaScript 原型链和继承问题 JavaScript 中没有类的概念的，主要通过原型链来实现继承。通常情况下，继承意味着复制操作，然而 JavaScript默认并不会复制对象的属性，相反，JavaScript只是在两个对象之间创建一个关联（原型对象指针），这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。 原型 当我们 new 了一个新的对象实例，明明什么都没有做，就直接可以访问 toString 、valueOf 等原生方法。那么这些方法是从哪里来的
JavaScript实现继承
World11_的博客
04-26 1034
面向对象三大特征——封装、继承、多态 封装：通过修饰符对其成员访问权限进行限制。 其中修饰符指外部、父子本类 public；本类、子类 protected；私有 private。 继承：一个类（子类、派生类）继承了其另一个类（父类）。 多态：对象多种形态。 接下来要解析的是JavaScript实现继承的多种方式。 方式一 function Person() { this.name = '王' } function Parent() { this.na
JavaScript --- Map集合结构详解
明月如霜丶
11-06 5846
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 iterable 对象，其元素或为键值对，或为两个元素的数组。 每个键值对都会添加到新的 Map。null 会被当做 undefined。 描述 一个Map对象以插入顺序迭代其元素 — 一个 for…of 循...
javascript关于继承解析
11-22
JavaScript中的继承是面向对象编程的重要概念，它允许创建基于现有对象的新对象，这些新对象能够继承已有对象的属性和方法。在JavaScript中，有多种继承方式，包括组合继承、原型式继承、寄生式继承以及寄生组合式...
javascript-高性能javascript模版引擎-templateEngine.zip
02-10
1. **编译预处理**：将模板预先编译为JavaScript函数，运行时只需执行函数，减少解析和字符串操作的时间。 2. **缓存优化**：对于重复使用的模板，缓存编译后的结果，避免重复编译。 3. **异步加载**：在非关键路径...
javascript-essence-tutorial-master
03-13
- 继承：JavaScript使用原型链实现继承，原型对象可以扩展实例的方法和属性。 - 类：ES6引入了类的概念，但实质上仍然是基于原型的面向对象。 4. 异步编程 - 回调函数：JavaScript的异步基础，用于处理耗时操作...
javascript-frame-lib-analyse:翻译一些javascript的原始码，希望大家一起来解析原始码
03-24
3. **面向对象编程**：许多JavaScript库和框架使用面向对象编程思想，例如类、继承和封装。熟悉这些概念有助于理解框架如何组织和管理代码。 4. **事件驱动与异步编程**：JavaScript在浏览器环境中主要是事件驱动的...
JS-常用功能
最新发布
qq_40950398的博客
10-18 199
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 763
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 758
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 862
请联系我获取更详细的演示视频。
Js面向对象
sdgfafg_25的博客
10-16 1075
程序就是对现实世界的抽象,一个事物抽象到程序中后就变成了对象,在程序的世界中，一切皆对象面向对象的编程指，程序中的所有操作都是通过对象来完成做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作一个事物通常由两部分组成：数据和功能一个对象由两部分组成：属性和方法事物的数据到了对象中，体现为属性事物的功能到了对象中，体现为方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值