构造函数、实例、原型对象、继承

一、构造函数与原型对象之间的关系:

有一个Star构造函数,每一个构造函数里面都有一个原型对象,是通过构造函数的prototype指向这个原型对象的

同样在这个原型对象里面也有一个属性叫constructor,它又指回了构造函数

可以把构造函数看为是父亲,父亲通过prototype指向儿子原型对象,告诉别人看我有一个厉害的儿子叫原型对象,而原型对象里面又有一个属性constructor,又指回了构造函数说,看我有一个厉害的老爹,两人互相吹捧了一番

二、构造函数、实例对象与原型对象之间的关系:

我们可以通过构造函数创建一个实例对象,只要new了构造函数就可以产生一个实例对象,所以构造函数又可以指向这个对象实例,我们知道在这个实例对象中也有一个原型__proto__,这个__proto__指向的是Star原型对象,当然了我们对象实例里面也有一个constructor,它可以指回构造函数

在这里插入图片描述

三、原型链

只要是对象就有__proto__原型,指向原型对象

原型对象里面的__proto__原型指向的是Object.prototype

function Star(uname,age){this.uname = uname;this.age = age;
}
Star.prototype.sing = function(){console.log("我会唱歌");
}
var zxz = new Star('张信哲',18);
// 只要是对象就有__proto__原型,指向原型对象
console.log(Star.prototype);
console.log(Star.prototype.__proto__ === Object.prototype);// true
// 我们Star原型对象里面的__proto__原型指向的是Object.prototype
console.log(Object.prototype.__proto__);
// 我们的Object.prototype原型对象里面的__proto__原型 指向为null

在这里插入图片描述

四、JavaScript对象成员查找机制(规则)

  • 当访问一个对象的属性(包含方法)时,首先查找这个对象自身有没有该属性

  • 如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)

  • 如果还没有就查找原型对象的原型(Object的原型对象)

  • 依次类推一直找到Object为止(null)

  • __proto__对象原型的意义就在于为对象成员查找机制提供一个方向或者说一条路线。

var that;
function Star(name,age){
// 在构造函数中,里面的this指向的是实例对象
this.name = name;
this.age = age;
}
Star.prototype.sing = function(){
// 原型对象函数中的this,指向的是实例对象,mxq对象that = this;console.log("我会唱歌");
}
// Star.prototype.sex = "女"
Object.prototype.sex = "女"
var mxq = new Star("萌小七",18)
// mxq.sex = "女"
console.log(mxq.sex);// 输出女
mxq.sing();
console.log(that === mxq);// true
原型对象this指向:在构造函数中,里面的this指向的是实例对象原型对象函数中的this,指向的是实例对象

五、利用原型对象扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

注:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {},只能是Array.prototype.xxx = function(){}的方式。

Array.prototype.sum = function(){var total = 0for(var i=0;i<this.length;i++){total += this[i]}return total;
}
var arr = [5,6,7];
arr.sum(); // 18

六、继承

ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承,用原型链实现对原型属性和方法的继承,借用构造函数技术来实现实例属性的继承。

1、借用构造函数继承父类型属性

核心原理:通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。

call() 作用:调用这个函数并且修改函数运行时this的指向

fun.call(thisArg,arg1,arg2,...)

thisArg:当前调用函数this的指向对象

arg1,arg2:传递的其他参数

function fn(x,y){console.log(this);console.log("我想出去玩");console.log(x+y)
}
var obj = {name:"萌小七"
}
fn();// this指向的是window,我想出去玩
// call()可以调用函数
fn.call();// this指向的是window,我想出去玩
// call() 可以改变这个函数的this指向,此时这个函数的this就指向了obj这个对象
fn.call(obj,1,2);// {name: "萌小七"} 我想出去玩 3

举例说明:借用父构造函数继承属性

function Father(name,age){// this指向父构造函数的对象实例this.name = namethis.age = age
}
function Son(name,age,score){// this指向子构造函数的对象实例Father.call(this,name,age)this.score = score
}
var son = new Son("小丸子",18,98)
console.log(son); // 输出:Son {name: "小丸子", age: 18, score: 98}

此时子构造函数继承了父构造函数的属性

2、利用原型对象继承方法: Son.prototype = new Father();

function Father(name,age){// this指向父构造函数的对象实例this.name = namethis.age = age
}
function Son(name,age,score){// this指向子构造函数的对象实例,构造函数来复制父类的属性给Son实例Father.call(this,name,age)this.score = score
}
Father.prototype.money = function(){console.log("父亲要挣钱")
}
// Son.prototype = Father.prototype
// 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起改变
Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor指回原来的原型对象
Son.prototype.constructor = Son
Son.prototype.school = function(){console.log("孩子要上学")
}
var son = new Son("小丸子",18,98)
console.log(son);
console.log(Father.prototype);

在这里插入图片描述
在这里插入图片描述

优点:

父类的方法可以被复用

父类的引用属性不会被共享

子类构建实例时可以向父类传递参数

缺点:

第一次调用Father():给Son.prototype写入两个属性name,age。

第二次调用Father():给instance1写入两个属性name,age。

实例对象son上的两个属性就屏蔽了其原型对象Son.prototype的两个同名属性。所以,组合模式的缺点就是在使用子类创建实例对象时,其原型中会存在两份相同的父类实例的属性/方法。这种被覆盖的情况造成了性能上的浪费。


寄生组合继承(最优方案)
组合继承会有两次调用父类的构造函数而造成浪费的缺点,寄生组合继承就可以解决这个问题。

核心在于inheritPrototype(son, father),让子类的prototype指向父类原型的拷贝,这样就不会调用父类的构造函数,进而引发内存的浪费问题。

function inheritPrototype(son, father) {// 修正子类原型对象指针,指向父类原型的一个副本 (用object()也可以) son.prototype = Object.create(father.prototype)// 增强对象,弥补因重写原型而失去的默认的constructor属性son.prototype.constructor = son
}
function Father(name,age){
// this指向父构造函数的对象实例
this.name = name
this.age = age
}
function Son(name,age,score){
// this指向子构造函数的对象实例,构造函数来复制父类的属性给Son实例Father.call(this,name,age)
this.score = score
}
Father.prototype.money = function(){console.log("父亲要挣钱")
}
inheritPrototype(Son, Father)
Son.prototype.school = function(){
console.log("孩子要上学")
}
var son = new Son("小丸子",18,98)
console.log(son);
console.log(Father.prototype);

在这里插入图片描述
【转载】https://mp.weixin.qq.com/s/FZTgakDp-jQc1Ic4NT7WYg

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

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

相关文章

从中心走向边缘——深度解析云原生边缘计算落地痛点

简介&#xff1a;边缘计算平台的建设&#xff0c;以 Kubernetes 为核心的云原生技术体系&#xff0c;无疑是当前最佳的选择与建设路径&#xff1b;但是云原生体系庞大&#xff0c;组件复杂&#xff0c;将体系下沉至边缘会面临很大的挑战与困难&#xff0c;同时充满巨大的机遇及…

5G+元宇宙创新应用来了,第五届“绽放杯”5G 应用征集大赛云 XR 专题赛落下帷幕...

2022“云 XR 年度十大标杆案例”诞生&#xff01;8 月 31 日&#xff0c;第五届“绽放杯”5G 应用征集大赛云 XR 专题赛决赛在浙江杭州举办&#xff0c;经全天激烈角逐&#xff0c;“中国历代绘画大系 5G 云 XR 应用”等 10 个优秀项目脱颖而出荣获一等奖&#xff0c;并将经组委…

阿里云资深专家李国强:云原生的一些趋势和新方向

简介&#xff1a;云原生不仅仅是技术&#xff0c;更重要的是云原生技术需要和云计算进行结合&#xff0c;帮助用户构建云原生架构的应用。 2021 年 11 月 26 日&#xff0c;阿里云用户组&#xff08;AUG&#xff09;第 3 期活动在广州顺利举行。具有丰富的容器、微服务等领域经…

从建好到用好,阿里云原生微服务生态的演进

简介&#xff1a;随着微服务技术的成熟&#xff0c;微服务核心架构分层愈加清晰&#xff0c;技术标准化和产业化正在形成&#xff0c;服务治理成为用好、管好服务的必选项&#xff0c;服务网格则成为多语言微服务架构下的技术趋势&#xff0c;阿里云原生微服务生态的演进恰好映…

韵达基于云原生的业务中台建设 | 实战派

简介&#xff1a;本文将为大家分享韵达业务中台基于云原生的建设过程。主要分为三部分&#xff0c;第一部分是 IT 信息的发展规划&#xff0c;第二部分是韵达业务中台建设的详细过程&#xff0c;第三部分是对应云原生技术的支撑。 本文将为大家分享韵达业务中台基于云原生的建…

阿里云PolarDB开源数据库社区与 Tapdata 联合共建开放数据技术生态

简介&#xff1a;近日&#xff0c;阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态。 近日&#xff0c;阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态。在此之际&#xff0c;一直专注实时数据服务平台的 Tapdata &#xff0c…

要打造一款稳定顺滑、火遍全球的游戏?云将成为你的坚实后盾

简介&#xff1a;游戏上云&#xff0c;就选阿里云 从简单的棋牌游戏&#xff0c;到大型的角色扮演游戏&#xff0c;各式各样的游戏已经成为了互联网文娱产业的丰富内容生态。 游戏天然是一种线上内容消费&#xff0c;出海有着天然的优势&#xff0c;像《原神》等优质国产游戏…

阿里达摩院发布并开源“通义”大模型,AI底座之上促场景创新

2022 WAIC带上&#xff0c;达摩院发布并开源“通义”大模型&#xff0c;在国内率先构建了AI统一底座&#xff0c;在业界首次实现模态表示、任务表示、模型结构的统一。 9月2日&#xff0c;阿里巴巴达摩院主办世界人工智能大会“大规模预训练模型”主题论坛。会上&#xff0c;达…

EventBridge 与 FC 一站式深度集成解析

简介&#xff1a;本篇文章通过对 EventBridge 与 FC 一站式深度集成解析和集成场景的介绍&#xff0c;旨在帮助大家更好的了解面对丰富的事件时&#xff0c;如何使用 EventBridge 与 FC 的一站式集成方案&#xff0c;快速基于事件驱动&#xff08;EDA&#xff09;架构建云上业务…

react实现页面多个模块的切换

前言 这是做的一个多模块切换的一个案例&#xff0c;也是第一会这样大量的使用表单&#xff0c;大概有7&#xff0c;8个模块&#xff0c;这里用其中的一个模块来做展示 以下三张图片对应的就是三个模块了 这是第一个展示面这是第二个编辑页 这是呈现数据的页面 实现过程 …

使用 Serverless Devs 插件快速部署前端应用

简介&#xff1a; 近期函数计算和 serverless-devs/s 都更新了一系列的功能, 目前部署静态网站的步骤可以更为简洁了! 作者&#xff1a;邓超 Serverless Devs 开源贡献者 背景 我们在上文 [Aliyun] [FC] 如何使用 serverless-devs/s 部署静态网站到函数计算 中&#xff0c;…

基于 EventBridge 构建数据库应用集成

简介&#xff1a;本文重点介绍 EventBridge 的新特性&#xff1a;数据库 Sink 事件目标。 作者&#xff1a;赵海 引言 事件总线 EventBridge 是阿里云提供的一款无服务器事件总线服务&#xff0c;支持将阿里云服务、自定义应用、SaaS 应用以标准化、中心化的方式接入&#x…

如何合理使用 CPU 管理策略,提升容器性能?

简介&#xff1a;CPU Burst、拓扑感知调度是阿里云容器服务 ACK 提升应用性能的两大利器&#xff0c;它们解决了不同场景下的 CPU 资源管理&#xff0c;可以共同使用。点击下文&#xff0c;查看详情&#xff01; 作者&#xff1a;张佐玮&#xff08;佑祎&#xff09; 前言 在…

技术盘点:容器技术的演进路线是什么?未来有哪些想象空间?

简介&#xff1a;回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 1. 基于容器的分布式云管理加速落地&#xff1a; 2021年5月阿里云峰会上&#xff0c;阿里云发布了一云多形态的部署…

如何快速构建服务发现的高可用能力

简介&#xff1a;保障云上业务的永远在线&#xff0c;是 MSE 一直在追求的目标&#xff0c;本文通过面向失败设计的服务发现高可用能力的分享&#xff0c;以及 MSE 的服务治理能力快速构建起服务发现高可用能力的演示&#xff0c;模拟了线上不可预期的服务发现相关异常发生时的…

火山引擎发布新一代数智平台VeDI,以数据驱动企业数字化增长

数据是“新石油”&#xff0c;经过提炼加工才能创造价值。 9月2日&#xff0c;火山引擎数据智能科技峰会在杭州举办。会上&#xff0c;火山引擎发布新一代企业级数据产品——数智平台VeDI&#xff08;Volcengine Data Intelligence&#xff09;&#xff0c;包括数据引擎、数据…

阿里云服务网格 ASM 正式发布商业化版本

简介&#xff1a;为了更好地满足企业日益加深的大规模使用服务网格产品、服务多语言互通、服务精细治理等需求&#xff0c;2022 年 4 月 1 日起&#xff0c;阿里云服务网格产品 ASM 正式发布商业化版本&#xff0c;为企业在生产环境下大规模落地服务网格能力提供性能、安全、高…

Redis消息队列发展历程

简介&#xff1a;Redis是目前最受欢迎的kv类数据库&#xff0c;当然它的功能越来越多&#xff0c;早已不限定在kv场景&#xff0c;消息队列就是Redis中一个重要的功能。Redis从2010年发布1.0版本就具备一个消息队列的雏形&#xff0c;随着10多年的迭代&#xff0c;其消息队列的…

手机+卫星,到底有多难?

作者 | 小枣君来源 | 鲜枣课堂这几天&#xff0c;关于卫星手机的新闻又火了。根据媒体报道&#xff0c;9月6日即将发布的华为Mate 50系列手机&#xff0c;将具备“卫星通信能力”&#xff0c;在没有网络的地方&#xff0c;可通过卫星系统发送紧急短信。无独有偶&#xff0c;另有…

一线技术人的成长思考总结

简介&#xff1a; 作为长期奋战在一线的技术人&#xff0c;我深刻体会到几个思维能力对技术人成长的重要性&#xff0c;熟练运用这几种思维可以帮助我们快速的进入到新的领域&#xff0c;在分析、定位和解决问题上有很大帮助。作为长期奋战在一线的技术人&#xff0c;我深刻体会…