ES6中获取值的类型之typeof

Question

我正在使用ES6 + babel，并带有“iife-wrap”插件。我尝试重新制作之前创建的插件（form-validation）。我正在尝试检查数据是否为对象。对于es5，只需使用typeof blah === 'object'或string、function等即可。但是，如果我将其放在es6上，它会产生一个错误：Uncaught TypeError: _typeof不是函数。以下是我代码的一部分示例。

let es6function = () => {
    return 'asd';
}

console.log(typeof es6function)

class Person {

}

let tryThis = new Person()
console.log(tryThis instanceof Person)

ES5: 后编译

;

(function () {
    'use strict';

    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }

    var _typeof = typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol" ? function (obj) {
        return typeof obj === 'undefined' ? 'undefined' : _typeof(obj);
    } : function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === 'undefined' ? 'undefined' : _typeof(obj);
    };

    var es6function = function es6function() {
        return 'asd';
    };

    console.log(typeof es6function === 'undefined' ? 'undefined' : _typeof(es6function));

    var Person = function Person() {
        _classCallCheck(this, Person);
    };

    var tryThis = new Person();
    console.log(tryThis instanceof Person);
})();

非常感谢您的帮助。谢谢。

- user6879896

---

在这里运行良好：（https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015&experimental=false&loose=false&spec=false&code=let%20es6function%20%3D%20()%20%3D%3E%20%7B%0A%0A%7D%0A%0Aconsole.log(typeof%20es6function)%0A%0Aclass%20Person%20%7B%0A%0A%7D%0A%0Alet%20tryThis%20%3D%20new%20Person()%0Aconsole.log(tryThis%20instanceof%20Person))。 - Felix Kling

我猜你没有复制和粘贴整个代码。证明它的工作原理：http://imgur.com/a/8XqZA。即使你看代码，"_typeof"总是被分配一个函数值。 - Felix Kling

你使用的是哪个插件？Babel 的版本是多少？你发布的内容不是 Babel 默认生成的。如果你没有提供可重现的示例，我们无法帮助你。 - Felix Kling

让我们在聊天中继续这个讨论。 - user6879896

你可以看到产生了无效的输出：var _typeof = typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol"。 _typeof 调用不应该在这里。现在，为什么只有在包含插件时才会发生这种情况，我无法说。可能是 Babel 中的一个 bug。它肯定与 ES6 本身无关。 - Felix Kling

Answer 1

看起来你在无意中对代码运行了两次Babel。

ES6 代码：

console.log(typeof es6function)

被转译为

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

console.log(typeof es6function === 'undefined' ? 'undefined' : _typeof(es6function));

这确实成为了

var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

var _typeof = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
    return typeof obj === "undefined" ? "undefined" : _typeof2(obj);
} : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof2(obj);
};

console.log(typeof es6function === 'undefined' ? 'undefined' : _typeof(es6function));

当您再次转换时，除了 _typeof/_typeof2 重复之外，这看起来非常像您的转译结果。检查您的构建配置和 babel 插件。尝试逐个禁用插件以查看问题何时消失，并向负责的组件报告错误。

- Bergi

Answer 2

你能加上括号像这样吗？

if( typeof(Symbol) === 'function') ) { ... }

- Alongkorn

---

为什么OP要这样做？typeof是一个操作符，括号是无用的。typeof foo和typeof (foo)以及typeof ((((((foo))))))是相同的。 - Felix Kling

确实两种方式都应该可以工作，但我认为问题的原因可能是编译器。 - Alongkorn

您的提案在语法上无效。 - user663031