# JavaScript 变量与类型

2019-06-20-06-00-27

# 类型分类

# 原始类型

Null：只包含一个值：null
Undefined：只包含一个值：undefined
Boolean：包含两个值：true 和 false
Number：整数或浮点数，还有一些特殊值（-Infinity、+Infinity、NaN）
String：一串表示文本值的字符序列
Symbol：一种实例是唯一且不可改变的数据类型
BigInt：它提供了一种方法来表示大于 253 - 1 的整数，它可以表示任意大的整数 (在 es10 中加入了第七种原始类型 BigInt，现已被最新 Chrome 支持)

基础类型存储在 “栈内存” ，被引用或拷贝时，会创建一个完全相等的变量

# 引用类型

Object：自己分一类丝毫不过分，除了常用的 Object，Array、Function 等都属于特殊的对象

Array ：数组对象
RegExp ：正则对象
Date ：日期对象
Math ：数学对象
Function ：函数对象

引用类型存储在 “堆内存”，存储的是地址，多个引用指向同一个地址，这里会涉及一个“共享”的概念

# 为什么区分原始类型和引用类型

2.1 不可变性上面所提到的原始类型，在 ECMAScript 标准中，它们被定义为 primitive values，即原始值，代表值本身是不可被改变的。以字符串为例，我们在调用操作字符串的方法时，没有任何方法是可以直接改变字符串的： var str = 'ConardLi'; str.slice(1); str.substr(1); str.trim(1); str.toLowerCase(1); str[0] = 1; console.log(str); // ConardLi 复制代码在上面的代码中我们对 str 调用了几个方法，无一例外，这些方法都在原字符串的基础上产生了一个新字符串，而非直接去改变 str，这就印证了字符串的不可变性。那么，当我们继续调用下面的代码： str += '6' console.log(str); // ConardLi6 复制代码你会发现，str 的值被改变了，这不就打脸了字符串的不可变性么？其实不然，我们从内存上来理解：在 JavaScript 中，每一个变量在内存中都需要一个空间来存储。内存空间又被分为两种，栈内存与堆内存。栈内存：

存储的值大小固定空间较小可以直接操作其保存的变量，运行效率高由系统自动分配存储空间

JavaScript 中的原始类型的值被直接存储在栈中，在变量定义时，栈就为其分配好了内存空间。 2019-06-20-06-00-27

由于栈中的内存空间的大小是固定的，那么注定了存储在栈中的变量就是不可变的。在上面的代码中，我们执行了 str += '6'的操作，实际上是在栈中又开辟了一块内存空间用于存储'ConardLi6'，然后将变量 str 指向这块空间，所以这并不违背不可变性的特点。

# 类型判断

# typeof

直接在计算机底层基于数据类型的值（二进制）进行检测 typeof 无法有效判断引用类型 Object typeof null “object” 对象存储在计算机中，都是以 000 开始的二进制存储，null 也是，所以检测出来的结果是对象

typeof 1; // 'number'

typeof "1"; // 'string'

typeof undefined; // 'undefined'

typeof true; // 'boolean'

typeof Symbol(); // 'symbol'

typeof null; // 'object'

typeof []; // 'object'

typeof {}; // 'object'

typeof console; // 'object'

typeof console.log; // 'function'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

你可以看到，前 6 个都是基础数据类型，而为什么第 6 个 null 的 typeof 是 'object' 呢？这里要和你强调一下，虽然 typeof null 会输出 object，但这只是 JS 存在的一个悠久 Bug，不代表 null 就是引用数据类型，并且 null 本身也不是对象。因此，null 在 typeof 之后返回的是有问题的结果，不能作为判断 null 的方法。如果你需要在 if 语句中判断是否为 null，直接通过 ‘===null’来判断就好。

此外还要注意，引用数据类型 Object，用 typeof 来判断的话，除了 function 会判断为 OK 以外，其余都是 'object'，是无法判断出来的。

# instanceof

底层机制：只要当前类出现在实例的原型链上，结果都为 true 不能检测基本数据类型由于我们可以肆意修改原型的指向，所以检测出来的结果是不准的想必 instanceof 的方法你也听说过，我们 new 一个对象，那么这个新对象就是它原型链继承上面的对象了，通过 instanceof 我们能判断这个对象是否是之前那个构造函数生成的对象，这样就基本可以判断出这个新对象的数据类型。下面通过代码来了解一下。

let Car = function () {};

let benz = new Car();

benz instanceof Car; // true

let car = new String("Mercedes Benz");

car instanceof String; // true

let str = "Covid-19";

str instanceof String; // false

1
2
3
4
5
6
7
8
9
10
11
12
13

上面就是用 instanceof 方法判断数据类型的大致流程，那么如果让你自己实现一个 instanceof 的底层实现，应该怎么写呢？请看下面的代码。

//手写instanceof

function instance_of(example, classFunc) {
  let classFunPrototype = classFunnc.prototype,
    proto = Object.getProtoTypeOf(example);
  while (true) {
    if (proto === null) {
      return false;
    }
    if (proto === classFuncPrototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }
}
//实例.__proto__===类.prototype

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

现在你知道了两种判断数据类型的方法，那么它们之间有什么差异呢？我总结了下面两点：

instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型；
而 typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断。

总之，不管单独用 typeof 还是 instanceof，都不能满足所有场景的需求，而只能通过二者混写的方式来判断。但是这种方式判断出来的其实也只是大多数情况，并且写起来也比较难受，你也可以试着写一下。

其实我个人还是比较推荐下面的第三种方法，相比上述两个而言，能更好地解决数据类型检测问题。

# constructor

用起来看似比 instanceof 还好用一些（支持基本类型） constructor 可以随便改，所以也不准

let arr = [];
console.log(arr.constructor === Array);
console.log(arr.constructor === Number);
console.log(arr.constructor === Object);

1
2
3
4

# Object.prototype.toString

标准的类型判断方法，返回当前实例所属类的信息

Object.prototype.toString({}); // "[object Object]"
Object.prototype.toString.call({}); // 同上结果，加上call也ok
Object.prototype.toString.call(1); // "[object Number]"
Object.prototype.toString.call("1"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(function () {}); // "[object Function]"
Object.prototype.toString.call(null); //"[object Null]"
Object.prototype.toString.call(undefined); //"[object Undefined]"
Object.prototype.toString.call(/123/g); //"[object RegExp]"
Object.prototype.toString.call(new Date()); //"[object Date]"
Object.prototype.toString.call([]); //"[object Array]"
Object.prototype.toString.call(document); //"[object HTMLDocument]"
Object.prototype.toString.call(window); //"[object Window]"

1
2
3
4
5
6
7
8
9
10
11
12
13

从上面这段代码可以看出，Object.prototype.toString.call() 可以很好地判断引用类型，甚至可以把 document 和 window 都区分开来。

但是在写判断条件的时候一定要注意，使用这个方法最后返回统一字符串格式为 "[object Xxx]" ，而这里字符串里面的 "Xxx" ，第一个首字母要大写（注意：使用 typeof 返回的是小写），这里需要多加留意。

TIP

每一个引用类型都有 toString 方法，默认情况下，toString()方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中 type 是对象的类型。

注意，上面提到了如果此方法在自定义对象中未被覆盖，toString 才会达到预想的效果，事实上，大部分引用类型比如 Array、Date、RegExp 等都重写了 toString 方法。我们可以直接调用 Object 原型上未被覆盖的 toString()方法，使用 call 来改变 this 指向来达到我们想要的效果。

jquery

jquery 源码中如何进行类型判断：

var class2type = {};
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
function( i, name ) {
 class2type[ "[object " + name + "]" ] = name.toLowerCase();
} );

type: function( obj ) {
 if ( obj == null ) {
  return obj + "";
 }
 return typeof obj === "object" || typeof obj === "function" ?
  class2type[Object.prototype.toString.call(obj) ] || "object" :
  typeof obj;
}

isFunction: function( obj ) {
  return jQuery.type(obj) === "function";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

原始类型直接使用 typeof，引用类型使用 Object.prototype.toString.call 取得类型，借助一个 class2type 对象将字符串多余的代码过滤掉，例如[object function]将得到 array，然后在后面的类型判断，如 isFunction 直接可以使用 jQuery.type(obj) === "function"这样的判断。

# 类型转换

2019-06-20-06-01-27 在日常的业务开发中，经常会遇到 JavaScript 数据类型转换问题，有的时候需要我们主动进行强制转换，而有的时候 JavaScript 会进行隐式转换，隐式转换的时候就需要我们多加留心。

那么这部分都会涉及哪些内容呢？我们先看一段代码，了解下大致的情况。

'123' == 123   // false or true?

'' == null    // false or true?

'' == 0        // false or true?

[] == 0        // false or true?

[] == ''       // false or true?

[] == ![]      // false or true?

null == undefined //  false or true?

Number(null)     // 返回什么？

Number('')      // 返回什么？

parseInt('');    // 返回什么？

{}+10           // 返回什么？

let obj = {

    [Symbol.toPrimitive]() {

        return 200;

    },

    valueOf() {

        return 300;

    },

    toString() {

        return 'Hello';

    }

}

console.log(obj + 200); // 这里打印出来是多少？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# 强制类型转换

强制类型转换方式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()，这几种方法都比较类似，通过字面意思可以很容易理解，都是通过自身的方法来进行数据类型的强制转换。下面我列举一些来详细说明。

上面代码中，第 8 行的结果是 0，第 9 行的结果同样是 0，第 10 行的结果是 NaN。这些都是很明显的强制类型转换，因为用到了 Number() 和 parseInt()。

其实上述几个强制类型转换的原理大致相同，下面我挑两个比较有代表性的方法进行讲解。

# Number() 方法的强制转换规则

如果是布尔值，true 和 false 分别被转换为 1 和 0；
如果是数字，返回自身；
如果是 null，返回 0；
如果是 undefined，返回 NaN；
如果是字符串，遵循以下规则：如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；如果字符串中包含有效的浮点格式，将其转换为浮点数值；如果是空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN；
如果是 Symbol，抛出错误；
如果是对象，并且部署了 [Symbol.toPrimitive] ，那么调用此方法，否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值；如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值（Object 转换规则会在下面细讲）。

下面通过一段代码来说明上述规则。

Number(true); // 1

Number(false); // 0

Number("0111"); //111

Number(null); //0

Number(""); //0

Number("1a"); //NaN

Number(-0x11); //-17

Number("0X11"); //17

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其中，我分别列举了比较常见的 Number 转换的例子，它们都会把对应的非数字类型转换成数字类型，而有一些实在无法转换成数字的，最后只能输出 NaN 的结果。

# Boolean()的强制类型转换规则

这个方法的规则是：除了 undefined、 null、 false、 ''、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true。

这个规则应该很好理解，没有那么多条条框框，我们还是通过代码来形成认知，如下所示。

Boolean(0); //false

Boolean(null); //false

Boolean(undefined); //false

Boolean(NaN); //false

Boolean(1); //true

Boolean(13); //true

Boolean("12"); //true

1
2
3
4
5
6
7
8
9
10
11
12
13

其余的 parseInt()、parseFloat()、toString()、String() 这几个方法，你可以按照我的方式去整理一下规则，在这里不占过多篇幅了。

# 隐式类型转换

凡是通过逻辑运算符 (&&、 ||、 !)、运算符 (+、-、*、/)、关系操作符 (>、 <、 <= 、>=)、相等运算符 (==) 或者 if/while 条件的操作，如果遇到两个数据类型不一样的情况，都会出现隐式类型转换。这里你需要重点关注一下，因为比较隐蔽，特别容易让人忽视。

下面着重讲解一下日常用得比较多的“==”和“+”这两个符号的隐式转换规则。

# '==' 的隐式类型转换规则

如果类型相同，无须进行类型转换；
如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
如果其中一个是 Symbol 类型，那么返回 false；
两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
如果一个操作值是 boolean，那么转换成 number；
如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。
如果直接死记这些理论会有点懵，我们还是直接看代码，这样更容易理解一些，如下所示。

null == undefined; // true  规则2

null == 0; // false 规则2

"" == null; // false 规则2

"" == 0; // true  规则4 字符串转隐式转换成Number之后再对比

"123" == 123; // true  规则4 字符串转隐式转换成Number之后再对比

0 == false; // true  e规则 布尔型隐式转换成Number之后再对比

1 == true; // true  e规则 布尔型隐式转换成Number之后再对比

var a = {
  value: 0,

  valueOf: function () {
    this.value++;

    return this.value;
  },
};

// 注意这里a又可以等于1、2、3

console.log(a == 1 && a == 2 && a == 3); //true f规则 Object隐式转换

// 注：但是执行过3遍之后，再重新执行a==3或之前的数字就是false，因为value已经加上去了，这里需要注意一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

整体来看，如果数据中有字符串，JavaScript 类型转换还是更倾向于转换成字符串，因为第三条规则中可以看到，在字符串和数字相加的过程中最后返回的还是字符串，这里需要关注一下。

了解了 '+' 的转换规则后，我们最后再看一下 Object 的转换规则。

# Object 类型转换

对象转换的规则，会先调用内置的 [ToPrimitive] 函数，其规则逻辑如下：

如果部署了 Symbol.toPrimitive 方法，优先调用再返回；
调用 valueOf()，如果转换为基础类型，则返回；
调用 toString()，如果转换为基础类型，则返回；
如果都没有返回基础类型，会报错。

直接理解有些晦涩，还是直接来看代码，你也可以在控制台自己敲一遍来加深印象。

var obj = {
  value: 1,

  valueOf() {
    return 2;
  },

  toString() {
    return "3";
  },

  [Symbol.toPrimitive]() {
    return 4;
  },
};

console.log(obj + 1); // 输出5

// 因为有Symbol.toPrimitive，就优先执行这个；如果Symbol.toPrimitive这段代码删掉，则执行valueOf打印结果为3；如果valueOf也去掉，则调用toString返回'31'(字符串拼接)

// 再看两个特殊的case：

10 +
  {}[
    // "10[object Object]"，注意：{}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，于是和10进行'+'运算，按照字符串拼接规则来，参考'+'的规则C

    (1, 2, undefined, 4, 5)
  ] +
  10;

// "1,2,,4,510"，注意[1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组，不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，还是按照字符串拼接规则，参考'+'的第3条规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 总结

以上就是本讲的内容了，在这一讲中，我们从三个方面学习了数据类型相关内容，下面整体回顾一下。

数据类型的基本概念：这是必须掌握的知识点，作为深入理解 JavaScript 的基础。
数据类型的判断方法：typeof 和 instanceof，以及 Object.prototype.toString 的判断数据类型、手写 instanceof 代码片段，这些是日常开发中经常会遇到的，因此你需要好好掌握。
数据类型的转换方式：两种数据类型的转换方式，日常写代码过程中隐式转换需要多留意，如果理解不到位，很容易引起在编码过程中的 bug，得到一些意想不到的结果。

对于本讲内容，如果你有不清楚的地方，欢迎在评论区留言，我们一起探讨、进步。

详细请参考:

【JS 进阶】你真的掌握变量和类型了吗 (opens new window)

JS 核心原理-JS 数据类型 (opens new window)

MDN JavaScript 数据类型和数据结构 (opens new window)

← JavaScript是什么 JavaScript综合问答 →