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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
Javascript动画效果(3)
Oct 11 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
react 路由Link配置详解
Nov 11 Javascript
canvas绘制折线路径动画实现
JavaScript原始值与包装对象的详细介绍
May 11 #Javascript
vue组件的路由高亮问题解决方法
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 #Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
You might like
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP之预定义接口详解
2015/07/29 PHP
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python绘制直线的方法
2018/06/30 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
行政助理的岗位职责
2014/02/18 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
青年志愿者活动总结
2014/04/26 职场文书
经济管理专业求职信
2014/06/09 职场文书
理财学专业自荐书
2014/06/28 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
先进集体申报材料
2014/12/25 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL