广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript中的继承采用什么方式
  • 934
分享到

JavaScript中的继承采用什么方式

2024-04-02 19:04:59 934人浏览 泡泡鱼
摘要

这篇文章主要讲解了“javascript中的继承采用什么方式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的继承采用什么方式”吧!

这篇文章主要讲解了“javascript中的继承采用什么方式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的继承采用什么方式”吧!

采用的方式有:1、原型链继承,每一个AO对象都有一个prototype,返回对象类型原型的引用,所以可以给它赋值一个对象;2、原型冒充继承,把父类的构造函数拿过来执行一遍;3、复制继承,把父类所有的属性和方法复制过来;es6标准类的继承。

教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

1、原型链继承

这个继承最为简单,它的实现原理是,每一个AO对象都有一个prototype,返回对象类型原型的引用,所以可以给它赋值一个对象,就可以实现简单的原型链继承。

function Animal(){    this.eat = function(){
        alert("我会吃");
    }
}function Bird(){    this.fly = function(){
        alert("我会飞");
    }
}
//设置Bird类的原型为一个Animal对象
Bird.prototype = new Animal();var pigeon = new Bird();
pigeon.fly();
pigeon.eat();

JavaScript中的继承采用什么方式JavaScript中的继承采用什么方式

结果出现了,实现了鸟类继承动物会吃的特性。打印一下console.info(pigeon)我们可以看到:

JavaScript中的继承采用什么方式

当前对象的__proto__属性为一个Animal对象,而eat方法在这个Animal对象也就是它的父类里,如果一个属性或方法在当前对象里无法找到的话,就会照着原型链一步一步找上去。

这里Bird的父类是Animal,Animal的父类是Object,或者说所有没有直接指定prototype的对象,它的父类都是Object。因为toString()方法就是在Object里,所以所有对象都可以调用它。而Object的父类是null。

还有一个需要注意的问题是,原型链继承中,所有的子类的父类对象都是同一个。只要任意一个子类改变了父类对象的属性,那所有对象都会受到影响。这点可能是缺点,也可能是优点。

注:prototype和__proto__的区别可以看我另外一篇博客 Http://www.cnblogs.com/shamoyuu/p/prototype.html

2、原型冒充继承

原型冒充的原理是:把父类的构造函数拿过来执行一遍。下面看代码:

function Animal(){    this.eat = function(){
        alert("我会吃");
    }
}function Bird(){    Animal.apply(this, arguments);this.fly = function(){
        alert("我会飞");
    }
}var pigeon = new Bird();
pigeon.fly();
pigeon.eat();

JavaScript中的继承采用什么方式JavaScript中的继承采用什么方式

效果跟上面是一样一样的,但是这个时候eat方法已经不在原型链上,而是在pigeon对象上。

JavaScript中的继承采用什么方式

3、复制继承

复制继承的原理是:把父类所有的属性和方法复制过来。下面看代码。

function Animal(){    this.eat = function(){
        alert("我会吃");
    }
}function Bird(){    this.fly = function(){
        alert("我会飞");
    }    //这里写一个继承的方法,用来复制所有父类的属性或方法
    this.extend = function(parent){        for(var key in parent){            this[key] = parent[key];
        }
    }
}var pigeon = new Bird();//执行继承的方法pigeon.extend(new Animal());

pigeon.fly();
pigeon.eat();

JavaScript中的继承采用什么方式JavaScript中的继承采用什么方式

这个也和上面一样一样的。

4、ES6标准类的继承

ES6中引入了class的概念,新的class能帮助我们写出更好更直观的面向对象的代码。

下面这是ES6中类与类的继承,实现的效果跟上面是一样的。

class Animal {
    constructor(name){        this.name = name;        this.type = "动物";
    }
    
    says(say){
        console.info(this.type + "【" + this.name + "】" + "说 " + say);
    }
}

let dog = new Animal("狗狗");
dog.says("汪汪汪");


class Bird extends Animal {
    constructor(name){
        super(name);        this.type = "小鸟";
    }
}

let pigeon = new Bird("鸽子");
pigeon.says("我是一只小鸟");

JavaScript中的继承采用什么方式

实现是非常简单直观的,而且不会再被人称为这是“模拟继承”。

扩展资料

原型链继承利弊

1、只能单继承。2、继承后会影响所有的对象。3、速度略慢。

原型冒充继承利弊

1、虽然可以多继承,但是无法在运行的时候动态继承,只能修改父类的构造函数。

复制继承(非ES6推荐)

因为上面两个所拥有的缺点它都很好地避开了,它可以实现多继承,继承只影响当前对象,而且速度快,不必修改父类的构造函数等等等等,所以最推荐的还是这种继承方式。

注:Jquery的继承也是采取复制继承实现的,不过jQuery加了很多的验证判断,但是原理是一样的。

ES6标准类的继承

如果能使用最新的ES6的特性,这种继承是最好的,通俗易懂,是标准的面向对象的语言该有的继承方式。

但是需要注意:

子类的contructor里,“this”必须放在super()调用之后

子类的contructor里必须调用super(),或者明确地返回一个对象

不能多继承

-- Java在继承的时候会自动生成一个父类对象,但是js里并不会

感谢各位的阅读,以上就是“JavaScript中的继承采用什么方式”的内容了,经过本文的学习后,相信大家对JavaScript中的继承采用什么方式这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: JavaScript中的继承采用什么方式

本文链接: https://www.lsjlt.com/news/73954.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中的继承采用什么方式
    这篇文章主要讲解了“JavaScript中的继承采用什么方式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的继承采用什么方式”吧! ...
    99+
    2022-10-19
  • JavaScript的继承方式是什么
    本文小编为大家详细介绍“JavaScript的继承方式是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript的继承方式是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。JavaScript中...
    99+
    2023-06-30
  • Javascript中类式继承和原型式继承有什么区别
    这篇文章主要介绍了Javascript中类式继承和原型式继承有什么区别,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在所有面向对象的编程中,...
    99+
    2022-10-19
  • JavaScript中的继承方式有哪些
    这篇文章将为大家详细讲解有关JavaScript中的继承方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。类式继承(构造函数)JS中其实是没有类的概念的,所谓的类也...
    99+
    2022-10-19
  • JavaScript中有哪些继承方式
    这期内容当中小编将会给大家带来有关JavaScript中有哪些继承方式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。原型链首先得要明白什么是原型链,在一篇文章看懂prot...
    99+
    2022-10-19
  • javascript继承方法有什么
    本篇内容介绍了“javascript继承方法有什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!javascript继承方法有:1、使用ca...
    99+
    2023-06-14
  • javascript的继承方式有哪些
    这篇文章主要讲解了“javascript的继承方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript的继承方式有哪些”吧! ...
    99+
    2022-10-19
  • JavaScript中常见的几种继承方式
    目录原型继承内存图分析盗用构造函数继承分析组合继承原型链继承寄生式继承寄生组合式继承原型继承 function Parent(name) { this.name = name }...
    99+
    2022-11-13
  • 分享JavaScript 中的几种继承方式
    目录一、原型链1.1 原型链的问题二、盗用构造函数2.1 基本思想2.2 可向父类构造函数传参2.3 盗用构造函数的问题三、组合继承(伪经典继承)3.1 基本思想3.2 组合继承的问...
    99+
    2022-11-13
  • 一文弄懂JavaScript的继承方式
    目录JavaScript中的继承方式问:JavaScript中有几种继承方式呢问:每种继承方式是怎么实现的呢盗用构造函数组合继承原型链式继承寄生式继承寄生时组合继承JavaScrip...
    99+
    2022-11-13
  • javascript中继承指的是什么
    今天小编给大家分享一下javascript中继承指的是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起...
    99+
    2022-10-19
  • javascript继承的作用是什么
    今天小编给大家分享一下javascript继承的作用是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起...
    99+
    2022-10-19
  • JavaScript实现继承的方法是什么
    这篇文章主要介绍了JavaScript实现继承的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript实现继承的方法是什么文章都会有所收获,下面我们一起来看看吧。0. 继承继承是面向对象编...
    99+
    2023-07-04
  • javascript继承方法的使用
    这篇文章主要介绍“javascript继承方法的使用”,在日常操作中,相信很多人在javascript继承方法的使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript继承方法的使用”的疑惑有所...
    99+
    2023-06-20
  • javascript继承实现的方式有哪些
    本文小编为大家详细介绍“javascript继承实现的方式有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript继承实现的方式有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是继承用官...
    99+
    2023-07-05
  • Javascript的类继承是什么
    本篇内容介绍了“Javascript的类继承是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!说到Jav...
    99+
    2022-10-19
  • javascript的原型式继承的原理是什么
    这篇文章给大家介绍javascript的原型式继承的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1、说明利用空对象作为中介,将某个对象直接分配给空对象构造函数的原型。2、缺点原型链继承多个实例的引用类型属性...
    99+
    2023-06-15
  • javascript中什么是组合继承
    javascript中什么是组合继承?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、说明用原型链实现原型属性和方法的继承,借用构造函数技术实现实例属性的继承。2、缺点组合模式...
    99+
    2023-06-15
  • JavaScript中的继承模式有哪些
    JavaScript中的继承模式有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一. 原型链继承所谓原型链继承,就是让父类的一个实例作为子...
    99+
    2022-10-19
  • 浅谈JavaScript的几种继承实现方式
    目录当前需求: 实现 Student 继承自 Person构造函数Person构造函数Student希望满足的条件功能利用原形链实现方法的继承方式1: 子类原型指向父类原型方式2 子...
    99+
    2023-05-17
    JavaScrip 继承
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作