闲话JavaScript数据类型

JavaScript支持的类型

JS的内置数据类型罗列如下：

undefined
null
bool
number
string
function
object
    Function
        Date
        Error
        自定义function
    new Function
    new Date
    new Error
    new 自定义function
symbol

bool, number, string

bool, number, string这三种类型的赋值是同类似的。

字面量方式赋值

var b = true;
var n = 10;
var s = 'hello';

函数式赋值

与字面量方式等价的函数式赋值：

var b = Boolean(true);
var n = Number(10);
var s = String('hello');

可验证变量的类型：

typeof b; // 'bool'
typeof n; // 'number'
typeof s; // 'string'

基本类型包装类

倘若透过基本类型包装类构造，那么这些变量都变成object类型了。

var obj_b = new Boolean(true);
var obj_n = new Number(10);
var obj_s = new String('hello');

typeof obj_b; // 'object'
typeof obj_n; // 'object'
typeof obj_s; // 'object'

基本类型包装类实例（obj_b, obj_n, obj_s）可认为是基本类型字面量（b, n, s），由值类型被封装成了一个引用类型，二者之间可以做比较的。

obj_b.valueOf() == b  //true
obj_n.valueOf() == n  //true
obj_s.valueOf() == s  //true

看来基本类型包装类（Number, Boolean, String)即能当函数直接调用，也能做构造方法，这正是JS函数的魔法。这里自定义一个函数MyNumber， 模仿Number的实现。

function MyNumber(value) {
    var _self = this;
    // 如果是new构造出来的
    if (_self instanceof MyNumber) {
        _self.value = value;
        return _self;
    }
    return parseFloat(value);
}

MyNumber.prototype.valueOf = function() {
    return parseFloat(this.value);
}

MyNumber.prototype.doubledValue = function() {
    return this.valueOf() * 2;
}

var mnum = MyNumber('12abc');
console.log(mnum);       // 12
console.log(typeof mnum);// number

var obj_mnum = new MyNumber('12abc');
console.log(obj_mnum);  // { [Number: 12] value: '12abc' }
console.log(+obj_mnum); // 12. +用来转化为number类型，所以返回.valueOf()的结果
console.log(typeof obj_mnum);        // object
console.log(obj_mnum.doubledValue()) //24

若不用new，也可用Object.create(..prototype)，二者等价。

var obj_mnum = Object.create(MyNumber.prototype);
MyNumber.call(obj_mnum, '12abc')

console.log(obj_mnum);  // { [Number: 12] value: '12abc' }
console.log(+obj_mnum); // 12. +用来转化为number类型，所以返回.valueOf()的结果
console.log(typeof obj_mnum);        // object
console.log(obj_mnum.doubledValue()) //24

基本类型字面量和基本类型包装类实例的关系

二者之间可以做算数运算：

obj_n + n //20
// 过程： obj_n是引用类型 
//       ->通过调用其valueOf()转为值类型10 
//       -> 10 + 10 = 20

obj_b + obj_n // 11
// 过程：obj_b引用类型
//      -> 调用valueOf()转为值类型true
//      -> 布尔true需要转为number类型做算数运算，调用Number(true)，得到1
//      obj_n引用类型 -> 转为值类型 10
//      所以 1 + 10 = 11

关于JS数据类型转换详情，请看Javascript中的类型转换

基本类型何以能调用方法

严格来讲，基本类型字面量是不能调用任何方法的。但是'hello'.length会成功返回5. 这因为JS解释器在执行这句代码时，会生成一个临时的基本类型包装类的实例,并调用其length。执行完后，就销毁了这个临时变量。

var tmp = new String('hello');
tmp.length

undefined 和 null

变量声明而不赋值，其值就是undefined

var a;
a === undefined; //true. a 严格等于 undefined
typeof a;        // 'undefined'

若赋值为null：

var a = null;
a === null;      // true
a === undefined; // false, a 不再严格等于undefined
typeof a;        // 'object'

可理解为，null是有值的，特殊的空值；而undfined是表示无值。

undefined 和 null的一些区别

1.. JSON.stringify会序列化null值，但不会序列化undefined

    var obj = {name: 'tom', age: null}
    JSON.stringify(obj) // '{"name":"tom","age":null}'
    
    var obj = {name: 'tom', age: undefined} //'{"name":"tom"}'

对象实例的字段声明为undefined，是无意义的。

2.. undefined会触发ES6的default value，而null不会。

    function greet(name='world') {
        console.log('hello', name)
    }
    greet()          //hello world
    greet(undefined) //hello world
    greet(null)      //hello null

这里也进一步印证了， null本身是有值的，不过是个特殊的空值。而undefined是无值的。

值得一提的是，基本类型undefined/null是没有任何方法的，也不能够调用其任何方法。这根bool/number/string不同，这因为是undefined/null没有包装类

symbol

ES6新增的基本类型，只支持函数式赋值，不支持字面量和函数构造。

var sim = Symbol('IBM') // ok
sim                     // Symbol('IBM')
typeof sim              // 'symbol'
sim = new Symbol('IBM') // TypeError: Symbol is not a constructor

function 和 Function

JS函数可以通过new Function构造，但通常用function关键字定义。二者的关联，已在独家解析Javascript原型继承 - 之函数原型和AOP有详细的阐述。这里就简要说明下，函数本身和函数构造实例的一点区别。

type of Date // function. Date本身是函数
typeof new Date() // object. 通过new Date构造出来的是object实例
new Date().__proto__ == Date.prototype //true. 
// new Date()既然是由Date函数构造出来的，
// 所以new Date()的run-time  __proto__就是Date的design-time的prototype

// new Date()就是Date的构造实例了
new Date() instanceof Date // true. 

关于 run-time __proto__和design-time prototype，请读者参考独家解析Javascript原型继承