位置: 编程技术 - 正文

JavaScript中的原型prototype完全解析(如何理解js中的原型)

编辑:rootadmin

推荐整理分享JavaScript中的原型prototype完全解析(如何理解js中的原型),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript基于原型,如何理解js中的原型,javascript原型,javascript原生,javascript中的原型和原型链,javascript中的原型和原型链,javascript原型,javascript原型,内容如对您有帮助,希望把文章链接给更多的朋友!

要理解JS中的prototype, 首先必须弄清楚以下几个概念 1. JS中所有的东西都是对象

2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype

3. JS中构造函数和实例(对象)之间的微妙关系 构造函数通过定义prototype来约定其实例的规格, 再通过 new 来构造出实例, 他们的作用就是生产对象. 而构造函数(方法)本身又是方法(Function)的实例, 因此也可以查到它的__proto__(原型链)

Object / function F() {} 这样子的就是构造函数啦, 一个是JS原生API提供的, 一个是自定义的 new Object() / new F() 这样子的就是实例啦 实例就"只能"查看__proto__来得知自己是基于什么prototype被制造出来的, 而"不能"再重新定义实例的prototype妄想创造出实例的实例了.

实践出真知, 只有自己动手观察/思考才能真正领悟:

你可能已经晕了, 我们来分解一下。

prototype prototype输出的格式为: 构造函数名 原型 首先看下Object.prototype输出了什么&#; Object {} -> 前面的Object为构造函数的名称, 后面的那个表示原型, 这里是一个{}, 即一个Object对象的实例(空对象) 那么 F {} 我们就明白是什么意思了, F 就是构造函数的名称, 原型也是一个空对象

我们再深入一点, 定义下 F 的原型看看到底会发生些什么&#;

这样我们就清楚的看到 i 是由 F 构造出来的, 原型是 {a: function}, 就是原本的空对象原型新增了一个 a 方法

我们再换一种情况, 完全覆盖 F 的原型会怎么样&#;

咦~ 为什么这里表明 i 是由 Object 构造出来的&#; 不对吧! 因为我们完全将 F 的prototype覆盖, 其实也就是将原型指定为对象{a: function}, 但这会造成原本的constructor信息丢失, 变成了对象{a: function}指定的constructor. 那么对象{a: function}的constructor是什么呢&#; 因为对象{a: function}其实就相对于

那么o的constructor当然是 Object 啦

我们来纠正下这个错误

现在又能得到正确的原型信息了~

原型链

然后来看看什么原型链又是个什么东西&#; 简单的来讲和OOP中的继承关系(链)是一样的, 一层一层往上找, 直至最终的 Object.prototype

最最关键的是要弄清楚JS中哪些东西是(实例)对象, 这个简单了, JS中所有东西都是对象! 再要弄清楚就是任何一个对象都是有一个原型的!

那么我们来证明一下:

JavaScript中的原型prototype完全解析(如何理解js中的原型)

Prototype和__proto__每一个对象都包含一个__proto__,指向这个的对象的“原型”。类似的事情是,每一个函数都包含一个prototype,这个prototype对象干什么的了?

咱们看看如下代码,用构造函数来创建一个对象(上面是用字面量的形式创建对象)。

试想想,这个foo对象的__proto__会指向什么?

一个包含constructor属性的对象?看不太懂没关系,把函数Foo的prototype属性打印出来,对比一下就知道了。

原来,new出来的对象foo的__proto__就只指向函数Foo的prototype。

JS这么设计有何意义了?回忆下上面说的,在JS的世界中,对象不是根据类(模具)创建出来的,而是从原型(另一个对象)衍生出来的。

当我们执行new操作创建一个新的对象时,先不深入new操作的具体实现,但有一点我们是肯定的——就是为新对象的__proto__指向一个原型对象。

就刚才这段代码

foo.__proto__到底要指向谁了?你怎么不能指向Foo这个函数本身吧,虽然函数也是对象,这个有机会会详细讲。但如何foo.__proto__指向Foo固然不合适,因为Foo是一个函数,有很多逻辑代码,foo作为一个对象,继承逻辑处理没有任何意义,它要继承的是“原型对象”的属性。

所以,每个函数会自动生成一个prototype对象,由这个函数new出来的对象的__proto__就指向这个函数的prototype。

总结说了这么多,感觉还是没完全说清楚,不如上一张图。我曾经参考过其他网友的图,但总觉得哪里没说清楚,所以我自己画了一张图,如果觉得我的不错,请点个赞!(老子可是费了牛劲才画出来)。

咱们就着这张图,记住如下几个事实:

1. 每个对象中都有一个_proto_属性。

JS世界中没有类(模具)的概念,对象是从另一个对象(原型)衍生出来的,所以每个对象中会有一个_proto_属性指向它的原型对象。(参考左上角的那个用字面量形式定义的对象obj,它在内存中开辟了一个空间存放对象自身的属性,同时生成一个_proto_指向它的原型——顶层原型对象。)

2. 每个函数都有一个prototype属性。

“构造函数”为何叫构造函数,因为它要构造对象。那么根据上面第一条事实,构造出来的新对象的_proto_属性指向谁了?总不能指向构造函数自身,虽然它也是个对象,但你不希望新对象继承函数的属性与方法吧。所以,在每个构造函数都会有一个prototype属性,指向一个对象作为这个构造函数构造出来的新对象的原型。

3. 函数也是对象。

每个函数都有一些通用的属性和方法,比如apply()/call()等。但这些通用的方法是如何继承的呢?函数又是怎么创建出来的呢?试想想,一切皆对象,包括函数也是对象,而且是通过构造函数构造出来的对象。那么根据上面第二条事实,每个函数也会有_proto_指向它的构造函数的prototype。而这个构造函数的函数就是Function,JS中的所有函数都是由Function构造出来的。函数的通用属性与方法就存放在Function.prototype这个原型对象上。

解析JavaScript面向对象概念中的Object类型与作用域 引用类型引用类型主要包括:Object类型、Array类型、Date类型、RegExp类型、Function类型等等。引用类型使用时,需要从它们身上生成一个对象(实例)。也

JS创建事件的三种方法(实例代码) 1.普通的定义方式inputtype="button"name="Button"value="确定"onclick="Sfont=prompt('请在文本框中输入红色','红色','提示框');if(Sfont=='红色'){form1.style.fontFamily='黑体';for

全面理解JavaScript中的闭包 引子闭包是有权访问另一个函数作用域中的变量的函数。闭包是javascript中很难理解的部分,很多高级的应用都依靠闭包来实现的,我们先来看下面的一

标签: 如何理解js中的原型

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

上一篇:简单解析JavaScript中的__proto__属性(简单解析空中三角测量的意义)

下一篇:解析JavaScript面向对象概念中的Object类型与作用域(java 解析javascript)

  • 我国增值税税率改革带来的影响
  • 购买网银盾计入什么科目
  • 怎么用一证通报税
  • 无形资产建造期间的摊销记在哪里
  • 纳税人转登记期限
  • 无名称发票可以抵扣吗
  • 清洗汽车的目的
  • 自产农产品免征增值税
  • 审计范围包括什么内容
  • 小规模纳税人开普票要交税吗
  • 支付给客户的货款叫什么
  • 建安企业无收入怎么结转成本?
  • 交房租对方开发票怎么开
  • 固定资产原值增加后如何计提折旧
  • 企业认购普通股100万股作为交易性金融资产管理
  • 企业所得税可以选择不弥补亏损吗
  • 售后返租税收规定
  • 纳税等级信息查询
  • 固定资产清理出售合同
  • 视同销售如何纳税调整?
  • 财务费用在汇算清缴时填哪里科目
  • 旧设备出口要交增值税吗
  • 财务部水电费会计分录
  • 一般纳税人认定管理办法
  • 普票被退回如何处理
  • 开发票时已交的税金怎么做帐?
  • 坏账准备如何做账
  • 如何配置无线路由器参数
  • 增值税发票怎么抵税
  • Salzburg with Salzach river, Austria (© MacEaton/Alamy)
  • 多洛米蒂徒步线路
  • php用法
  • php如何创建文件
  • lama羊驼
  • 使用灭火器时要对准火焰的什么部位喷射
  • 利用php将图片转为文字
  • 印花税申报完成如何缴纳
  • 退票产生的费用如何报销
  • 报税系统如何导出发票
  • access使用查询向导固定常数
  • mysql5.7免安装版
  • vue前端页面设计
  • 投资款印花税的计税依据
  • 有限公司也可以向股东核发股票
  • 生产企业生产车间人员密度是多少
  • 税控盘开票机号在哪里能查到
  • 直接转销法还允许使用吗
  • 建筑企业结转成本附件
  • 房租收入如何缴纳增值税
  • 应交税费科目怎么调整
  • 期间费用逐年上升说明什么
  • 负数发票作废后对原发票有影响吗
  • 公司员工机票可以抵扣多少呢
  • 年中未分配利润
  • 现金日记账的登记规范及要求
  • 库存商品盘盈是什么意思
  • 借款跨年要交个税吗
  • 固定制造费用包括变动制造费用吗
  • sqlserver查询重复值
  • mysql主从复制作用
  • sqlserver获取当前年
  • linux 的ll
  • 使用dhcp的好处有哪些
  • 搜索不到WiFi信号是怎么回事
  • window怎么样
  • 苹果手机价格
  • linux swap分区必须吗
  • win7系统笔记本怎么连接wifi
  • 好用linux
  • linux 常见
  • 自由选择工具快捷键
  • jquery 使用
  • python 自定义sort
  • store与storage的区别
  • xcopy命令怎么用
  • jQuery实现ajax的叠加和停止(终止ajax请求)
  • 辽宁省地税社保缴费基数
  • 深圳市国家税务局电子税务局
  • 江苏地税每月社保多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设