首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript继承的三种方法实例

Posted in Javascript onMay 12, 2021

继承

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) // => human

s1.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继承方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

JavaScript继承的三种方法实例

- Author -

流楚丶格念

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在JavaScript中，为什么要尽可能使用局部变量？
Apr 06 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
javascript与有限状态机详解
May 08 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
canvas绘制折线路径动画实现
JavaScript原始值与包装对象的详细介绍
May 11 #Javascript
vue组件的路由高亮问题解决方法
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 #Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
感谢信(72) 制度(225) 评语(336) 活动总结(790) 计划书(118) 寄语(276) 倡议书(159) 保证书(97) 请假条(31) 决心书(42)
You might like
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php json相关函数用法示例
2017/03/28 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python 基于opencv操作摄像头
2020/12/24 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
护士实习鉴定范文
2013/12/22 职场文书
大学生村官事迹材料
2014/01/21 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
环保口号大全
2014/06/12 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
四群教育工作总结
2015/08/10 职场文书
学校标语口号大全
2015/12/26 职场文书
班组长如何制订适合本班组的工作计划？
2019/07/10 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android