1.原始值转化原始值

Number既是构造函数，new Number，也是函数

  1.     console.log({}==!{});//false
  2.        console.log([]==![]);//true
  3.       console.log(Number(undefined)) ;//NaN
  4.        console.log(Number(null));//0
  1.               console.log(Boolean(undefined));//false
  2.         console.log(Boolean(null));//false
  3.            console.log(Boolean(''))//false
  4.            console.log(Boolean(' '));//true
  6.            console.log(Boolean(''))//false
  7.            console.log(Boolean(' '));//true
  1.        console.log(Boolean([]));//true
  2.            console.log(Boolean({}));//true
  3.            console.log(Boolean(/d/));//true
  4.            console.log(Boolean(new Error()));//true
  5.            console.log(Boolean(Symbol()));//true
  6.            console.log(typeof Symbol);//function
  1.  console.log(Number(Infinity));//Infinity
  2.            console.log(Boolean(Infinity));//true

typeof类型返回值，string、number、boolean、undefined、object、Symbol

  1.                 console.log(typeof Symbol());//symbol
  2.            console.log(typeof function() {})//function
  3.            console.log(typeof Date());//string
  4.            console.log(typeof new Date());//object
  1.    console.log(Date())//Mon Feb 14 2022 20:42:32 GMT+0800 (中国标准时间)
  2.    console.log(new Date())//Mon Feb 14 2022 20:42:32 GMT+0800 (中国标准时间)
  3.         console.log(Date()==new Date())//true
  4.         console.log(Date()===new Date)//false

image.png
falsey虚值：bool值转换为false的值
image.png
‘ ‘里面有东西

image.png
Infinity
image.png

  1.           console.log(typeof Date());//string
  2.        console.log(typeof new Date());//object
  4.        console.log(Date())//Mon Feb 14 2022 20:42:32 GMT+0800 (中国标准时间) 函数执行，返回字符串
  6.        console.log(new Date())//Mon Feb 14 2022 20:42:32 GMT+0800 (中国标准时间) 结果一样  对象，浏览器解析成字符串

执行结果一样，但情况不一样

对象转Number

  1.         var obj={
  2.             toString() {
  3.                 return 1;
  4.             },
  5.             valueOf(){
  6.                 return 2;
  7.             }
  8.         }
  9.         console.log(Number(obj));//2 返回2，是valueOf输出的
  1.      var obj={
  2.             toString() {
  3.                 return 1;
  4.             },
  5.             valueOf(){
  6.                 // return 2;
  7.                 return {};
  8.             }
  9.         }
  10.         console.log(Number(obj));//1

对象不能被Number转化，上面的1，是toString方法的，obj上有toString方法时，执行自己的，没有时执行Object上的toString方法

  1.   var obj={
  2.         // toString() {
  3.         //     return 1;
  4.         // },
  5.         valueOf(){
  6.             return {};
  7.             // return 2;
  8.         }
  9.     }
  10.     console.log(Number(obj))//NaN
  1.    var obj={
  2.             toString1() {
  3.                 return 1;
  4.             },
  5.             valueOf(){
  6.                 // return 2;
  7.                 return {};
  8.             }
  9.         }
  10.         console.log(Number(obj));//NaN

Object.prototype.toString.call

传入的原始值都会通过相应的包装类进行包装，比如’123’就是[object String]，new String(‘123’)；
但Undefined、null是没有对应的包装类的
原始值

  1.                console.log(Object.prototype.toString.call('123'));//[object String]
  2.         console.log(Object.prototype.toString.call(123));//[object Number]
  3.         console.log(Object.prototype.toString.call(true));//[object Boolean]
  4.         console.log(Object.prototype.toString.call(undefined));//[object Undefined]
  5.         console.log(Object.prototype.toString.call(null));//[object Null]

引用值

  1.    console.log(Object.prototype.toString.call(function() {}));//[object Function]
  2.         console.log(Object.prototype.toString.call([1,2,3]));//[object Array]
  3.         console.log(Object.prototype.toString.call({}))//[object Object]
  5.         console.log(Object.prototype.toString.call(new Error()));//[object Error]
  6.         console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
  7.         console.log(Object.prototype.toString.call(Date));//[object Function]
  9.         console.log(Object.prototype.toString.call(new Date()));//[object Date]
  10.         console.log(Object.prototype.toString.call(Symbol()));//[object Symbol]
  1.   (function() {
  2.         console.log(Object.prototype.toString.call(arguments));//[object Arguments]
  3.     })();
  5.     console.log(Object.prototype.toString.call(document));//[object HTMLDocument]
  6.     //不是ecma提供的，有些是不是原生提供的，es6提供的，是windows提供的

image.png
image.png

  1.  console.log(null.toString());
  2.  console.log(undefined.toString())

都会报错，这样肯定不对
image.png

  1. console.log((123).toString());//123
  2.   //  console.log(123.toString())//错误 见如下 
  3.     console.log(null.toString());
  4.     console.log(undefined.toString())

image.png

  1.  <div id="test"></div>
  2.     <script>
  3.         console.log(Object.prototype.toString.call(document))//[object HTMLDocument]
  4.     </script>

NaN探究

  1.     var obj = {
  2.             toString() {
  3.                 return 1;
  4.             },
  5.             valueOf() {
  6.                 return 2;
  7.                //return '2'; 返回值也是2
  8.                             // return false;//0
  9.             }
  10.         }
  11.         console.log(Number(obj))//2 如果valueof返回的是原始值，返回的2是原始值，不走toString返回方法，Number(2) 
  12.                 //valueof返回原始值，把返回的值x进行Number(x)，不走tostring方法
  1.                  var obj = {
  2.             toString() {
  3.                 return 1;
  4.                ///return false; //0
  6.             },
  7.             valueOf() {
  8.                 return {};
  9.                 // return 2;
  10.             }
  11.         }
  13.         console.log(Number(obj))//1 valueof返回引用值，走toString方法，把toString方法的引用值进行Number操作
  1.  var obj={
  2.                /*现在obj没有toString方法了，调用Object原型上的toString方法，Object.prototype.toString.call()方法，
  3.         返回字符串[object Object]，Number()再处理，相当于Number('[object Object]'),这个结果是NaN
  4.         */
  5.         // toString() {
  6.         //     return 1;
  7.         // },
  8.         valueOf(){
  9.             return {};
  10.             // return 2;
  11.         }
  12.     }
  13.          Number('sdfa');//NaN
  14.             Number('123');//
  15.     console.log(Number(obj))//NaN
  1.           var obj = {
  2.             toString() {
  3.                 return {};
  4.             },
  5.             valueOf() {
  6.                 return {};
  7.             }
  8.         }
  10.         console.log(Number(obj))//NaN
  11.         console.log( Number())//;
  12.         console.log(obj.toString())

如果经过toString方法不能变成原始值，就会报错
上面的是[object Object]字符串，是原始值
image.png

总结

1 valueof返回的是原始值x，直接Number(x)，不走toString方法
2 如果是引用值：对象，走toString方法，走Object原型的toString

image.png
image.png

  1.        console.log([1,2,3].toString());
  2.         console.log(Array.prototype.toString.call([1,2,3]))
  5.         console.log({}.toString());//对象没有包装类，调用object原型上的方法
  6.         console.log(Object.prototype.toString.call({}))
  7.         console.log(false.toString())        
  8. // Boolean.prototype.toString(); 调用的是Boolean原型上的方法，false先new Boolean(false)变成包装类，有object原型的tostring方法，又有boolean原型上的tostring方法，所以调用boolean上的toString方法
  9.         console.log(Boolean.prototype.toString.call(false))
  10.         console.log(Object.prototype.toString.call(false))

不同的对象调用toString，调用的toString方法不同，false是原始值没有toString方法·，但包装类new Boolean(false).toString(),如下

  1.         console.log(new Boolean(false).toString())//false

image.png

  1.         Object.prototype.toString.call(obj);
  2.         var obj={
  3.             toString(){
  4.                 return {};
  5.             },
  6.             valueOf(){
  7.                 return {};
  8.             }
  9.         }
  10.         console.log([1,2,3].valueOf());
  11.         console.log({}.valueOf());
  13.         // Boolean.prototype.toString();
  14.         console.log((false).valueOf());
  16.         // console.log(Number('[object Object]'));
  17.         console.log(Number(obj))

image.png

  1.         var obj={
  2.             toString(){
  3.                 return {};
  4.             }
  5.         }
  6.         console.log(obj.valueOf())
  7.         console.log(obj)//一样

image.png

  1.    [1,2,3];
  2.         [10];
  3.         console.log([]);
  4.         console.log(Array.prototype.toString.call([1,2,3]));
  5.         console.log(Array.prototype.toString.call([10]));
  6.         console.log(Object.prototype.toString([]));
  7.         console.log(Object.prototype.toString.call([]))
  9.         // [].toString
  10.         // new Array();
  11.         // Array.prototype.toString
  13.         console.log(Boolean.prototype.toString.call(false));
  14.         // Array.prototype.slice.call(arguments);
  15.         // [].slice.call(arguments);
  17.         console.log([].toString()==Array.prototype.toString);
  19.         console.log([].toString==Array.prototype.toString);
  21.         // console.log([].toString.call()==Array.prototype.toString.call());
  23.         console.log(Number([1,2]));
  24. //因为是数组，valueof返回的是[1,2]是引用值，所以走,因为Array.prototype.toString返回1,2的字符串，再进行Number操作，结果是NaN
  25.         console.log(Number([10]));
  26. //因为Array.prototype.toString返回10的字符串，再进行Number操作，结果是10
  27.         console.log(Number({}));//NaN
  29.         console.log(Array.prototype.toString.call(false));
  30.         console.log(Array.prototype.toString.call(123));
  31.         console.log(Array.prototype.toString.call('123'));
  32.         console.log(Array.prototype.toString.call({}));
  34.         console.log(Boolean.prototype.toString.call(false));
  35.         console.log(Boolean.prototype.toString.call('false'));//报错 必须是false或者true 
  36.         console.log(Boolean.prototype.toString.call(123));//报错 是什么就返回什么，调用什么
  37.         console.log(Boolean.prototype.toString.call('123'));
  38.         console.log(Boolean  .prototype.toString.call({}));
  41.         console.log(Number.prototype.toString.call(false));
  42.         console.log(Number.prototype.toString.call(123));
  43.         console.log(Number.prototype.toString.call('123'));
  44.         console.log(Number.prototype.toString.call({}))

image.png

总结二

  1.       console.log(Number([1,2]));//NaN
  2. /*因为是数组，valueof返回的是[1,2]是引用值,因为Array.prototype.toString返回1,2的字符串，
  3. 再进行Number操作，结果是NaN
  4. */
  5.         console.log(Number([10]));//10
  6. //因为Array.prototype.toString返回10的字符串，再进行Number操作，结果是10
  7.         console.log(Number({}));//NaN
  9. //相当于
  10.                    console.log(Number((1).valueOf()));
  11.         console.log(Number(Array.prototype.toString.call([1,2])));
  12.         console.log(Number(Array.prototype.toString.call([10])))
  13.         console.log(Number(Object.prototype.toString.call({})))
  15.         console.log(typeof [])//object
  16.         console.log(Object.prototype.toString.call([]))
  17. //[object Array] 根据Object原型的toString区分格式
  1.        console.log(Number(1))//1
  2.         console.log(Number((1).valueOf()));//1
  3.                 console.log(Number(new Number(1).valueOf()));//1
  4.         console.log(Number(Number.prototype.valueOf.call(1)))//1
  5. //这几个是一个意思，转换时不同的数据，调用不同对象原型的valueof、toString方法

image.png

image.png

image.png

image.png