js中的继承方式

最新推荐文章于 2023-05-04 17:17:00 发布
最新推荐文章于 2023-05-04 17:17:00 发布
阅读量209 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26443535/article/details/110425840
版权

文章目录

js中继承的实现主要是通过原型链实现的，下面就一起来一下实现继承的方式吧（继承也是面试中常被问到的一个点哦）

原型链继承

  • 将父类的实例作为子类的原型实现继承

        function SuperType(){
      this.property = true;
    }
    SuperType.prototype.getSuperValue = function(){
      console.log(this.property);
    }
    function SubType(){
      this.subProperty = false;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function(){
      console.log(this.subProperty);
    }
    let sub = new SubType();
    console.log(sub);

    在这里插入图片描述

  • 特点：1）很纯粹的继承，实例是子类的实例，也是父类的实例

  • 缺点：

    • 1）父类的实例属性变成了子类的原型属性，由于原型属性是共享的，一个实例修改了原型属性，会造成其它实例的原型也被修改，如下：
    • 2）子类型在实例化时不能给父类型的构造函数传参
        function SuperType(){
      this.colors = ['red', 'blue'];
    }
    function SubType(){
    }
    SubType.prototype = new SuperType();
    let instance1 = new SubType();
    instance1.colors.push('black');
    console.log(instance1.colors);  // ["red", "blue", "black"] 
    let instance2 = new SubType();
    console.log(instance2.colors);  // ["red", "blue", "black"]

盗用构造函数

  • 通过call在子类函数中实现父类函数的自执行

        function SuperType(name){
      this.colors = ['red', 'blue'];
      this.name = name;
    }
    function SubType(name){
      SuperType.call(this, name);
    }
    let instance1 = new SubType('Zhang');
    instance1.colors.push('black');
    console.log(instance1);  // ["red", "blue", "black"] 
    let instance2 = new SubType('Li');
    console.log(instance2);  // ["red", "blue"]

    在这里插入图片描述

  • 特点：

    • 1）继承了父类构造函数的属性，无法继承父类原型上的属性
    • 2）可以给父类构造函数进行传参
    • 3）可以继承多个构造函数的属性（call多个）

  • 缺点：

    • 1）必须在构造函数中定义方法，因此函数不能复用
    • 2）每个新实例都有父类构造函数的副本，臃肿
    • 3）子类不行访问父类原型上定义的方法

组合继承（结合原型链和盗用构造函数）

  • 使用原型链继承原型上的属性和方法

  • 通过盗用构造函数继承实例属性

        function SuperType(name){
      this.colors = ['red', 'blue'];
      this.name = name;
    }
    SuperType.prototype.sayName = function(){
      console.log(this.name)
    };
    function SubType(name, age){
      SuperType.call(this, name);
      this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.sayAge = function(){
      console.log(this.age);
    }
    let instance1 = new SubType('Zhang',2);
    instance1.colors.push('black');
    console.log(instance1);  // ["red", "blue", "black"] 
    let instance2 = new SubType('Li', 3);
    console.log(instance2);  // ["red", "blue"]

    在这里插入图片描述

  • 特点：组合继承弥补了原型链和盗用构造函数的不足，是js中使用最多的继承模式

  • 缺点：调用了两次父类构造函数（耗内存）

原型式继承

  • 借助原型，基于已有的对象创建并返回新的对象。本质上，object函数是对穿传入的对象执行了一次浅复制；

  • ECMAScript 5通过增加Object.create方法将原型式继承的概念规范化了

        function object (o){
      function Fn(){}
      Fn.prototype = o;
      return new Fn();
    }
    let person = {
      name: 'Nicholes',
      friends: ['Court', 'Van']
    }
    let anotherPerson = object(person);
    anotherPerson.name = 'Greg';
    anotherPerson.friends.push('Rob');

    let yetAnotherPerson = object(person);
    yetAnotherPerson.name = 'Linda';
    yetAnotherPerson.friends.push('Barbie');
    console.log(anotherPerson, yetAnotherPerson);

    在这里插入图片描述

  • 特点： 类似于将一个对象浅复制，适用于不需要单独创建构造函数，但仍需要在对象间共享信息的场合

  • 缺点：属性中包含的引用值始终会在相关对象间共享，跟使用原型模式是一样的

寄生式继承

  • 创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，然后返回这个对象
    function object (o){
      function Fn(){}
      Fn.prototype = o;
      return new Fn();
    }
    function createAnother(original){
      let clone =object(original);  // 通过Object.create创建一个新对象
      clone.sayHi = function(){   // 以某种方式增强这个对象
        console.log('hi');
      }
      return clone;
    }
    let person = {
      name: 'Nicholes',
      friends: ['Court', 'Van']
    }
    let anotherPerson = createAnother(person);
    console.log(anotherPerson);
    anotherPerson.sayHi();

在这里插入图片描述

  • object() 函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用
  • 缺点：通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

寄生式组合继承

  • 即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法；
  • 这里只调用了一次 SuperType 构造函数，避免了 SubType.prototype 上不必要也用不到的属性，因此可以说这个例子的效率更高。寄生式组合继承可以算是引用类型继承的最佳模式；
    function object (o){
      function Fn(){}
      Fn.prototype = o;
      return new Fn();
    }
    function inheritPrototype(subType, superType) {
      let prototype = object(superType.prototype); // 创建对象
      prototype.constructor = subType; // 增强对象
      subType.prototype = prototype; // 赋值对象
    }
    function SuperType(name) {
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function() {
      console.log(this.name);
    };
    function SubType(name, age) {
      SuperType.call(this, name);
      this.age = age;
    }
    inheritPrototype(SubType, SuperType);
    SubType.prototype.sayAge = function() {
      console.log(this.age);
    };
    let sub = new SubType('Anna', 18);
    console.log(sub);

在这里插入图片描述

class实现继承

  • Class通过 extends 关键字实现继承
  • super 在这里作为函数调用，表示父类的构造函数，用来新建父类的this对象
    class SuperType{
      constructor(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
      }
      sayName(){
        console.log(this.name);
      }
    }
    class SubType extends SuperType{
      constructor(name, age) {
        super(name);
        this.age = age;
      }
      sayAge(){
        console.log(this.age);
      }
    }
    let sub = new SubType('Anna', 18);
    console.log(sub);

在这里插入图片描述

文章参考：
JS中原型式和寄生式继承的详解（代码示例）
js 总结ES6中Class以及继承
JavaScript高级程序设计（第4版）

ZjSj0812
关注
专栏目录
js实现父子类集成的方法
cyssxt的博客
02-21 663
//属性拷贝 function cpProperties(src,desc){     for(var key in src){         if(src.hasOwnProperty(key)){             desc[key] = src[key];         }     } } var Base = function(option) {     cpP
浅谈js中的三种继承方式及其优缺点
10-21
JavaScript 是一种动态类型的脚本语言，它在面向对象编程中提供了多种实现继承的方式。这篇文章将深入探讨 JavaScript 中的三种主要继承方法：`prototype`、`apply` 和 `call` 结合 `prototype` 的方式，以及它们...
js继承的几种方式
lianwenxiu的博客
02-25 153
1. 原型链式继承 即 子构造函数.prototype = ne 问题：不能给父构造函数传递参数，改变子级构造函数里的对象时，父级也会跟着改变，父子构造函数的原型对象之间有共享问题。 2. 借用构造函数继承 数() 注意：使用call和apply借用其他构造函数的成员, 可以解决给父构造函数传递参数的问题, 但是获取不到父构造函数原型上的成员。 3. 组合式继承 借用构造函数...
js实现继承的五种方法及原型的继承关系
开心学前端 : )
11-14 1027
继承是javascript中实现代码复用的一种方式，也能绑定对象或者函数之间的关系 为什么要继承 比如以下代码，Person、Student和Teacher构造函数，可以发现他们有一些特征 Person和Student都有姓名、年龄的属性和吃的方法，但Student还有学号、分数的属性和学习的方法 Person和Teacher都有姓名、年龄的属性和吃的方法，但Teacher还有教学的方法 function Person(name, age) { this.name = name this.a.
js继承语法详解
yaoqianss的博客
07-07 307
什么是继承? 继承是发生在父子级关系中的现象 继承 是 构造函数 的高级应用 就是两个互为父子级关系的构造函数的应用 子级构造函数,继承的是父级构造函数的属性和方法 常见的继承操作,分为 ES5 的继承语法 和 ES6 的继承语法 ES6 的继承语法 // 如何定义一个构造函数 // ES5语法 // function Fun1(name,age){ // // 定义属性 /
JavaScript高级教程-继承
qq_36973122的博客
07-01 435
JavaScript高级教程-继承
Javascript编程中几种继承方式比较分析
10-23
在探讨JavaScript编程中继承方式的比较分析之前，首先需要理解继承的概念及其在面向对象编程中的...通过这些继承方式的比较分析，我们可以更深入地理解JavaScript继承的原理和技巧，进而在开发中做出更合适的设计决策。
实现JavaScript中继承的三种方式
10-29
在原型链继承中，子类型的原型对象指向父类型的实例，从而使得子类型的实例可以继承父类型原型上的属性和方法。原型链继承允许子类型访问父类型的实例属性和方法，这在JavaScript中是通过设置子类型的prototype指向...
JavaScript中的继承方式详解
10-24
在JavaScript中，继承主要通过两种方式实现：原型链继承和类式继承。这两种方式并不是孤立存在的，它们经常被组合使用以达到更灵活的继承效果。 首先，我们需要理解继承的概念。在JavaScript中，继承允许一个对象...
记录-对象有哪些继承方式
最新发布
林恒的博客
05-04 435
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 1. 原型链 温故而知新： 构造函数、原型和实例的关系：  每个构造函数都有一个原型对象，原型有一个属性指回构造函数，实例有一个内部指针指向原型。 思考：如果原型是另一个类型的实例呢？  那就意味着这个原型本身有一个内部指针指向另一个原型，相应的另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是...
js中extends使用和原理
蔡姐的博客
05-02 6346
开始先推荐一篇文章,将js的继承讲述的特别全面,我就是取里面的结论,方面日后查阅 Javascript如何实现继承？ 一.继承的使用方法 js里面常用的就是extends,使用方式如下: class Father { constructor(name) { this.name = name } // 原型方法 // 即 Person.prototype.getName = function() { } // 下面可以简写为 getName() {...}
new fn() 做了什么
weixin_34062469的博客
03-25 601
1. 函数的多重用途 函数可以搭配new使用，函数内部的this会指向一个新对象，最终函数会返回这个新对象 function fn(){ this.count = 1 } const obj = new fn() // {count: 1} fn() // undefined 全局对象上会添加一个属性count，值为 1 复制代码 js函数有两个不同的内部方法：[[Call]]和[[...
js中使用extends实现子类继承父类
weixin_30569001的博客
07-14 2752
//1.父类 ，可以直接理解成原型对象 protorype class persons { constructor(name,age) { this.name = name; this.age = age; } } //2.子类，在class类中使用ex...
js中extends方法
weixin_30294295的博客
12-10 760
一、jQuery extend方法介绍 jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样； 且看官方给出解释： jQuery.extend(): Merge the contents of two or more objects together into the ...
JS继承的几种方式
Servenity
05-14 864
一、属性拷贝 就是将对象的成员复制一份给需要继承的对象 // 创建父对象 var superObj = { name: 'Li', age: 25, friends: ['小明', '小李', '小赵'], showName: function(){ alert(this.name); } } // 创建需要继承的子对象 var subObj = {}; //...
js构造函数（继承方法及利弊）
weixin_33694172的博客
07-26 1134
js构造函数 *前言：上篇文章介绍了js中通过构造函数来实例化对象的各种方法js构造函数，这篇文章主要介绍构造函数的继承（类的继承），同样包括 ES5 和 ES6 两部分的介绍，能力所限，文中难免有不合理或错误的地方，还望各位大神批评指正~ 原型 首先简单介绍一下实例属性/方法 和 原型属性/方法，以便更好理解下文 function Pe...
JS继承
hangzhang
11-11 8515
最近在面试中被问到js的继承，当时回答的不太好，所以今天特别总结一下。 我们先来看一个基于原型链的继承 //父类 function Person(){} //子类 function Student(){} //继承 Student.prototype = new Person(); 我们只要把子类的prototype设置为父类的实例，就完成了继承，也就是js里面的原型链继承。 接...
js递归解决父子关系问题
Mybells
07-12 1318
最近碰到的一个需求，记录下。 问题是：如图所示，要给策略六所在行编辑的时候选择一个父策略，父策略下拉框数据要求来自列表授权策略名称列。 限制条件是：不能是自身（这里也就是策略六），授权策略名称所在行的父策略不能是自身，同时要满足继承关系。（比如说： 第三行中策略六是策略一的父策略，第一行中策略一又是策略五的父策略，那么策略五也就不能成为选择项） 将上列表可以转换为流程图： 策略四策略五策略一策略...
前端面试需掌握的知识点
Coloryi的博客
04-16 635
目录 1、原型链的理解 2、闭包 3、手写实现call、apply和bind 4、new的原理 5、深拷贝和浅拷贝 6、js继承 7、前端性能优化 一、原型链的理解 在谈原型链之前，我们需要掌握一些知识，如下所示： 1、js对象分为普通对象和函数对象（object和Funct...
Prototypejs中的JavaScript继承解析
"本文主要探讨了Prototypejs框架中JavaScript继承的实现方式，通过源码解析和实例演示，帮助读者理解JavaScript继承的基本概念和Prototypejs的实现机制。" 在JavaScript中，继承是面向对象编程的一个核心特性，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值