JavaScript继承的几种方法

流楚丶格念 2021-07-20 03:52:40
javascript


继承

1. 什么是继承

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

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

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

  • 原型作用之一:数据共享,节省内存空间
  • 原型作用之二:为了实现继承

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

例子:

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

    学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为
    老师类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资,教学行为
    程序员: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资, 敲代码
    司机类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资 开车

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

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

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

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

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

2. JavaScript继承的三种方法

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

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

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

借用构造函数:

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

  • 1.
  • 优点:解决了属性继承,并且值不重复的问题
  • 缺陷:父级类别中的方法不能继承
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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

案例:

在这里插入图片描述

<!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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.

构造函数的原型方法继承:拷贝继承(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 张三

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

案例:

在这里插入图片描述

<!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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

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

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

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 张三

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

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

在这里插入图片描述

<!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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.

继承小总结

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

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

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

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

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

版权声明
本文为[流楚丶格念]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15265965/2891974

  1. H5+CSS3移动商城界面.七天从零实战课程-会员_我的收藏
  2. H5+CSS3移动商城界面.七天从零实战课程-地址-编辑
  3. H5+CSS3移动商城界面.七天从零实战课程-会员_首页
  4. H5+CSS3移动商城界面.七天从零实战课程-信息_详情
  5. H5+CSS3移动商城界面.七天从零实战课程-购物车_下单
  6. H5+CSS3移动商城界面.七天从零实战课程-产品_分类
  7. H5+CSS3移动商城界面.七天从零实战课程-商城首页
  8. H5+CSS3移动商城界面.七天从零实战课程-信息_列表
  9. H5+CSS3移动商城界面.七天从零实战课程-会员_密码修改
  10. H5+CSS3移动商城界面.七天从零实战课程-会员_订单列表
  11. H5+CSS3移动商城界面.七天从零实战课程-产品_评论
  12. H5+CSS3移动商城界面.七天从零实战课程-产品详情
  13. H5+CSS3移动商城界面.七天从零实战课程-评论
  14. H5+CSS3移动商城界面.七天从零实战课程-购物车
  15. H5+CSS3移动商城界面.七天从零实战课程-地址-列表
  16. H5+CSS3移动商城界面.七天从零实战课程-产品_列表
  17. H5+CSS3移动商城界面.七天从零实战课程-会员_登录
  18. 在sublime中让html和css链接
  19. CSS基础
  20. 【网页前端设计Front end】CSS入门(看不懂你来打我)
  21. 【django轻量级框架】Django项目导入css,js,images等静态文件
  22. 2.4.5全局样式与局部样式和2.4.6 CSS变量-页面样式与布局【uni-app从入门到精通在线教程(黄菊华-跨平台开发系列教程)】
  23. 微信小程序界面设计小程序中的WXSS(css)选择器课程-::first-line 伪元素
  24. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:empty 伪类
  25. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
  26. 微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
  27. 微信小程序界面设计小程序中的WXSS(css)选择器课程-相邻兄弟选择器
  28. 微信小程序界面设计小程序中的WXSS(css)选择器课程-后代选择器
  29. 微信小程序界面设计小程序中的WXSS(css)选择器课程-属性选择器
  30. 微信小程序界面设计小程序中CSS3样式精通课程-框大小box-sizing
  31. 微信小程序界面设计小程序中CSS3样式精通课程-多列-Columns列的宽度和列数
  32. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-of-type 伪类
  33. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:only-child 伪类
  34. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:only-of-type 伪类
  35. 微信小程序界面设计小程序中的WXSS(css)选择器课程-::after伪元素
  36. 微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素
  37. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-of-type()伪类
  38. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-of-type() 伪类
  39. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类
  40. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:disabled | :enabled 伪类
  41. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
  42. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-of-type 伪类
  43. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
  44. 微信小程序界面设计小程序中的WXSS(css)选择器课程-派生选择器
  45. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
  46. 微信小程序界面设计小程序中的WXSS(css)选择器课程-选择器的分组
  47. HTML基础-简介
  48. ASP实战之HTML入门-黄菊华-专题视频课程
  49. 微信小程序WxParse解析富文本(html)代码在线视频教程
  50. HTML语言基础.上
  51. HTML语言基础.下
  52. HTML!
  53. 【网页前端设计Front end】HTML语言基础.上(看不懂你来打我)
  54. 【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)
  55. 【django轻量级框架】HTML上传文件拦截到本地
  56. HTML5基础知识实战演练教程-黄菊华-专题视频课程
  57. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页
  58. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(2)商城分类
  59. Introduction of modern JavaScript chart library apexcharts.js | software
  60. 微信小程序框架weui的基础使用