一文读懂js中的原型链以及new操作符 - 网站源码_资源分享

蓝本链的认知是javascript中的大哥痛点，对新手十分不亲善，甚至对很多工作一两年的开发人员而言，也未能或是说认知javascript中的蓝本链的绝妙结构设计！

他们想认知蓝本链，具体而言他们先要跳脱原型链的直接传授，

因为javascript中的蓝本链只不过牵涉到两个javascript的初心结构设计

,就是他们先要深入探讨呵呵为何javascript要结构设计蓝本链，因此javacript尖萼词汇只不过是没有蓝本链也能轻松继续执行因此保持哥德尔完整的。

具体而言他们看呵呵两个红遍世界的格斗游戏英雄人物国联LOL 的英雄人物制做操作过程他们用javascrip叙述下列英雄人物薇恩(vn)。

这时他们用javascript中的第一类来演示英雄人物国联中的英雄人物的机能和特性。

var hero = { heroName:vn, heroLife:95%, Q(){ //冲撞伏击繁杂叙述符略去 console.log替代操作过程 console.log(冲撞伏击薇恩摇动到最合适边线，为到时候反击搞好预备。她的到时候反击导致附加危害。) }, W(){ //圣银火绳繁杂叙述符略去 console.log替代操作过程 console.log(闪避伏击圣银火绳薇恩用珍贵金bai制做箭弩，让恶魔敌方食物中毒。对同两个最终目标的第3次反击或专业技能燃放会对其导致附加真实世界危害，值相等于最终目标最大生命值一定比率。（对恶魔最多导致200危害) }, E(){//恶魔公开审判繁杂叙述符略去 console.log替代操作过程 console.log(恶魔公开审判薇恩从另一面掏出重弩，朝最终目标升空巨箭，对其导致危害并击溃他们。如果在击溃操作过程中对撞墙或是地貌边沿，最终目标将受附加危害并眩晕。) }, R(){ //正面交锋关键时刻繁杂叙述符略去 console.log替代操作过程 console.log(正面交锋关键时刻誓死一战。她获得附加反击力，在冲撞伏击期间潜行，暗夜猎手（被动）生效时加速效果提高3倍。) } }

好，以上是两个英雄人物的第一类定义，英雄人物国联中有两个模式叫做：克隆模式

格斗游戏玩法界面是这样的，下列是十个英雄人物薇恩

十个一样的英雄同场作战, 甚至私服 mod 可以容纳更多的英雄人物, 他们用代码来叙述呵呵！

var heros = [] var hero for (var i = 0; i<10; i++) { var heroVn = { heroName:vn, heroLife:95%, Q(){ //冲撞伏击繁杂叙述符略去 console.log替代操作过程 console.log(冲撞伏击薇恩摇动到最合适边线，为到时候反击搞好预备。她的到时候反击导致附加危害。) }, W(){ //圣银火绳繁杂叙述符略去 console.log替代操作过程 console.log(冲撞伏击圣银火绳薇恩用珍贵金bai制做箭弩，让恶魔敌方食物中毒。对同两个最终目标的第3次反击或专业技能燃放会对其导致附加真实世界危害，值相等于最终目标最大生命值一定比率。（对恶魔最多导致200危害) }, E(){ //恶魔公开审判繁杂叙述符略去 console.log替代操作过程 console.log(恶魔公开审判薇恩从另一面掏出重弩，朝最终目标升空巨箭，对其导致危害并击溃他们。如果在击溃操作过程中对撞墙或是地貌边沿，最终目标将受附加危害并眩晕。) }, R(){//正面交锋关键时刻繁杂叙述符略去 console.log替代操作过程 console.log(正面交锋关键时刻誓死一战。她获得附加反击力，在冲撞伏击期间潜行，暗夜猎手（被动）生效时加速效果提高3倍。) } } heros.push(heroVn) }//制造出了十个英雄人物vn console.log(heros)

这样结构设计只不过是没问题的, 英雄人物的专业技能组成, 以及思路都是没问题，但是这样结构设计格斗游戏人物有j几个重大的缺陷！！！！

这种代码存在两个巨大的缺陷不利于商业化，可以观察到这十个英雄人物唯一在格斗游戏中不同的只是 heroLife(玩家受的危害不用生命值显示不同，会根据玩家受的危害不同而减少，每个玩家的生命值在格斗游戏中都是动态变化的。heroName(英雄人物名字) 以及英雄人物的四个专业技能 Q W E R 十个英雄人物，都是一样的。没必要重复创造十次，去占据内存，白白消耗用户的机器性能。只有heroLife 英雄人物的血量根据格斗游戏的操作过程受的危害不同而动态改变，那样就得想两个办法，让这个英雄人物共用heroName 以及Q W E R 以达到节约内存的效果！

他们将代码进行改进

//共有特性 var vn = function(){ } vn.prototype = { heroName:vn, Q(){ //冲撞伏击繁杂叙述符略去 console.log替代操作过程 console.log(冲撞伏击薇恩摇动到最合适边线，为到时候反击搞好预备。她的到时候反击导致附加危害。) }, W(){ //圣银火绳繁杂叙述符略去 console.log替代操作过程 console.log(冲撞伏击圣银火绳薇恩用珍贵金bai制做箭弩，让恶魔敌方食物中毒。对同两个最终目标的第3次反击或专业技能燃放会对其导致附加真实世界危害，值相等于最终目标最大生命值一定比率。（对恶魔最多导致200危害) }, E(){ //恶魔公开审判繁杂叙述符略去 console.log替代操作过程 console.log(恶魔公开审判薇恩从另一面掏出重弩，朝最终目标升空巨箭，对其导致危害并击溃他们。如果在击溃操作过程中对撞墙或是地貌边沿，最终目标将受附加危害并眩晕。) }, R(){ //正面交锋关键时刻繁杂叙述符略去 console.log替代操作过程 console.log(正面交锋关键时刻誓死一战。她获得附加反击力，在冲撞伏击期间潜行，暗夜猎手（被动）生效时加速效果提高3倍。) } } var heros = [] var vn1 for (var i = 0; i<10; i++) { vn1 = {heroLife:初始100后续会根据每个英雄人物受危害不同动态变化 } vn1.__proto__ = vn.prototype }

好了, 通过以上的改进, 他们就达到他们的目的, 英雄人物的生命值属于, 每两个唯一id的英雄人物, 但是英雄人物的共有特性不在占据独有的内存空间而是去指向共有的英雄人物特性不在白白浪费内存空间了！这也是蓝本链结构设计的最终目的以及初衷！

但是这样的写法, 很拗口也很难认知, JS的官方组织也有意去弱化这个结构设计，让不知道这个结构设计的开发人员也可以很好的使用这个机能去节约内存,然后就有了new 运算符！

new运算符实际上只做了四步

新生成两个第一类链接到蓝本绑定 this返回新的第一类

下列代码演示, 被隐藏的这一步

var 临时第一类 = {} 临时第一类.__proo__ = vn.prototype //this赋值和指向临时第一类.heroLife = heroLifereturn 回去这个临时第一类

你可以认知成: 是把上面的详细代码的操作过程给你隐藏, 直接让你得到两个绑定好蓝本链不占用内存的两个新的第一类。此例中是英雄人物vn。

而实际上的蓝本链是两个为了不占用内存空间而寻祖的操作过程他们再通过一幅图来很好的认知蓝本链！