JavaScript面向对象中的封装和继承你了解吗
作者:执手天涯@ 发布时间:2024-06-07 16:00:16
标签:JavaScript,面向对象,封装,继承
1、面向对象
【三大显著特征】: 封装、继承、多态
1、封装
【解释】: 封装的本质就是将有关联的代码组合在一起。
【优势】:
保证代码可以复用提高代码的维护效率
【以前的封装方法】:
函数封装
function fn(){}
命名空间封装
let o={
name:'zhangsan',
age:20
}
let obj={
name:'lisi',
age:18
}
【新的封装方法】:
构造函数
//自定义构造函数
function Person(name,age,height,weight){
this.name=name;
this.age=age;
this.height=height;
this.weight=weight;
//方法
this.eat=function(){
console.log('吃饭')
}
this.sleep=function(){
console.log('睡觉')
}
}
//实例化一个对象
let obj1=new Person('zhangsan',20,'198cm','60kg')
console.log(obj1)
let obj2=new Person('lisi',24,'168cm','70kg')
console.log(obj2)
【总结】:
构造函数体现了面向对象的封装特性构造函数实例创建的对象彼此独立、互不影响命名空间式的封装无法保证数据的独立性
2、原型对象
【解释】: 本质是构造函数的一个属性,prototype
的是对象类据类型,称为构造函数的原型对象。
【代码示例】:
function Person(name,age){
this.name=name
this.age=age
//this.sing=function (){
//console.log('唱歌')
//}
}
console.log(Person.prototype);
Person.prototype.sing=function(){
console.log('唱歌')
}
let p1=new Person('zhangsan',20);
console.log(p1)
p1.sing()
【总结】:
只要是构造函数就有原型对象
原型对象中的方法,实例对象可以直接调用
原型对象和构造函数都有相同的方法的时候就使用构造函数本身的方法
【constructor属性】: 代表了该原型对象对应的构造函数。
【示例】:
function Person(name,age){
this.name=name
this.age=age
}
console.log(Person.prototype,constructor)
【图解】:
【__proto__属性】: 用于指向原型对象
【示例】:
function Person(name,age){
this.name=name
this,age=age
}
Person.prototype.eat=function(){
console.log('吃饭')
}
let person1=new Person('张三',22);
console.log(person.__proto__===Person.prototype)
3、继承
【封装问题引出】:
// 封装中国人的行为特征
function Chinese() {
// 中国人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;
this.skin = 'yellow';
this.language = '中文';
// 中国人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
// 封装日本人的行为特征
function Japanese() {
// 日本人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;
this.skin = 'yellow';
this.language = '日文';
// 日本人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
【总结】:其实我们都知道无论是中国人、日本人还是其它民族,人们的大部分特征是一致的,然而体现在代码中时人的相同的行为特征被重复编写了多次,代码显得十分冗余,我们可以将重复的代码抽离出来
【代码改写】:
<script>
// 所有人
function Person() {
// 人的特征
this.arms = 2;
this.legs = 2;
this.eyes = 2;
// 人的行为
this.walk = function () {}
this.sing = function () {}
this.sleep = function () {}
}
// 封装中国人的行为特征
function Chinese() {
// 中国人的特征
this.skin = 'yellow';
this.language = '中文';
}
// 封装日本人的行为特征
function Japanese() {
// 日本人的特征
this.skin = 'yellow';
this.language = '日文';
}
// human 是构造函数 Person 的实例
let human = new Person();
// 中国人
Chinese.prototype = new Person();
Chinese.prototype.constructor = Chinese;
// 日本人
Japanese.prototype = human;
Japanese.prototype.constructor = Japanese;
来源:https://zhishoutianya.blog.csdn.net/article/details/122789362
0
投稿
猜你喜欢
- 首先关键一句话:$(".js-example-tags").select2({ tags:
- python的时间模块生成时间戳的方法是非常简单的,因为最近频繁用到了时间戳功能,这里简单总结了一下日常使用最为频繁的两个时间模块各自生成当
- 修改list中所有元素类型:方法一:new = list()a = ['1', '2', '3
- 1、前不久,friendfeed.com把主导航从上面,移到了右侧。现在,又改到了左侧。2、现在,twitter.com把页签(相当于二级导
- 学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求,尤其对于
- 1.jsvar obj=document.getElementById(selectid);obj.options.length = 0;
- 1、numpy.array() 可以把列表转换为矩阵numpy.array(object, dtype=None, *,
- 题目请设计并实现一款主机端口扫描程序。程序根据用户输入的域名或IP地址,可以查询该主机的开放的端口号。 例如:并有一定的异常处理参考code
- 先给出一个样例看看 import tensorflow as tfraw = tf.constant([1, 2, 3, 4, 5, 6,
- 本文实例为大家分享了python实现简单颜色识别程序的具体代码,供大家参考,具体内容如下import numpy as npimport c
- Pythonpython 真的太好用了,但是它真的好慢啊(哭死) ; C++ 很快,但是真的好难写啊,此生能不碰它就不碰它。老天啊,有没有什
- 1. 很多情况下需要进行不同进制之间的转换其中比较常用到的是python的内置函数进行进制的转换,一般使用内置函数进行转换的时候是先将控制台
- 本文实例讲述了Python存取XML的常见方法。分享给大家供大家参考,具体如下:目前而言,Python 3.2存取XML有以下四种方法:1.
- 本文实例讲述了python使用any判断一个对象是否为空的方法。分享给大家供大家参考。具体实现代码如下:>>> eth =
- python 实现pacs功能 推送下拉影像dcmtk关联pacs技术笔记:简介1、dcmtk关联pacs的参数介绍2、dcmtk命令介绍3
- FBV:function based view 基于函数的视图.CBV:class based view 基于类的视图.在视图函数创建类,需
- 1.说明opencv安装包中有训练好的分类器文件,可以实现人脸的识别。当然,我们也可以训练自己的分类器文件,实现对特定物体的识别。本文章就详
- 服务器计算数据有时需要大量的时间,使用程序发送一封邮件是一种免费便捷的通知方式,可以让我们及时收到程序中断或者程序运行完成的信息,而不用一直
- 前言最近学习了 django 的一个 restframework 框架,对于里面的执行流程产生了兴趣,经过昨天一晚上初步搞清楚了执行流程(部
- 在Pytorch中,torch.utils.data中的Dataset与DataLoader是处理数据集的两个函数,用来处理加载数据集。通常