首页 > 其他分享 >前端原型和原型链构造函数的使用

前端原型和原型链构造函数的使用

时间:2023-08-09 14:31:54浏览次数:31  
标签:function name 前端 Father Son 原型 prototype 构造函数


 

目录

前言

导语


代码部分

 总结

代码部分

 总结


前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

前端原型和原型链构造函数的使用

前端原型和原型链构造函数的使用_ci

前端原型和原型链构造函数的使用_父类_02编辑

代码部分

function Father(name) {
				this.name = name
			}
			Father.prototype.dance = function () {
				console.log('I am dancing')
			}
			function Son(name, age) {
				Father.call(this, name)
				this.age = age
			}
			Son.prototype = Father.prototype
			//为子类添加方法
			Son.prototype.sing = function () {
				console.log('I am singing')
			}
			let son = new Son('小红', 100)
			//此时父类也被影响了
			console.log(Father.prototype,"father") //{dance: 
ƒ, sing: ƒ, constructor: ƒ}

前端原型和原型链构造函数的使用_子类_03

 总结

利用Son.prototype = Father.prototype改变原型指向,但此时我们给子类增加原型方法,同样会影响到父类。

{dance:
ƒ, sing: ƒ, constructor: ƒ}

代码部分

function Father(name) {
				this.name = name
			}
			Father.prototype.dance = function () {
				console.log('I am dancing')
			}
			function Son(name, age) {
				Father.call(this, name)
				this.age = age
			}
			Son.prototype = new Father()
			Son.prototype.sing = function () {
				console.log('I am singing')
			}
			let son = new Son('小红', 100)
			console.log(Father.prototype,"Father") //{dance: ƒ, 
constructor: ƒ}

前端原型和原型链构造函数的使用_ci_04

 总结

子类的原型指向父类的实例,这样就可以顺着原型链共享父类的方法了。并且为子类添加原型方法的时候,不会影响父类。



标签:function,name,前端,Father,Son,原型,prototype,构造函数
From: https://blog.51cto.com/u_14476028/7020408

相关文章

  • 前端将图片转为base64编码
    <script type="text/javascript">        function readAsBase64() {            var file = document.getElementById("imagefile").files[0];            var reader = new FileReader();            reader.readA......
  • 微前端框架哪个好?QianKun还是MicroApp
    在当前云原生微服务、业务中台、低代码平台等IT架构下,不再是传统的烟囱式应用系统建设,而是打破企业业务部门竖井,建立企业级的信息化平台(数据中台、业务中台),那么对业务开发的解耦和聚合将成为关键技术,目前对于系统后端已有成熟的微服务架构,基于SpringBoot开发微服务,通过SpringCloud......
  • 前端原型和原型链构造函数的使用
     目录前言导语代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语前端原型和原......
  • 前端原型和原型链构造函数的使用
     目录前言导语原型的构造器指向构造函数 原型上添加方法注意的地方构造器指向构造函数本身总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌......
  • 记录--前端实用小技巧: 自动合并的网络请求
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助我们经常会遇到一个场景,比如在一个列表中批量获取用户的信息。 如果我们一次性往后端发送几十条请求是非常愚蠢的事情。此时我们就要学会如何使用批量获取的逻辑。但是批量获取有一个问题就是,我需要在用户列表......
  • 前端基础-数组方法
    数组方法备忘单:添加/删除元素:push(...items) ——向尾端添加元素,pop() ——从尾端提取一个元素,shift() ——从首端提取一个元素,unshift(...items) ——向首端添加元素,splice(pos,deleteCount,...items) ——从 pos 开始删除 deleteCount 个元素,并插入 i......
  • 前端实现文件夹的上传和下载
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • 火山引擎DataLeap数据质量动态探查及相关前端实现
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群需求背景火山引擎DataLeap数据探查上线之前,数据验证都是通过写SQL方式进行查询的,从编写SQL,到解析运行出结果,不仅时间长,还会反复消耗计算资源,探查上线后,只需要一次探查,就可以得到整张表的......
  • web前端:main、header、footer、nav、article、section标签的用法
    HTML5添加了诸如main、header、footer、nav、article、section等大量新标签,这些新标签为开发人员提供更多的选择和辅助特性。默认情况下,浏览器呈现这些新标签的方式与div相似。然而,合理地使用它们,可以使你的标签更加的语义化。辅助技术(如:屏幕阅读器)可以通过这些标签为用户提供更......
  • 记录--前端重新部署如何通知用户
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.场景前端构建完上线,用户还停留还在老页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。2.解决方案每次打包写入一个json文件,或者对比生成的script......