Number()和new Number()的区别以及一种简单实现

时间：2024-01-23 14:10:19

  看MDN Beginners文档的时候注意到了这种用法 var n1 = Number(123); , 冒出的第一个疑问就是和 var n2 = new Number(123); 有什么区别呢? 

 

  首先用typeof做下探测, n1是number而n2是object, 他们的本质区别就是type不同.

 

  那么有趣的问题来了, Number内部肯定知道是怎么调用的它, 那是怎么实现的呢?

 

  最先想到的就是根据caller来区分, 但在实验的过程中发现两个问题:

  1. 全局调用的时候没有caller
  2. 就算知道caller也无法区分它是function调用还是构造对象

 

既然需要在运行期区分, 那么该"真爱" this 登场了

 

万事俱备撸起袖子开干, But...先等等, 在开工前先用测试数据探测下Number的行为:

console.log(Number(123));      //123
console.log(Number(+123));     //123
console.log(Number(-123));     //-123
console.log(Number("123"));    //123
console.log(Number("+123"));   //123
console.log(Number("-123"));   //-123
console.log(Number("abc123")); //NaN
console.log(Number(NaN));      //NaN


console.log(new Number(123)); //save as above except type
console.log(new Number(+123));
console.log(new Number(-123));
console.log(new Number("123"));
console.log(new Number("+123"));
console.log(new Number("-123"));
console.log(new Number("abc123"));
console.log(new Number(NaN));

 

我们的简单实现命名为WNumber, 测试过程发现 123 == new Number('123') 是返回true的, 但我们的WNumber却返回false, 难道浏览器不给WNumber国民待遇?

 

首先浏览器是不可能把123 auto-box成Number对象的, 因为两个对象==是false的, 所以肯定是把Number对象auto-unbox成原始type(值type). 查了一下对象刚好有个valueOf()方法用来返回这个对象代表的原始值. (后来测试过程中发现valueOf()或toString()实现任一一个方法都能让浏览器返回true)

 

下面是WNumber的源码

    function WNumber(i){
        
        var primitiveValue = 0;
        
        if(typeof i === "number"){
                primitiveValue = i;
        }else{
            var regR = /^([\+\-]?)([1-9][0-9]*)$/.exec(i);
            if(regR !== null){
                var nstrlen = regR[2].length;
                var nResult = arguments.callee(0);
                for(idx in regR[2]){
                    nResult += regR[2][idx]*Math.pow(10, nstrlen - idx -1);
                }
                if(regR[1] === '-'){
                    primitiveValue = -nResult;
                }else{
                    primitiveValue = nResult;
                }
                
            }else{
                primitiveValue = NaN;
            }
        }
        
        if(this instanceof WNumber){
            //construct object
            this.valueOf = function(){
                return primitiveValue;
            }
            
            this.toString = function(){
                return primitiveValue + '';
            }
            return this;
        }else{
            //invoke as function
            return primitiveValue;
        }
    }

 

相关文章