JS中的new干了什么？

Posted 2022-02-06 丞哥-无处不在

前言

可能和js每天打交道的我们都在写new…，比如new Array，或者new Object。看到这里你会说，嗷~不就是构造函数或者实例化嘛，这有啥可说的，但是，你真的知道new到底干了什么？这篇文章，让我们一起来探讨一下吧！好，那就让我们开始。

公布答案

1. 创建临时对象
2. 绑定原型
3. 指定this = 临时对象
4. 执行构造函数
5. 返回临时对象

可是它为什么要帮我们干这些呢？它为什么不干其他的事情呢？接下来，我们就来好好的分析一下，让我们先从一类游戏说起：

塔防游戏相信大家都玩过，试想，大军当前，我们急需要大量的小兵，那么一个小兵的属性就是：

var soldier = 
           id:1,
           攻击力: 7,
           lifeValue:'100',
           攻击:function attack(),//给他一梭子
           前进:function forward(),//前进5米
           步行:function wokr(), //按照整体速度前进
           防御:function protect(),
           死亡:function dead(),//oh no
       

行兵打仗我们肯定要许多士兵，假如我们需要100个小兵，那么最简单的办法就是我们循环创造100个士兵：

		var soldiers = [];
        var soldier;
        for(let i = 0;i < 100;i ++)
            soldier =  
            id:i,
            攻击力: 7,
            lifeValue:100,
            攻击:function attack(),//给他一梭子
            前进:function forward(),//前进5米
            步行:function wokr(), //按照整体速度前进
            防御:function protect(),
            死亡:function dead(),//oh no
            
            soldiers.push(soldier);
        

是不是感觉挺简单的呀！但是，我们应该都注意到了一个问题：这好浪费内存啊！我可是个高级程序员，不能写这种代码！那它有什么问题呢？

• 对于士兵来说，他的技能看起来都一样啊，比如什么攻击、前进、步行、防御之类的；那么我觉得我们没有必要重复创建100个攻击、防御…
• 士兵的攻击力也一样啊（在塔防游戏里，士兵一般都是炮灰）
• 只有士兵的编号和生命值需要创建个100次

好，那我们怎么办呢？
对于这些公有的属性，我们可不可以把他们统一的放在一个地方，然后这些私有的随着循环建立呢？

这时候我们就可以考虑把这些公有的属性放在士兵的原型，那么每次，这些公有属性就不要我们创建了，我们直接去原型上找就好！可真是个大聪明！

		// 士兵原型
        var soliderproto =
            攻击力: 7,
            攻击:function attack(),//给他一梭子
            前进:function forward(),//前进5米
            步行:function wokr(), //按照整体速度前进
            防御:function protect(),
            死亡:function dead(),//oh no
         
        //士兵营
        var soldiers = [];
        var soldier;
        for(let i = 0;i < 100;i ++)
            soldier = 
                id:i,
                lifeValue:100,
            
            // 实际中不要这么写，这里只是表达意思
            soldier.__proto__ = soliderproto;
            soldiers.push(soldier);
        

这样是不是就好多啦！

可是我觉得把一个代码放两个部分不太好诶，好像显得我很憨，那么我们可以用一个函数把他们联系在一起呀

		function solider(id) 
            // 设置一个临时对象
            var Temporary = ;
            Temporary.__proto__ = soliderproto
            Temporary.id = id;
            Temporary.lifeValue = 100;
            // 返回临时对象
            return Temporary
        
        // 士兵原型
        var soliderproto =
            攻击力: 7,
            攻击:function attack(),//给他一梭子
            前进:function forward(),//前进5米
            步行:function wokr(), //按照整体速度前进
            防御:function protect(),
            死亡:function dead(),//oh no
         

那么我们就能简单快速的创造士兵了：

		var soliders = [];
        for(let i = 0;i < 100;i ++)
            soliders.push(solider(i));

        

那么既然如此，js之父就想，那些公有的，我直接帮你创造了不就得了？于是就有了new关键字。事实证明，这个确实方便了不少！

• 我帮你创建临时对象
• 我帮你绑定原型
• 我帮你return临时对象
• 我把士兵的原型（文中的soliderproto）统一为prototype

所以我们有了new之后，我们需要考虑的事情就少了，这些事都是new帮我们做的哦~即：

1. 不需要创建临时对象（我们使用this就可以访问到啦）
2. 不需要绑定原型
3. 不需要返回临时对象
4. 不需要帮士兵的原型想名字了，因为new指定为prototype了

那我们还等什么呢，快来实现一下！

		function solider(id) 
            this.id = id;
            this.lifeValue = 100;
        
        // 士兵原型
        var solider.prototypr =
            攻击力: 7,
            攻击:function attack(),//给他一梭子
            前进:function forward(),//前进5米
            步行:function wokr(), //按照整体速度前进
            防御:function protect(),
            死亡:function dead(),//oh no
         
        
        // 创建对象
        var soliders = [];
        for(let i = 0;i < 100;i ++)
        //执行new出来的构造函数
            soliders.push(new solider(i));
        

好，恭喜你看到这里，同时也感谢你看到这里，我们不难看出，经过这漫长又好像不是很漫长的旅途，new帮我们做的事情一目了然，而且他们为什么这么做的原因，我们也了解了，接下来我们来总结一下子！

总结

• 首先创建了一个临时对象
• 其次绑定原型
• 指定了this = 临时对象（这就是我们为什么能使用this.xx的原因啦~）
• 执行构造函数
• 最后返回临时对象

最后的最后，希望这篇文章可以帮到你更好的理解new。如果觉得有帮助，可以点个赞或者收藏，如有错误，也欢迎各位批评指正，一起进步。我们更高处见！！！