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 相关文章推荐
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
canvas绘制折线路径动画实现
JavaScript原始值与包装对象的详细介绍
May 11 #Javascript
vue组件的路由高亮问题解决方法
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 #Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
You might like
关于文本留言本的分页代码
2006/10/09 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP 文件系统详解
2012/09/13 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
python自动化发送邮件实例讲解
2021/01/04 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
运动会通讯稿300字
2014/02/02 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
安全主题班会教案
2015/08/12 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript