JS专题之数据类型和类型检测

摘要：运算符可以用来检测某个构造函数的属性是否存在于另外一个要检测对象的原型链上。使用方法可以获取到变量的准确的数据类型就能解决基本包装类型的检测错误和的检测不安全。

本文共 1750 字，读完只需 7 分钟

ECMAScript 的数据类型分为简单数据类型（也被称为基本数据类型，原始数据类型）：

Undefined

Null

String

Number

Boolean

在 ES6 中新增一个简单数据类型 Symbol，所以简单数据类型总共有 6 个，还有复杂数据类型（也叫作引用数据类型）：Object。

所有 js 中所有的值最终都将是以上 7 种数据类型之一。

基本数据类型

基本数据类型是保存在栈的数据结构中的,是按值访问的，基本数据类型的值不会变 (值本身无法被改变)
数据之间进行的是它们值的比较。
看代码：

var a,b;
a = "jay_chou";
b = a;
console.log(a);  // jay_chou
console.log(b);  // jay_chou
a = "coldplay";  // 改变 a 的值，并不影响 b 的值
console.log(a);   // coldplay
console.log(b);  // jay_chou

引用数据类型

除了基本的数据类型外，剩下的就是引用类型，统称为 Object 类型， 细分的话，有 Object 类型，Array 类型，Date 类型， Regexp 类型，function， Math 类型；

引用数据类型的特点：

引用数据类型的值保存的是对象在内存中的地址

引用数据类型的值是可变的

引用数据类型的比较是引用的比较

另外：js 不能直接操作对象的内存空间

比方：

var a = {
    name: "jay_chou"
}

var b = a;

var c = {
    name: "jay_chou"
}

a === b; // true
a === c; // false

JavaScript 是动态语言，动态语言和静态语言的区别在于：类型是在编译时检查（静态）还是在运行时检查（动态）。

基于动态类型的特点，如果不注意进行类型检测，JS 很容易在运行代码发生才发现报错。

举个列子：
函数在定义时，参数可以是任何类型，但是函数在实际运行的时候，传入的实参可能是其他同事函数的返回值，也可能是后台的返回值，假如不符合代码逻辑里要求的数据类型，那么就会报错导致 bug 影响程序运行。

因此，我们不光要做类型检测，也应该给自己的函数注释好参数类型和返回值类型，还要和后端定义好接口数据类型格式。

当比较的两个值的类型不同的时候 == 运算符会进行类型转换，但是当两个值的类型相同的时候，即使是 == 也相当于是 ===;=== 在比较两个值的时候，还会比较值的数据类型。

typeof 的返回值总是字符串，字符串的可能值有：

undefined

boolean

number

string

symbol

object

function

typeof 其实是一元操作符，和 + - * / 一样，不是一个函数，进行比较的时候，typeof 后面可以跟（）, 也可以不跟。

undefined：

typeof undefined; // undefined

很多库因为考虑到 undefined 可能会被意外重写，用 void 0 来判断是否是 undefined。

var isUndefined = function (obj) {
    return obj === void 0;
}

MDN 上对 void 词条的说明是：

The void operator evaluates the given expression and then returns undefined.

意思是说 void 运算符能对给定的表达式进行求值，然后返回 undefined。也就是说，void 后面你随便跟上一个表达式，返回的都是 undefined，都能完美代替 undefined。

string, number, boolean, symbol, function, object ：

typeof "abc";    // string  
typeof 123;     // number  
typeof NaN;  // number
typeof true;   // boolean  
typeof Symbol();    // symbol  
typeof function () {};  // function
typeof {};    // object

null

typeof null;  // object!！！

js 中，不同的对象在底层都表示为二进制，在Javascript中二进制前三位都为 0 的话会被检测为 Object 类型，null 的二进制表示全为0，自然前三位也是 0，所以执行 typeof 时会返回 "object"。

Array, Date, Regexp, Math：

typeof [];  // object

数组的判断不考虑兼容性的话，可以用 Array.isArray() 方法进行检测。

typeof new Date();  // object
typeof /s/g;  // object
typeof Math;  // object
typeof new String("foo");  // object！！！
typeof new Number(123);  // object！！！
typeof new Boolean(true);  // object！！！
typeof new Function(""); // function
typeof new Error();  // object

基于以上，基本类型大部分都能被准确检测并返回正确的字符串，并不是所有的类型都能被正确检测出来。所以在实际应用中，避免用基本包装类型 new Number() 这种方式来初始化数据。

上面说到基本包装类型：new Number(), new Boolean, New String();

它们用 typeof 判断，会检测成对象。那针对基本包装类型可以用 instanceof 来判断。

instanceof 运算符可以用来检测某个构造函数的 prototype 属性是否存在于另外一个要检测对象的原型链上。

// 定义构造函数
function Person(){} 

var person1 = new Person();

// 因为 Object.getPrototypeOf(person1) === Person.prototype
person1 instanceof Person;  // true

现在我们检测一下：

var str = new String("abc");  // 基本包装类型
var strValue = "foo";

strValue instanceof String;  // false
str instanceof String;  // true
str instanceof Object;  // true

[] instanceof Array;  // true
[] instanceof Object;  // true

如果我们修改构造函数的原型后，这个方法也不怎么靠谱了:

var str = new String("abc");
str.__proto__ = Object.prototype;
str instanceof String;  // false !!!
str instanceof Object;  // true 

ECMAScript 的 Boolean 值、数字和字符串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。

ECMAScript 定义所有对象都有 toString() 方法，无论它是伪对象，还是真对象。因为 String 类型属于伪对象，所以它一定有 toString() 方法。

使用 Object.prototype.toString 方法, 可以获取到变量的准确的数据类型.

Object.prototype.toString.call(1);  // "[object Number]"
Object.prototype.toString.call("1");  // "[object String]"
Object.prototype.toString.call(NaN);  // "[object Number]"
Object.prototype.toString.call(foo);  // "[object Function]"
Object.prototype.toString.call(Symbol());  // "[object Symbol]"
Object.prototype.toString.call([1,2,3]);  // "[object Array]"
Object.prototype.toString.call(undefined);  // "[object Undefined]"
Object.prototype.toString.call(null);  // "[object Null]"
Object.prototype.toString.call(true);  // "[object Boolean]"
Object.prototype.toString.call(/^s/g);  // "[object RegExp]"
Object.prototype.toString.call(Math);  // "[object Math]"
Object.prototype.toString.call(new Error());  // "[object Error]"
Object.prototype.toString.call(new Date());  // "[object Date]"

toString 就能解决基本包装类型的检测错误和 instanceof 的检测不安全。

基于 toString 我们可以构造很多工具函数用来检测数据类型，这一块实现的方案很多，本文就按下不表。

js 类型检测常见的应用场景：
应用场景：添加默认值

function foo(a, b) {
    // 方式一
    if (typeof b=== "undefined") {
      b = 0;
    }

    // 方式二：不适用foo(10, false)这种情况
    b = b || 0;
}
foo(10);

回调函数调用

function fn(callback) {
    //typeof callback === "function" ? callback() : null;
    callback && callback();
}
fn(function () {
    
});

还有一个很常见的应用场景当然是后台返回数据的类型的检测了。

js 是动态语言，数据类型的检查是在运行时执行，为了避免代码莫名其妙报错，所以做好数据类型的检测很有必要。