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, 1);
            // 执行构造函数并改变this对象
            var result = fn.apply(obj, args);            
            return result instanceof Object ? result : obj
        }   

测试

        var New =function(fn){
            var obj={};
            obj.__proto__=fn.prototype;
            // 将 arguments 对象转为数组
            var args = [].slice.call(arguments, 1);
            // 执行构造函数并改变this对象
            var result = fn.apply(obj, args);            
            return result instanceof Object ? result : 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 1000
        }
        var fn=New(Fn,'123');
        console.log(fn.name); // hty
        console.log(fn.sex); // 123
        var fn1=New(Fn1)
        console.log(fn1); // {name: "hty1"}
        var fn2=New(Fn2)
        console.log(fn2); // Fn2 {name: "hty3"}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值