JavaScript的原型与继承

原型

  • 原型 prototype,我们所创建的每一个实例,解析器都会向这个函数中添加一个prototype,属性,这个属性会对应这个一个对象,这个对象就是原型对象(显式原型),原型对象就相当于一个公共的区域,当前实例都可以访问到这个原型对象

示例:

Person.prototype.sayName = function () {console.log(this.name)
}
Person.prototype.xxx ='这是一个属性'
let p1 = new Person('张三',20,'男');
let p2 = new Person('李四',20,'男');
console.log(p1)
console.log(p2)
  • 如果函数作为普通的函数调用,那么prototype没有任何作用,当前函数以构造函数的方式调用时,它所创建的对象会隐含一个属性,指向该构造函数的原型对象
  • 我们可以通过proto(隐式原型),来访问到该属性
  • 当我们访问一个对象的属性或者方法时,会先在自身寻找(比如访问p1 对象的name属性)如果找不到则去原型对象中寻找,找到了直接使用
console.log(p2.xxx);
//hasOwnProperty 判断这个属性是否是 p2特有的
console.log(p2.hasOwnProperty('xxx'))
//__proto__.hasOwnProperty('xxx') 判断这个属性是否共有的
console.log(p2.__proto__.hasOwnProperty('xxx'))

继承

原型链继承

//定义父类构造函数
function SupperType(){this.subProp = '这是父类的一条消息';this.fuxxx = '这是父类的一条消息-测试';
}
//给父类的原型添加方法
SupperType.prototype.showSupperProp = function (){console.log("SupperType:",this.subProp,this.fuxxx)
}
//定义子类的构造函数
function  SubType(){this.subProp = '这是子类的一条消息';
}
//将子类的原型 指向父类实例
SubType.prototype = new SupperType();//在子类的原型上添加方法
SubType.prototype.showSubProp = function (){console.log("SubType: ",this.subProp);
}//将设置子类的原型构造函数为子类本身
SubType.prototype.constructor = SubType;
//创建子类实例  完成继承
var subType = new SubType();
//调用子类的方法
subType.showSubProp();
//调用父类方法
subType.showSupperProp();console.log(subType.toString());
console.log(SubType.prototype.constructor)

原型链继承的特点:

  1. 原型链继承多个实例的引用类型属性指向相同一个实例被修改了原型属性,另一个实例的原型属性也会被影响
  2. 不能传递参数
  3. 继承单一

构造继承

//创建父类构造
function SupperType(name){this.name = name;this.showSupperName = function (){console.log("SupperType: ",this.name)}
}//创建子类构造
function SubType(name,age){//在子类中 继承父类 调用call方法 继承所有的属性与方法SupperType.call(this,name);this.age = age;
}//给子类原型  定义方法
SubType.prototype.showSubName = function (){console.log("SubType: ",this.name,this.age)
}let zzh = new SubType('渣渣辉',65);
zzh.showSupperName();
zzh.showSubName();
console.log(zzh);

构造继承的特点:

  1. 只能继承父类实例的属性和方法,不能继承原型属性和方法
  2. 无法实现构造函数的复用,每个子类都有父类的实例的函数副本
  3. 比较臃肿 ,影响性能

组合继承

组合继承就是将原型链继承和构造继承结合在一起

function Person(name,age){this.name = name;this.age = age;
}
Person.prototype.setName = function (name) {this.name = name;
}
function Student(name,age,sex) {//------------构造继承-----Person.call(this,name,age);this.sex = sex;
}
// 原型链继承
Student.prototype = new Person();Student.prototype.constructor = Student;Student.prototype.setSex = function (sex) {this.sex = sex;
}let s = new Student('李四',25,'男');
console.log(s.name,s.age,s.sex);
s.setName('王五');
s.setSex("女");
console.log(s.name,s.age,s.sex);
console.log(s);

特点:

  1. 父类中的实例属性和方法,在子类的实例中存在
  2. 也在子类的原型中存在,栈内存

数组

创建数组:

var arr = new Array();
console.log(typeof arr);  //object
arr[0] = 'A';
arr[1] = 12;
arr[2] = true;
arr[3] = {name:'zs',sex:'男'}

使用字面量创建数组

var arr =[1,'2',3,'4',5,6,'7',8,'9'];

通过length属性 获取数组长度

遍历数组

for(let i = 0; i< arr.length; i++){console.log(arr[i])
}

向数组的末尾追加值

arr.push("唐僧");
console.log(arr);

删除末尾数据

arr.pop();
console.log(arr);

向数组的开头追加一个元素或者多个元素

arr.unshift("牛魔王","铁扇公主");
console.log(arr);

删除数组的第一个元素

arr.shift();
console.log(arr);

For Each遍历数组 IE 8 以上
第一个参数 :当前正在遍历的元素
第二个参数 :当前正在遍历的元素索引
第三个参数:当前正在遍历的数组

arr.forEach(function (value,index,arr) {console.log(value,index,arr);
})

slice 截取指定元素,不会改变原数组参数

  • 1.截取的开始位置索引 包含开始索引元素
  • 2.截取的结束位置索引,不包含结束索引元素
  • 可以为负数 -1 表示倒数第一个元素 -2表示倒数第二个元素
let newArr = arr.slice(0,3);
let newArr = arr.slice(0,-2);
console.log("原数组:",arr);
console.log("新数组:",newArr);

splice() 可以用于删除数组中的指定元素,该方法会影响到原数组,删除的元素会作为返回值返回参数

  • 1.表示开始位置索引
  • 2.要删除的元素数量
  • 3.第三个及后续参数参数,可以作为新的元素,插入到原数组中(开始索引的前面)
var result = arr.splice(1,0,'朱大姐','沙和尚')
console.log("原数组:",arr);
console.log("新数组:",newArr);

concat 可以将两个或者多个数组 连接并返回一个新的数组 不会对原数组产生影响

let arr1 = ['测试数据A', '测试数据B', '测试数据C'];
let arr2 = ['测试数据1', '测试数据2', '测试数据3'];
let arr3 = ['测试数据#', '测试数据$', '测试数据%'];let result = arr1.concat(arr2, arr3, '连接后拼接A', '连接后拼接B');
console.log("拼接后:", result);
console.log(arr1,arr2,arr3)let arr1 = ['测试数据A', '测试数据B', '测试数据C'];
数组拼接为字符串
console.log(arr1.join("#-#"));
数组反转
console.log(arr1.reverse());

数组元素排序:

var arr = [1,2,5,8,6,5,7,8,9,3]
/***  如果返回大于0 则元素交换位置*  如果返回小于0 则元素位置不变*  如果等于0则认为两个元素相同*/
arr.sort(function (a,b){return b-a;
});
console.log(arr);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

156基于Matlab的光纤陀螺随机噪声和信号

基于Matlab的光纤陀螺随机噪声和信号&#xff0c;利用固定步长和可调步长的LMS自适应滤波、最小二乘法、滑动均值三种方法进行降噪处理&#xff0c;最后用阿兰方差评价降噪效果。程序已调通&#xff0c;可直接运行。 156 信号处理 自适应滤波 降噪效果评估 (xiaohongshu.com)

YOLOv5改进 | 融合改进篇 | 华为VanillaNet + BiFPN突破涨点极限

一、本文介绍 本文给大家带来的改进机制是华为VanillaNet主干配合BiFPN实现融合涨点,这个主干是一种注重极简主义和效率的神经网络我也将其进行了实验, 其中的BiFPN不用介绍了从其发布到现在一直是比较热门的改进机制,其主要思想是通过多层级的特征金字塔和双向信息传递来提…

[office] Excel自带的编辑函数求和方法 #其他#媒体

Excel自带的编辑函数求和方法 今天小编为大家分享Excel自带的编辑函数求和方法&#xff0c;方法很简单的&#xff0c;对于不是很熟悉excel表格的朋友可以参考一下&#xff0c;希望能对大家有所帮助 很多同学以及上班族需要大量使用Excel这款表格编辑器&#xff0c;当表格中有大…

企业IT故障应急响应:四大关键控制点的精细管理

面对不断复杂的生产环境&#xff0c;如何围绕“故障发现、故障响应、故障定位、故障恢复”四个关键环节&#xff0c;进行多方面统筹建设&#xff0c;从而达到增加TBF和缩短TTR的目标&#xff1f; TBF&#xff08;无故障时长&#xff09;和TTR&#xff08;故障修复时长&#xf…

论文笔记:相似感知的多模态假新闻检测

整理了RecSys2020 Progressive Layered Extraction : A Novel Multi-Task Learning Model for Personalized Recommendations&#xff09;论文的阅读笔记 背景模型实验 论文地址&#xff1a;SAFE 背景 在此之前&#xff0c;对利用新闻文章中文本信息和视觉信息之间的关系(相似…

Bert与ChatGPT

1. Bert模型 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是一种预训练语言表示的方法&#xff0c;由Google AI在2018年提出。它标志着自然语言处理&#xff08;NLP&#xff09;领域的一个重大进步&#xff0c;因为它能够理解单词在…

CSP-202009-1-称检测点查询

CSP-202009-1-称检测点查询 解题思路 本题的时间复杂度貌似没有限制&#xff0c;直接暴力枚举就能知识盲点&#xff1a;sort()函数-升序排序 #include <algorithm>给名为dis&#xff0c;长度为n的数组排序sort(new_dis, new_dis n); #include <iostream> #inc…

第69讲后端登录逻辑实现

Admin实体&#xff1a; TableName("t_admin") Data public class Admin {TableId(type IdType.AUTO)private Integer id; // 编号private String userName; // 用户名private String password; // 密码TableField(select false)private String newPassword; // 新…

labelimg 在pycharm下载使用

labelimg 使用数据标注工具 labelimg 制作数据集 在pycharm中搜索labelimg 选择版本安装 labelimg install 使用数据标注工具制作数据集 启动 带参数启动 1、cmd cd到指定目录 2、带参数启动标注工具 左侧可以选择切换为需要的数据格式 一些快捷键 和自动保存&#xff0c…

Stable Diffusion 模型下载:RealCartoon-Realistic - V13

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十下载地址模型介绍 该检查点是 RealCartoon3D 检查点的一个分支。这个目标是在背景和人物中产生更“真实”的外观。我试图避免这个模型中更多的动漫、卡通和“完美”外观。这是一个肯

hexo 博客搭建以及踩雷总结

搭建时的坑 文章置顶 安装一下这个依赖 npm install hexo-generator-topindex --save然后再文章的上面设置 top: number&#xff0c;数字越大&#xff0c;权重越大&#xff0c;也就是越靠顶部 hexo 每次推送 nginx 都访问不到 宝塔自带的 nginx 的 config 里默认的角色是 …

python33-Python列表和元组之子序列

与前面介绍的字符串操作类似的是&#xff0c;列表和元组同样也可使用索引获取中间一段&#xff0c;这种用法被称为slice(分片或切片)。slice的完整语法格式如下: [start:end:step] 上面语法中start、end两个索引值都可使用正数或负数&#xff0c;其中负数表示从倒数开始。该语…

leetcode-4的幂

342. 4的幂 使用数学方法 如果一个数是4的幂次方&#xff0c;那么它一定可以表示为2的幂次方乘以4的幂次方。而2的幂次方在二进制表示中只有一个1&#xff0c;所以只需要判断n是否可以被4整除&#xff0c;并且n/4是否也是4的幂次方即可。 class Solution:def isPowerOfFour(…

easyx 随机火花生成器 视觉盛宴

作品介绍&#xff1a; 在数字化艺术的世界里&#xff0c;我们经常寻求模拟自然现象的方式&#xff0c;为观众带来沉浸式的体验。本作品“随机火花生成器”就是一个尝试&#xff0c;通过编程模拟了火花的随机生成和消散过程。 在这段代码中&#xff0c;我们使用了EasyX图形库&…

前端JavaScript篇之如何获得对象非原型链上的属性?

目录 如何获得对象非原型链上的属性&#xff1f; 如何获得对象非原型链上的属性&#xff1f; 要获取对象上非原型链上的属性&#xff0c;可以使用 hasOwnProperty() 方法。这个方法是 JavaScript 内置的对象方法&#xff0c;用于检查一个对象是否包含指定名称的属性&#xff0…

Python 3 中的 super()

Python super Python 的 super() 函数允许我们显式地引用父类。在继承的情况下&#xff0c;当我们想要调用父类函数时&#xff0c;它非常有用。 Python super 函数示例 首先&#xff0c;让我们看一下我们在 Python 继承教程中使用的以下代码。在该示例代码中&#xff0c;父类…

【论文阅读笔记】InstantID : Zero-shot Identity-Preserving Generation in Seconds

InstantID:秒级零样本身份保持生成 理解摘要Introduction贡献 Related WorkText-to-image Diffusion ModelsSubject-driven Image GenerationID Preserving Image Generation Method实验定性实验消融实验与先前方法的对比富有创意的更多任务新视角合成身份插值多身份区域控制合…

Linux操作系统基础(六):Linux常见命令(一)

文章目录 Linux常见命令 一、命令结构 二、ls命令 三、cd命令 四、mkdir命令 五、touch命令 六、rm命令 七、cp命令 八、mv命令 九、cat命令 十、more命令 Linux常见命令 一、命令结构 command [-options] [parameter]说明: command : 命令名, 相应功能的英文单词…

Dubbo源码一:【Dubbo与Spring整合】

正常在项目中&#xff0c;我们都是在Spring环境下使用Dubbo&#xff0c;所以我们这里就在Spring的环境下看看Dubbo是如何运作的 入口 在源码下载下来之后&#xff0c;有一个dubbo-demo目录&#xff0c;里面有一个基于spring注解的子目录dubbo-demo-annotation, 里面有一个生产…

Linux - updatedb 命令

1. 功能 updatedb 命令用来创建或更新slocate命令所必需的数据库文件。updatedb 命令的执行过程较长&#xff0c;因为在执行时它会遍历整个系统的目录树&#xff0c;并将所有的文件信息写入 slocate 数据库文件中。 补充说明&#xff1a;slocate 本身具有一个数据库&#xff…