JS new原理和代码实现

示例：

        var Fn=function(){
            this.name='hty'
        }
        const fn=new Fn;

当new Fn执行的时候，内部执行过程如下：

1、一个继承自Fn.prototype的新对象被创建。
2、使用指定的参数调用构造函数Fn，并将this绑定到新创建的对象。new Fn等同于new Fn()，也就是没有指定参数列表，Fn 不带任何参数调用的情况。
3、由构造函数返回的对象就是new表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤），这里需要注意，如果构造返回的不是对象，则不管return语句，返回步骤1创建的对象。
 

手动实现：

       

var New =function(fn){
            var obj={};
            obj.__proto__=fn.prototype;
            // 将 arguments 对象转为数组
            var args = [].slice.call(arguments);
            //去除构造函数
            args.shift();
            // 执行构造函数并改变this对象
            var result = fn.apply(obj, args);            
            if(Object.prototype.toString.call(result)=="[object Object]" ){
                return result
            }else{
                return obj;
            }
        }   

 

测试：

       

var New =function(fn){
            var obj={};
            obj.__proto__=fn.prototype;
            // 将 arguments 对象转为数组
            var args = [].slice.call(arguments);
            //去除构造函数
            args.shift();
            // 执行构造函数并改变this对象
            var result = fn.apply(obj, args);            
            if(Object.prototype.toString.call(result)=="[object Object]" ){
                return result
            }else{
                return obj;
            }
        }    
 
        var Fn=function(sex){
            this.name='hty';
            this.sex=sex;
        }
        //返回一个对象
        var Fn1=function(){
            this.name='hml';   //默认
            //自定义改变返回值或对象
            return {
                name:'hty1'
            }
        }
        //返回非对象
        var Fn2=function(){
            this.name='hty3';   //默认
            //自定义改变返回值或对象,此处的return无效，因为是非对象
            return 1000
        }
        const fn=New(Fn,'123');
        console.log(fn.name);//hty
        console.log(fn.sex);//123
        const fn1=New(Fn1)
        console.log(fn1.name);//hty1
        const fn2=New(Fn2)
        console.log(fn2.name);//hty3