位置: 编程技术 - 正文

前端开发必须知道的JS之原型和继承(前端开发需要哪些技能)

编辑:rootadmin
一. 原型与构造函数   Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型。譬如普通函数:   构造函数,也即构造对象。首先了解下通过构造函数实例化对象的过程。 实例化obj对象有三步:   1. 创建obj对象:obj=new Object();   2. 将obj的内部__proto__指向构造他的函数A的prototype,同时,obj.constructor===A.prototype.constructor(这个是永远成立的,即使A.prototype不再指向原来的A原型,也就是说:类的实例对象的constructor属性永远指向"构造函数"的prototype.constructor),从而使得obj.constructor.prototype指向A.prototype(obj.constructor.prototype===A.prototype,当A.prototype改变时则不成立,下文有遇到)。obj.constructor.prototype与的内部_proto_是两码事,实例化对象时用的是_proto_,obj是没有prototype属性的,但是有内部的__proto__,通过__proto__来取得原型链上的原型属性和原型方法,FireFox公开了__proto__,可以在FireFox中alert(obj.__proto__);   3. 将obj作为this去调用构造函数A,从而设置成员(即对象属性和对象方法)并初始化。   当这3步完成,这个obj对象就与构造函数A再无联系,这个时候即使构造函数A再加任何成员,都不再影响已经实例化的obj对象了。此时,obj对象具有了x属性,同时具有了构造函数A的原型对象的所有成员,当然,此时该原型对象是没有成员的。   原型对象初始是空的,也就是没有一个成员(即原型属性和原型方法)。可以通过如下方法验证原型对象具有多少成员。   但是,一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有对象,都继承了这些原型属性和原型方法,这是通过内部的_proto_链来实现的。   譬如   A.prototype.say=function(){alert("Hi")};   那所有的A的对象都具有了say方法,这个原型对象的say方法是唯一的副本给大家共享的,而不是每一个对象都有关于say方法的一个副本。 二. 原型与继承   首先,看个简单的继承实现。   第5、6、7行:创建临时属性tmpObj引用构造函数A,然后在B内部执行,执行完后删除。当在B内部执行了this.x=x后(这里的this是B的对象),B当然就拥有了x属性,当然B的x属性和A的x属性两者是独立,所以并不能算严格的继承。第5、6、7行有更简单的实现,就是通过call(apply)方法:A.call(this,x); 这两种方法都有将this传递到A的执行里,this指向的是B的对象,这就是为什么不直接A(x)的原因。这种继承方式即是类继承(js没有类,这里只是指构造函数),虽然继承了A构造对象的所有属性方法,但是不能继承A的原型对象的成员。而要实现这个目的,就是在此基础上再添加原型继承。   通过下面的例子,就能很深入地了解原型,以及原型参与实现的完美继承。(本文核心在此^_^)   这个例子讲的就是B继承A。第7行类继承:A.call(this.x);上面已讲过。实现原型继承的是第行:B.prototype = new A();   就是说把B的原型指向了A的1个实例对象,这个实例对象具有x属性,为undefined,还具有a属性,值为"a"。所以B原型也具有了这2个属性(或者说,B和A建立了原型链,B是A的下级)。而因为方才的类继承,B的实例对象也具有了x属性,也就是说obj对象有2个同名的x属性,此时原型属性x要让位于实例对象属性x,所以obj.x是1,而非undefined。第行又定义了原型方法b2,所以B原型也具有了b2。虽然第9~行设置了原型方法b1,但是你会发现第行执行后,B原型不再具有b1方法,也就是obj.b1是undefined。因为第行使得B原型指向改变,原来具有b1的原型对象被抛弃,自然就没有b1了。   第行执行完后,B原型(B.prototype)指向了A的实例对象,而A的实例对象的构造器是构造函数A,所以B.prototype.constructor就是构造对象A了(换句话说,A构造了B的原型)。 alert(B.prototype.constructor)出来后就是"function A(x){...}" 。同样地,obj.constructor也是A构造对象,alert(obj.constructor)出来后就是"function A(x){...}" ,也就是说B.prototype.constructor===obj.constructor(true),但是B.prototype===obj.constructor.prototype(false),因为前者是B的原型,具有成员:x,a,b2,后者是A的原型,具有成员:a。如何修正这个问题呢,就在第行,将B原型的构造器重新指向了B构造函数,那么B.prototype===obj.constructor.prototype(true),都具有成员:x,a,b2。   如果没有第行,那是不是obj = new B(1,3)会去调用A构造函数实例化呢?答案是否定的,你会发现obj.y=3,所以仍然是调用的B构造函数实例化的。虽然obj.constructor===A(true),但是对于new B()的行为来说,执行了上面所说的通过构造函数创建实例对象的3个步骤,第一步,创建空对象;第二步,obj.__proto__ === B.prototype,B.prototype是具有x,a,b2成员的,obj.constructor指向了B.prototype.constructor,即构造函数A;第三步,调用的构造函数B去设置和初始化成员,具有了属性x,y。虽然不加行不影响obj的属性,但如上一段说,却影响obj.constructor和obj.constructor.prototype。所以在使用了原型继承后,要进行修正的操作。   关于第、行,总言之,第行使得B原型继承了A的原型对象的所有成员,但是也使得B的实例对象的构造器的原型指向了A原型,所以要通过第行修正这个缺陷。   毕了。

推荐整理分享前端开发必须知道的JS之原型和继承(前端开发需要哪些技能),希望有所帮助,仅作参考,欢迎阅读内容。

前端开发必须知道的JS之原型和继承(前端开发需要哪些技能)

文章相关热门搜索词:2021前端开发需要掌握什么技术,前端开发必须知道的知识,前端开发必须知道什么,前端开发必须知道什么,前端开发必须知道的问题,前端开发必须掌握的,前端开发必须掌握的,前端开发必须知道什么,内容如对您有帮助,希望把文章链接给更多的朋友!

javascript对象小结 距离某天还有天javascript对象距离某天还有天[Ctrl+A全选注:如需引入外部Js需刷新才能执行]

JavaScript为对象原型prototype添加属性的两种方式 scripttype="text/javascript"!--/*给原型prototype添加属性的两种方式*///方式一varmyObj=function(){this.study="JavaScript";}myObj.prototype.hobby=function(){this.hobby="Seegirl";}varnewObj

javascript new后的constructor属性 js对象生成时:如:functionBB(a){this.a="kkk"}varb=newBB();这时b是对象有了BB的的属性prototype所指向的prototype对象;prototype对象有constructor属性指向BB这个函数;

标签: 前端开发需要哪些技能

本文链接地址:https://www.jiuchutong.com/biancheng/385721.html 转载请保留说明!

上一篇:JavaScript对象链式操作代码(jquery)(js对象类)

下一篇:javascript对象小结(javascript文档对象)

  • 小型微利企业所得税怎么计算
  • 支持疫情防控捐赠语言
  • 交印花税合同上每个月价格要一样吗
  • 旅游交什么税
  • 企业增值税免税需要备案吗
  • 一般增值税怎么开票的
  • 工会经费需要计税吗
  • 专项产资金支出要怎么做分录?
  • 购买可供出售金融资产的交易费用
  • 公司收内部职工停车费如何确认收入?
  • 所得税汇算清缴补税的会计处理
  • 企业净资产指的是什么?
  • 资产负债表写错数字怎么改
  • 退股支付的现金流量表怎么填
  • 一般纳税人购进原材料支付的增值税
  • 支票进账对方没钱开户行会打电话叫他存钱吗?
  • 加工费月底需要全部结转吗
  • 研发费用加计扣除是什么意思啊
  • 货物装卸过程中由于操作不当或违反操作规程
  • 企业买断政策
  • 在电脑上呢
  • windows 11怎么用
  • php获取文件扩展内容
  • PHP:curl_multi_strerror()的用法_cURL函数
  • 预收账款什么时候开发票
  • mac应用程序图标
  • ac1203路由器
  • 收到现金股利或债券利息时会计分录
  • 租入经营用房屋的改良支出
  • 最快的计算机是量子计算机吗
  • vue3+ts+vite
  • 勃朗峰高度
  • qss 设置字体
  • 基于stm32f103c8t6的毕业设计
  • 图表库网站
  • vgextend命令作用及含义
  • php打包phar
  • 运输费怎么做会计分录
  • 一般纳税人餐饮服务可以抵扣吗
  • 捐赠利得计入营业外收入吗?
  • 季度所得税收入大于成本利润是负号
  • python中dataframe的布尔过滤
  • 预缴分包抵扣,所有分包都可以抵扣吗
  • 公司不可以销售车辆吗
  • 销售退回怎么写分录
  • 累计折旧计提会计分录
  • 公司的装修费计入什么科目
  • 人力资源公司劳务外包
  • 房地产企业的业务范围
  • 在建工程的成本包括应交增值税吗
  • 贷款转入账号
  • 医保卡收到钱
  • 工会里的钱
  • 库存股算什么科目
  • 外经证预交税款可以以后月份抵扣吗
  • 企业营业外支出是什么意思
  • 加油吃饭开的发票抵什么税
  • 仓管需要会计证吗
  • 2021年会计做账报税详细流程
  • 企业代购是什么意思
  • 零售商品销售的具体核算步骤
  • mysql查询语句大全讲解
  • oracle教程入门
  • mysql 错误1067
  • 服务器远程超出配置范围
  • 众微科技怎么样
  • linux进程管理器
  • win7系统怎样
  • win10edge浏览器怎么设置兼容模式
  • win7打印机图标显示感叹号
  • 详解Javascript ES6中的箭头函数(Arrow Functions)
  • 服务器限制流量
  • js响应鼠标点击不了
  • logcatapp
  • jQuery EasyUI Tab 选项卡问题小结
  • jquery ajax结合thinkphp的getjson实现跨域的方法
  • 广东省电子税务局电话
  • 杨柳青还迁房2024年还建不建
  • 国家产业政策是什么
  • 对金融机构与小型企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设