位置: 编程技术 - 正文

JavaScript面向对象之Prototypes和继承(javascript面向对象 第三方类库)

编辑:rootadmin
一、前言 本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继承做了详细的分析和阐述,是理解JS OO 的佳作之一。翻译不好的地方望大家修改补充。 二、正文 JavaScript中的面向对象不同于其他语言,在学习前最好忘掉你所熟知的面向对象的概念。JS中的OO更强大、更值得讨论(arguably)、更灵活。 1.类和对象 JS从传统观点来说是面向对象的语言。属性、行为组合成一个对象。比如说,JS中的array就是由属性和方法(如push、reverse、pop 等)组合成的对象。 问题是:这些方法(如push)从哪里来的?一些静态语言(比如JAVA)用class来定义一个对象的结构。但是JS是没有”class"(classless)的语言,没有一个叫做“Array"的类定义了这些方法给每个array去继承。因为JS是动态的,我们可以在需要的时候随意的往对象中添加方法。例如,下面的代码定义了一个对象,该对象表示二维空间中的坐标,里面有一个add方法。 我们想让每一个point对象都有一个add方法。我们也希望所有的poin对象共享一个add方法,而不必把add方法加到所有的point对象当中。这就需要让prototype登场了。 2.关于Prototypes JS中每一个对象都有一个隐含的属性(state)——对另一个对象的引用,称为对象的prototype.我们上面创建的array和point当然也都含有各自prototype的引用。prototype引用是隐含的,但是它是ECMAScript已实现的,允许我们使用对象的_proto_(在Chrome中)属性来获取它。从概念上理解我们可以认为对象和prototype的关系就像下图所表示的:

作为开发者,我们将用Object.getPrototypeOf 函数来替代_proto_属性来查看对象的prototype引用。在写这篇文章的时候,Object.getPrototypeOf这个函数已经在Chrome,firefox,还有IE9中提供了支持。在未来还会有更多的浏览器来支持这一特性,这已经是ECMAScript的标准之一。我们可以用以下代码来证明myArray和我们之前创建的point对象确实引用了两个不同的prototype对象。 在文章接下来的部分,我还将使用到_proto_,主要是因为_proto_在图示和句子里里比较直观。但要记住这不是规范的,Object.getPrototypeOf才是用来获取对象prototype的推荐方法。 2.1是什么使Prototypes如此特别? 我们已经知道了array的push方法来自myArray的prototype对象。图2是Chrome中的一个截图,我们调用Object.getPrototypeOf方法来取得myArray的prototype对象。

图 2 注意到myArray的prototype对象里包含了很多方法,比如push、pop还有reverse这些我们在开头代码里使用过的。prototype对象才是push方法的唯一拥有者,但这个方法是如何通过myArray调用到的呢? 要想明白它是怎样实现的,第一步是认清Protytype一点儿不特殊。Prototype就是一些对象。我们可以给这些对象添加方法、属性,像其他任何的JS对象一样。但同时Prototype也是一个特殊的对象。 Prototype的特殊是因为下列规则:当我们通知JS我们想要在一个对象上调用push方法或是读取某个属性的时候,解释器(runtime)首先去寻找这个对象本身的方法或属性。如果解释器没有找到该方法(或属性)就会沿着_proto_引用去寻找对象的prototype中的各个成员。当我们在myArray中调用push方法,JS没有在myArray对象中找到push,但是在myArray的prototype对象中找到了push,即调用了该push方法(图3)。

图 3 我所描述的这种行为本质上就是对象本身继承了 它的prototype中的所有方法和属性。我们在JS中不需要用class来实现这种继承关系。即,一个JS对象从它的prototype中继承特性。 图3还告诉我们每个array对象都能维护自己的状态(state)和成员。如果我们需要myArray的length属性,JS将从myArray中找到length的值而不会去prototype中去寻找。我们能运用这个特性来“override"一个方法,即,将需覆盖的方法(像push)放到myArray自己的对象中。这样做就可以有效的将prototype中的push方法隐藏掉。 3.共享Prototype Prototype在JS中真正神奇的地方是多个对象能引用同一个prototype对象。比如,我们创建两个数组: 这两个数组将共享一个相同的prototype对象,下面的代码将返回true 如果我们在两个数组中调用push方法,JS将调用他们共同的prototype中的push。

Prototype对象在JS中给我们这种继承的特性,它们也允许我们共享方法的实现。Prototype也是链式的。换句话说,prototype是一个对象,那么prototype对象也可以拥有一个指向别的prototype对象的引用。从图2中可以看到prototype的_proto_属性是一个不为null的值也指向另外一个prototype.当JS开始寻找成员变量的时候,比如push方法,它将沿着这些prototype的引用检查每一个对象直到找到这个对象或达到链的尾部为止。这种链的方式更增加了JS中继承和共享的灵活性。 接下来你也许会问:我怎样设置自定义对象的prototype引用?比如,我们之前创建过的对象point,我们怎样加入一个add方法到prototype对象中,让所有的point对象都能继承它?在我们回答这个问题之前,我们先了解一下JS中的函数. 4.关于Funciton 函数在JS中同样也是对象。函数在JS中有很多重要的特性,在此文章中我们不能一一列举。但像把一个函数赋值给一个变量或是将一个函数当做另外一个函数的参数在当今的JS编程中是很基础的方式。 我们需要关注的是:因为函数是对象,所以它拥有方法、属性和一个prototype对象的引用。我们一起讨论一下下面代码的含义: 第一行代码证明Array在JS中是一个函数。待会儿我们将看到怎样调用Array函数来创建一个新的array对象。 第二行代码证明Array对象和function对象引用相同的prototype,就像我们之前看到的所有的array对象共享一个prototype。 最后一行证明Array函数有一个prototype属性。千万不要将这个prototype属性和_proto_属性混淆了。它们的使用目的和指向的对象都不相同。 我们用新学的知识重画之前的图片:

图 5

现在我们要创建一个array对象。其中一种方法就是: 尽管上面的代码看起来不错,但问题是不是每一个JS的环境都支持对象的_proto_属性。幸运的是,JS内置一个标准的机制用来创建新对象同时设置对象的_proto_属性,这就是“new”操作符。 “new”操作符在JS中有三个重要的任务:首先,它创建一个新的空对象。接着,它设置这个新对象的_proto_属性指向调用函数的prototype属性。最后,执行调用函数同时把“this”指针指向新的对象。如果我们把上面的两行代码展开,将得到以下的代码: 函数的“call”方法允许你调用一个函数同时指定这个函数里面的"this"指向传入的新对象。当然,我们也想通过上面的方法来创建我们自己的对象来实现对象的继承,这种函数就是我们所熟知的——构造函数。 5.构造函数 构造函数是一个有两个独特标识的普通JS函数对象: 1.首字母大写(容易识别)。 2.用new操作符连接来构造新对象。 Array就是一个构造函数——Array函数用new连接、首字母大写。JS中的Array函数是内置的,但任何人都可以创建自己的构造函数。事实上,我们终于到了该为point对象来创建一个构造函数的时候了。 上面的代码中我们使用new操作符和Point函数来来构造一个point对象。在内存中你可以把最终的结果想成图6所表示的样子。

图 6 现在的问题是,add方法存在于每一个point对象中。鉴于我们对prototype的了解,把add方法加到Point.prototype中是一个更好的选择(不必把add方法的代码拷贝到每个对象中)。为了实现这个目的,我们需要在Point.prototype对象上做些修改。 好了!我们已经用prototype实现了JS中的继承!

6.总结 希望能通过这篇文章让你能拨开prototype的迷雾。当然这只是功能强大又灵活的prototype的入门。更多的关于prototype的知识还是希望读者能够自己去探索和发现。

推荐整理分享JavaScript面向对象之Prototypes和继承(javascript面向对象 第三方类库),希望有所帮助,仅作参考,欢迎阅读内容。

JavaScript面向对象之Prototypes和继承(javascript面向对象 第三方类库)

文章相关热门搜索词:javascript面向对象精要,javascript面向对象编程,javascript面向对象精要pdf,javascript面向对象编程指南 pdf,javascript面向对象编程指南第三版,javascript面向对象编程指南第三版,javascript面向对象吗,javascript面向对象吗,内容如对您有帮助,希望把文章链接给更多的朋友!

写自已的js类库需要的核心代码 (function(win){vartoString=Object.prototype.toString;varhasOwn=Object.prototype.hasOwnProperty;varclass2type={};class2type["[objectBoolean]"]="boolean";class2type["[objectNumber]"]="number";class2type

JavaScript面向对象(极简主义法minimalist approach) 极简主义法荷兰程序员GabordeMooij提出了一种比Object.create()更好的新方法,他称这种方法为"极简主义法"(minimalistapproach)。这也是我推荐的方法。3.1封装

javascript面向对象入门基础详细介绍 什么是对象简单点说,编程语言中的对象是对现实中事物的简化。例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象。

标签: javascript面向对象 第三方类库

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

上一篇:JavaScript中的面向对象介绍(js中的面向对象)

下一篇:写自已的js类库需要的核心代码(javascript类库)

  • 应纳附加税是什么
  • 分公司可以独立开银行账户吗
  • 机械费可以计入劳务单价吗
  • 技术服务费3%
  • 个税申报填写的工资是应发还是实发
  • 公司收到的拆迁补偿款计入哪个科目
  • 公司报销专用发票
  • 新会计准则有预提费用吗
  • 存款取款业务记入那个日记账?
  • 未及时转固
  • 公司代缴员工个税
  • 普通发票和专用发票的税点一样吗
  • 中药税率什么时候变为9
  • 利润表净利润等于科目余额表
  • 个体工商户可以给自己交五险一金吗
  • 计提印花税怎么做凭证
  • 费用,资产,成本,损失的区别
  • 收到专项拨款属于什么科目
  • 非同一控制下企业合并商誉的计算
  • 股东利润分配预缴税款
  • 科目编码首位与分类编号不符,接受此编码吗
  • 苹果macos catalina10.15.7
  • 在Win7中,鼠标非最大化
  • kb4586853更新
  • mac更新内容
  • 企业因政策性原因发生的巨额经营亏损
  • php_sapi_name
  • jusched.exe是什么进程
  • 投资性房地产减值准备为什么不能转回
  • php7多线程支持如何
  • 大前端最新
  • 应收账款为负数正常吗为什么
  • vue使用教程
  • 制造费用的工资怎么结转
  • javascript入门基础
  • opencv安装教程vs2019
  • PHP中set_include_path()函数相关用法分析
  • 帝国cms怎么安装不了
  • 未拿到发票怎么做账
  • vue实现回车登录
  • 职工福利能开专票吗
  • 已交土地使用金的划拨商品房与商品房的的区别
  • 投资款未备注
  • 免税公司专用发票是什么
  • 国外货物进入保税仓需要办理什么
  • sql server 性能优化
  • 固定资产办理竣工结算之后的处理方式
  • 国库券利息收入属于企业所得税纳税调整项目
  • 国有企业投资程序
  • 营改增是从什么时候开始实施的
  • 什么叫做进项税不得抵扣
  • 折旧和摊销的概念
  • 实收资本主要包括哪些
  • 期末结账后没有余额的科目
  • 增值税结转是月结转还是年度
  • 残疾人保障金必须交吗
  • sql server的mdf文件怎么导入数据库
  • MYSQL updatexml()函数报错注入解析
  • mysql5.7.31
  • win7怎么删除win10系统
  • WINDOWS操作系统内置的GUEST
  • mmc无法创建管理单元win10
  • window 脚本
  • win7取消还原
  • win10预览文件怎么显示内容
  • 在linux操作系统中
  • jquery插件大全
  • 如何短时间内学会打字
  • 批处理作用
  • node.js中的http.response.removeHeader方法使用说明
  • python利用format方法保留三位小数
  • Unity3D值Input Manager
  • js 在线调试
  • python解析函数
  • 如何用javascript
  • 安卓获取图片路径
  • 国家税务总局票据丢失罚款标准
  • 智能财税证书含金量多少
  • 财务顾问属于什么业务
  • 村纪检书记主要工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设