你真将原型玩的溜了么?!

本文通过几个具体的代码示例深入浅出地解析了JavaScript中对象的构造过程、原型链及constructor属性的工作原理。

关于原型的介绍我就不在写了。因为网上有很多相关的资料,而且也写得非常好。

那么现在我要给你几段我自己写的代码验证你是否掌握了?!

代码1:

                 function test()

                {
                }

               test.hasOwnProperty("constructor"); // false

               test.__proto__.constructor;   // Function()

               test.prototype.constructor;    // test()

你准确知道它们的输出值么?

如果你知道的话就不用看下问了,如果答错了请耐点心看看下文!

就第一段输出来说吧,这段代码说明不管你是什么对象,你都没有constructor这个属性,这样的设计是很合理的。

那么谁有constructor属性呢,答案是原型!你没听错就是原型!你可能会问,为什么只有原型才有呢??

因为你对对象构造是的过程不太清楚,那么就让我们一起来回顾一下其过程吧。耐点心吧~~~~~~

请看代码2:

                         function test(name)

                          {

                                      this.name = name;

                          }

                         var man = new test(“”hello”);

这段代码大家一定见过类似的,就是用构造函数来返回一个对象。

其过程分为四个阶段:

1)var object = new Object();

2)  object.__proto__  = test.prototype;

3)    运行test(name)函数,这是讲object对象传给this,并运行函数

4)返回object对象        //     如果构造函数里有return语句,且return语句返回对象,那么就会将相关对象返回,否则返回this指向的对象

看到了没有,上面根本就没有关于相关的constructor属性的影子,那么js为了模仿类,应该有构造函数属性啊,那么放哪里了,你应该知道了吧,放在原型里了也就是prototypes所指向的对象里了,在此声明,只有作为原型的对象才有constructor属性,不信的话,你可以去验证一下,在此就不多说了!

好了,解决了constructor的问题了!你现在再看代码1相信你已经能答出输出了!

下面还有一段代码:

代码3:

           function test(name)

                          {

                                      this.name = name;

                          }

                         var man = new test(“”hello”);

                         var girl ={

                                             name: "美女",

                                             age:   "18"

                                         }


                       man.__proto__=girl;

                      man.constructor;        //   Object();

答对了么?!如果打错了,没关系,请把上文再仔细推敲一下!

这段代码里因为constructor的属性改了,所以为了防止信息丢失,所以一般都会加上下面这段代码来补救:

man.constructor = man ;


好了,关于原型掌握的测试就到这里了,如果都会了,相信不管是什么关于原型代码你都能分析的来。末尾再给大家一个题:

test.prototype.__proto__   //    [object Object]

test.prototype.__proto__.proto__   //    null

答对了么,答错了请在仔细看上文,如果还是不理解,请留言!

**项目名称:** 基于Vue.js与Spring Cloud架构的博客系统设计与开发——微服务分布式应用实践 **项目概述:** 本项目为计算机科学与技术专业本科毕业设计成果,旨在设计并实现一个采用前后端分离架构的现代化博客平台。系统前端基于Vue.js框架构建,提供响应式用户界面;后端采用Spring Cloud微服务架构,通过服务拆分、注册发现、配置中心及网关路由等技术,构建高可用、易扩展的分布式应用体系。项目重点探讨微服务模式下的系统设计、服务治理、数据一致性及部署运维等关键问题,体现了分布式系统在Web应用中的实践价值。 **技术架构:** 1. **前端技术栈:** Vue.js 2.x、Vue Router、Vuex、Element UI、Axios 2. **后端技术栈:** Spring Boot 2.x、Spring Cloud (Eureka/Nacos、Feign/OpenFeign、Ribbon、Hystrix、Zuul/Gateway、Config) 3. **数据存储:** MySQL 8.0(主数据存储)、Redis(缓存与会话管理) 4. **服务通信:** RESTful API、消息队列(可选RabbitMQ/Kafka) 5. **部署与运维:** Docker容器化、Jenkins持续集成、Nginx负载均衡 **核心功能模块:** - 用户管理:注册登录、权限控制、个人中心 - 文章管理:富文本编辑、分类标签、发布审核、评论互动 - 内容展示:首页推荐、分类检索、全文搜索、热门排行 - 系统管理:后台仪表盘、用户与内容监控、日志审计 - 微服务治理:服务健康检测、动态配置更新、熔断降级策略 **设计特点:** 1. **架构解耦:** 前后端完全分离,通过API网关统一接入,支持独立开发与部署。 2. **服务拆分:** 按业务域划分为用户服务、文章服务、评论服务、文件服务等独立微服务。 3. **高可用设计:** 采用服务注册发现机制,配合负载均衡与熔断器,提升系统容错能力。 4. **可扩展性:** 模块化设计支持横向扩展,配置中心实现运行时动态调整。 **项目成果:** 完成了一个具备完整博客功能、具备微服务典型特征的分布式系统原型,通过容器化部署验证了多服务协同运行的可行性,为云原生应用开发提供了实践参考。 资源来源于网络分享,仅用于学习交流使用,请勿用于商业,如有侵权请联系我删除!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值