广告
返回顶部
首页 > 资讯 > 精选 >JavaScript中有哪些继承的方法
  • 326
分享到

JavaScript中有哪些继承的方法

2023-06-15 01:06:32 326人浏览 独家记忆
摘要

这篇文章将为大家详细讲解有关javascript中有哪些继承的方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 什么是继承继承: 首先继承是一种关系,类(class)与类之间的关系,j

这篇文章将为大家详细讲解有关javascript中有哪些继承的方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

1. 什么是继承

继承: 首先继承是一种关系,类(class)与类之间的关系,js中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。

  • 继承也是为了数据共享,js中的继承也是为了实现数据共享

我们可以联想到原型,他的两个作用是:

  • 原型作用之一:数据共享,节省内存空间

  • 原型作用之二:为了实现继承

继承是一种关系:父类级别与类级别的关系

例子:

人类别: 姓名, 性别, 年龄 ,吃饭, 睡觉

学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为

老师类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资,教学行为

程序员: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资, 敲代码

司机类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资 开车

动物类别: 体重, 颜色, 吃

狗类别: 体重,颜色, 吃, 咬人

二哈类别: 体重,颜色, 吃, 咬人 逗主人开心,汪汪,你好帅

面向对象的特性:封装,继承,多态

封装:就是包装
一个值存储在一个变量中–封装
一坨重复代码放在一个函数中–封装
一系列的属性放在一个对象中–封装
一些功能类似的函数(方法)放在一个对象中–封装
好多相类似的对象放在一个js文件中—封装

多态:一个对象有不同的行为,或者是同一个行为针对不同的对象,产生不同的结果,要想有多态,就要先有继承,js中可以模拟多态,但是不会去使用,也不会模拟,

2. JavaScript继承的三种方法

构造函数的属性继承:借用构造函数

继承的时候,不用改变原型的指向,直接调用父级的构造函数的方式来为属性赋值就可以了

—— 借用构造函数:把要继承的父级的构造函数拿过来,使用一下就可以啦。

借用构造函数:

构造函数名字.call(当前对象,属性,属性,属性....);

优点:解决了属性继承,并且值不重复的问题

缺陷:父级类别中的方法不能继承

function Person (name, age) {  this.type = 'human'  this.name = name  this.age = age}function Student (name, age) {  // 借用构造函数继承属性成员  Person.call(this, name, age)}var s1 = Student('张三', 18)console.log(s1.type, s1.name, s1.age) // => human 张三 18

案例:

JavaScript中有哪些继承的方法

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>title</title>  <script>    function Person(name, age, sex, weight) {      this.name = name;      this.age = age;      this.sex = sex;      this.weight = weight;    }    Person.prototype.sayHi = function () {      console.log("您好");    };    function Student(name,age,sex,weight,score) {      //借用构造函数      Person.call(this,name,age,sex,weight);      this.score = score;    }    var stu1 = new Student("小明",10,"男","10kg","100");    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);    var stu2 = new Student("小红",20,"女","20kg","120");    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);    var stu3 = new Student("小丽",30,"妖","30kg","130");    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);  </script></head><body></body></html>

构造函数的原型方法继承:拷贝继承(for-in)

拷贝继承;把一个对象中的属性或者方法直接复制到另一个对象中

function Person (name, age) {  this.type = 'human'  this.name = name  this.age = age}Person.prototype.sayName = function () {  console.log('hello ' + this.name)}function Student (name, age) {  Person.call(this, name, age)}// 原型对象拷贝继承原型对象成员for(var key in Person.prototype) {  Student.prototype[key] = Person.prototype[key]}var s1 = Student('张三', 18)s1.sayName() // => hello 张三

案例:

JavaScript中有哪些继承的方法

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>title</title>  <script>    //拷贝继承;把一个对象中的属性或者方法直接复制到另一个对象中    function Person() {    }    Person.prototype.age=10;    Person.prototype.sex="男";    Person.prototype.height=100;    Person.prototype.play=function () {      console.log("玩的好开心");    };    var obj2={};    //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法    for(var key in Person.prototype){      obj2[key]=Person.prototype[key];    }    console.dir(obj2);    obj2.play();  </script></head><body></body></html>

另一种继承方式:原型继承

原型继承:改变原型的指向

function Person (name, age) {  this.type = 'human'  this.name = name  this.age = age}Person.prototype.sayName = function () {  console.log('hello ' + this.name)}function Student (name, age) {  Person.call(this, name, age)}// 利用原型的特性实现继承Student.prototype = new Person()var s1 = Student('张三', 18)console.log(s1.type) // => humans1.sayName() // => hello 张三

组合继承:原型+借用构造函数继承

JavaScript中有哪些继承的方法

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>title</title>  <script>    //原型实现继承    //借用构造函数实现继承    //组合继承:原型继承+借用构造函数继承    function Person(name,age,sex) {      this.name=name;      this.age=age;      this.sex=sex;    }    Person.prototype.sayHi=function () {      console.log("萨瓦迪卡");    };    function Student(name,age,sex,score) {      //借用构造函数:属性值重复的问题      Person.call(this,name,age,sex);      this.score=score;    }    //改变原型指向----继承    Student.prototype=new Person();//不传值    Student.prototype.eat=function () {      console.log("吃东西");    };    var stu=new Student("小黑",20,"男","100分");    console.log(stu.name,stu.age,stu.sex,stu.score);    stu.sayHi();    stu.eat();    var stu2=new Student("小黑黑",200,"男人","1010分");    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);    stu2.sayHi();    stu2.eat();    //属性和方法都被继承了  </script></head><body></body></html>

继承小总结

原型继承:改变原型的指向

借用构造函数继承:主要解决属性的问题

组合继承:原型继承+借用构造函数继承

既能解决属性问题,又能解决方法问题

拷贝继承:就是把对象中需要共享的属性或者犯法,直接遍历的方式复制到另一个对象中

javascript是一种什么语言

javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端web开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如node.js

关于JavaScript中有哪些继承的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript中有哪些继承的方法

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

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

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

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

下载Word文档
猜你喜欢
  • JavaScript中有哪些继承的方法
    这篇文章将为大家详细讲解有关JavaScript中有哪些继承的方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 什么是继承继承: 首先继承是一种关系,类(class)与类之间的关系,J...
    99+
    2023-06-15
  • javascript继承的方法有哪些
    这篇文章将为大家详细讲解有关javascript继承的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。javascript继承的6种方法:1、原型链继承,其重点是让新实例的原型等于父类的实例;2、...
    99+
    2023-06-14
  • JavaScript中有哪些继承的实现方法
    JavaScript中有哪些继承的实现方法,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。JavaScript继承的实现方法:1、利用构造原型模...
    99+
    2022-10-19
  • javascript实现继承的方法有哪些
    本篇内容介绍了“javascript实现继承的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!ja...
    99+
    2022-10-19
  • JavaScript中有哪些继承方式
    这期内容当中小编将会给大家带来有关JavaScript中有哪些继承方式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。原型链首先得要明白什么是原型链,在一篇文章看懂prot...
    99+
    2022-10-19
  • JavaScript中的继承方式有哪些
    这篇文章将为大家详细讲解有关JavaScript中的继承方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。类式继承(构造函数)JS中其实是没有类的概念的,所谓的类也...
    99+
    2022-10-19
  • javascript的继承方式有哪些
    这篇文章主要讲解了“javascript的继承方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript的继承方式有哪些”吧! ...
    99+
    2022-10-19
  • js中继承方法有哪些
    这篇文章主要为大家展示了“js中继承方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js中继承方法有哪些”这篇文章吧。js的原型继承 --  ...
    99+
    2022-10-19
  • javascript继承实现的方式有哪些
    本文小编为大家详细介绍“javascript继承实现的方式有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript继承实现的方式有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是继承用官...
    99+
    2023-07-05
  • JavaScript中的继承模式有哪些
    JavaScript中的继承模式有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一. 原型链继承所谓原型链继承,就是让父类的一个实例作为子...
    99+
    2022-10-19
  • javascript中有哪些继承形式
    本篇文章为大家展示了javascript中有哪些继承形式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Js的继承大体上就是两种:对象冒充、原型方式。这两种方式各有优点和缺陷,这里我先列举出来,再从底...
    99+
    2023-06-14
  • JavaScript中继承的优缺点有哪些
    这篇文章给大家分享的是有关JavaScript中继承的优缺点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。本文讲解JavaScript各种继承方式和优缺点。但是注意:这篇文...
    99+
    2022-10-19
  • javascript继承方法有什么
    本篇内容介绍了“javascript继承方法有什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!javascript继承方法有:1、使用ca...
    99+
    2023-06-14
  • C++ 中的继承方式有哪些
    C++ 中的继承方式有哪些?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。public 方式继承基类成员对派生类的可见性对派生类来说,基类的公有成员和保护成员可见,基类的公有...
    99+
    2023-06-06
  • java实现多继承的方法有哪些
    在Java中,一个类只能直接继承一个父类,因此无法直接实现多继承。不过,可以通过以下几种方式来模拟多继承的效果:1. 接口继承:类可...
    99+
    2023-10-11
    java
  • js继承的方式有哪些
    这篇文章主要介绍js继承的方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!原型链继承原型链继承是ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。什么是原型链每个构造函数...
    99+
    2023-06-14
  • C++中有哪些实现继承的方式
    C++中有哪些实现继承的方式,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。C++继承方式1.普通继承+父类无virtual函数若子类没有新定义virtual函数...
    99+
    2023-06-17
  • javascript继承方法的使用
    这篇文章主要介绍“javascript继承方法的使用”,在日常操作中,相信很多人在javascript继承方法的使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript继承方法的使用”的疑惑有所...
    99+
    2023-06-20
  • Python类的定义继承调用方法有哪些
    这篇文章主要讲解了“Python类的定义继承调用方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python类的定义继承调用方法有哪些”吧!一、类的约束# _开头:&nbs...
    99+
    2023-07-02
  • php中类继承与接口继承的区别有哪些
    今天小编给大家分享一下php中类继承与接口继承的区别有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在PHP中,类继承与...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作