你不知道的JavaScript（中卷）|类型

2019年5月23日 110次阅读 来源: xpwei

关于在我的前端文集中发表的你不知道的JavaScript（中卷）|xx，是我在阅读《你不知道的JavaScript》（中卷）时对知识点的摘抄。

内置类型
JavaScript有七种内置类型：

  • 空值（null）
  • 未定义（undefined）
  • 布尔值（boolean）
  • 数字（number）
  • 字符串（string）
  • 对象（object）
  • 符号（symbol，ES6中新增）
    除对象之外，其他统称为“基本类型”。
    我们可以用typeof运算符来查看值的类型，它返回的是类型的字符串值。有意思的是，这七种类型和它们的字符串值并不一一对应：
typeof undefined === "undefined"; // true
typeof true === "boolean"; // true
typeof 42 === "number"; // true
typeof "42" === "string"; // true
typeof { life: 42 } === "object"; // true
// ES6中新加入的类型
typeof Symbol() === "symbol"; // true

你可能注意到null类型不在此列。它比较特殊，typeof对它的处理有问题：

typeof null === "object"; // true

正确的返回结果应该是“null”，但这个bug由来已久，在JavaScript中已经存在了将近二十年，也许永远也不会修复，因为这牵涉到太多的Web系统，“修复”它会产生更多的bug，令许多系统无法正常工作。
我们需要使用复合条件来检测null值的类型：

var a = null;
(!a && typeof a === "object"); // true

还有一种情况：

typeof function a(){ /* .. */ } === "function"; // true

这样看来，function（函数）也是JavaScript的一个内置类型。然而查阅规范就会知道，它实际上是object的一个“子类型”。具体来说，函数是“可调用对象”，它有一个内部属性[[Call]]，该属性使其可以被调用。
函数不仅是对象，还可以拥有属性。例如：

function a(b, c) {
    /* .. */
}

函数对象的length属性是其声明的参数的个数：

a.length;//2

因为该函数声明了两个命名参数，b和c，所以其length值为2。
再来看看数组。JavaScript支持数组：

typeof [1,2,3] === "object"; // true

数组也是对象。确切地说，它也是object的一个“子类型”，数组的元素按数字顺序来进行索引（而非普通像对象那样通过字符串键值），其length属性是元素的个数。

值和类型
JavaScript中的变量是没有类型的，只有值才有。变量可以随时持有任何类型的值。

undefined和undeclared
变量在未持有值的时候为undefined。此时typeof返回“undefined”。
大多数开发者倾向于将undefined等同于undeclared（未声明），但在JavaScript中它们完全是两回事。
已在作用域中声明但还没有赋值的变量，是undefined的。相反，还没有在作用域中声明过的变量，是undeclared的。

var a;
a; // undefined
b; // ReferenceError: b is not defined

var a;
typeof a; // "undefined"
typeof b; // "undefined"

对于undeclared（或者not defined）变量，typeof照样返回“undefined”。请注意虽然b是一个undeclared变量，但typeof b并没有报错。这是因为typeof有一个特殊的安全防范机制。
typeof Undeclared
该安全防范机制对在浏览器中运行的JavaScript代码来说还是很有帮助的，因为多个脚本文件会在共享的全局命名空间中加载变量。
举个简单的例子，在程序中使用全局变量DEBUG作为“调试模式”的开关。在输出调试信息到控制台之前，我们会检查DEBUG变量是否已被声明。顶层的全局变量声明var DEBUG=true只在debug.js文件中才有，而该文件只在开发和测试时才被加载到浏览器，在生产环境中不予加载。
问题是如何在程序中检查全局变量DEBUG才不会出现ReferenceError错误。这时typeof的安全防范机制就成了我们的好帮手：

// 这样会抛出错误
if (DEBUG) {
    console.log("Debugging is starting");
}
// 这样是安全的
if (typeof DEBUG !== "undefined") {
    console.log("Debugging is starting");
}

这不仅对用户定义的变量（比如DEBUG）有用，对内建的API也有帮助：

if (typeof atob === "undefined") {
    atob = function() { /*..*/ };
}

如果要为某个缺失的功能写polyfill（即衬垫代码或补充代码，用来补充当前运行环境中缺失的功能），一般不会用var atob来声明变量atob。如果在if语句中使用var atob，声明会被提升到作用域（即当前脚本或函数的作用域）的最顶层，即使if条件不成立也是如此（因为atob全局变量已经存在）。在有些浏览器中，对于一些特殊的内建全局变量（通常称为“宿主对象”），这样的重复声明会报错。去掉var则可以防止声明被提升。
还有一种不用通过typeof的安全防范机制的方法，就是检查所有全局变量是否是全局对象的属性，浏览器中的全局对象是window。所以前面的例子也可以这样来实现：

if (window.DEBUG) {
    // ..
}
if (!window.atob) {
    // ..
}

与undeclared变量不同，访问不存在的对象属性（甚至是在全局对象window上）不会产生ReferenceError错误。
一些开发人员不喜欢通过window来访问全局对象，尤其当代码需要运行在多种JavaScript环境中时（不仅仅是浏览器，还有服务器端，如node.js等），因此此时全局对象并非总是window。
从技术角度来说，typeof的安全防范机制对于非全局变量也很管用，虽然这种情况并不多见，也有一些开发人员不大愿意这样做。如果想让别人在他们的程序或模块中复制黏贴你的代码，就需要检查你用到的变量是否已经在宿主程序中定义过：

function doSomethingCool() {
    var helper =
        (typeof FeatureXYZ !== "undefined") ?
            FeatureXYZ :
            function () { /*.. default feature ..*/ };
    var val = helper();
    // ..
}

还有一些人喜欢使用“依赖注入”设计模式，就是将依赖通过参数显示地传递到函数中，如：

function doSomethingCool(FeatureXYZ) {
    var helper = FeatureXYZ ||
        function () { /*.. default feature ..*/ };
    var val = helper();
    // ..
}

《你不知道的JavaScript（中卷）|类型》 好不容易在梦里可以看见您，然后您却还是一句话都没有对我说

    原文作者：xpwei
    原文地址: https://www.jianshu.com/p/b6685afb89cb
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞