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 相关文章推荐
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
react 父子组件之间通讯props
Sep 08 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
js实现时分秒倒计时
Dec 03 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
canvas绘制折线路径动画实现
JavaScript原始值与包装对象的详细介绍
May 11 #Javascript
vue组件的路由高亮问题解决方法
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 #Javascript
Angular性能优化之第三方组件和懒加载技术
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
You might like
php curl post 时出现的问题解决
2014/01/30 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php微信支付之APP支付方法
2015/03/04 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
python读取和保存视频文件
2018/04/16 Python
python批量下载抖音视频
2019/06/17 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
总裁办公室主任职责
2014/01/02 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
绿色校园广播稿
2014/10/13 职场文书
未婚证明范本
2015/06/15 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
python中tkinter复选框使用操作
2021/11/11 Python