JavaScript 什么是使用typeof bar === "object"来判断bar是否是一个对象的潜在陷阱

JavaScript中的 typeof 运算符返回一个字符串，指示操作数的数据类型，无论是变量、函数还是对象。

语法： 以下是 typeof 运算符的语法：

typeof operand
// OR 
typeof(operand)

参数: 它需要以下参数：

• operand： 需要评估类型的表达式。

例子: 演示 typeof 运算符的基本例子。

Javascript

<script>
    // Output should be "string"
    console.log(typeof "Geeks");
     
    // Output should be "number"
    console.log(typeof 1);
     
    // Output should be "boolean"
    console.log(typeof false);
     
    // Undeclared variable. Output should be "undefined"
    console.log(typeof geeksForGeeks); 
     
    // Output should be "object"
    console.log(typeof { name: "Rajat", gender: "Male" }); 
</script>

输出：

string
number
boolean
undefined
object

在JavaScript中，一个 对象 是一组属性，这些属性通常以键值对的形式存在。它可以被视为非原始数据类型。

有三种不同的方法可以创建一个对象：

• 通过对象字面量
• 通过使用任何对象构造函数
• 通过直接在JavaScript中创建Object类的实例

示例： 通过对象字面量创建一个对象。

语法：

const object = {property1: value1, property2: value2};  

JavaScript

<script>
    const gfgObject = { 
        name: "Rajat", 
        age: 30,
        gender: "Male"
    };
      
    // Printing object 
    console.log(gfgObject);
</script>

输出：

{
   name: 'Rajat',
   age: 30,
   gender: 'Male'
}

示例： 使用任何对象构造函数创建一个对象

JavaScript

<script>
 
    // Constructor function ("this" refers
    // to the current object)
    function student(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
     
    const s = new student("Rajat",11,"Male");
    console.log(s);
<script>

输出:

{
   name: 'Rajat',
   age: 11,
   gender: 'Male'
}

例子： 通过直接在JavaScript中创建Object类的实例来创建一个对象。

语法：

const GFG = new Object();  

Javascript

const GFG = new Object();
  GFG.name = "Rajat";
  GFG.age = 35;
  GFG.gender = "Male";
   
  // Printing object
  console.log(GFG);

输出:

{
   name: 'Rajat',
   age: 35,
   gender: 'Male'
}

对于 typeof bar === “object” ，如果变量 bar 是一个对象，即它以三种先前提到的对象类型之一的形式存在，那么该语句将返回 true 。起初， typeof bar === “object” 似乎是确定 bar 是否是对象的可靠方法。然而，使用它的一个潜在陷阱是，在JavaScript的领域中，即使是原始值 null 也被视为对象。

这实际上是语言中的一个错误，因为 null 应该表示有意无对象值，但在使用 typeof 运算符进行测试时，它返回 “object” 。过去曾尝试修复此问题，但由于向后兼容性问题而被拒绝。以下代码片段说明了这个问题：

Javascript

<script>
    const bar = null;
     
    // Logs true to the console
    console.log(typeof bar === 'object'); 
</script>

输出：

true

这可以通过向现有代码中添加一个简单的检查来避免。也就是说，检查是否 bar ! null。 现在它将产生期望的输出（ false ）。

Javascript

const bar = null;
 
 // Logs false
console.log((bar !== null) && (typeof bar === 'object'));

输出:

false

到目前为止，假设 bar 是一个变量。但是如果 bar 是一个函数呢？上面的解决方案将返回 false 这在大多数情况下是期望的输出，但是如果有一种情况下预期的输出是 true ，那么代码需要略作修改如下：

Javascript

<script>
    function bar() {
        const b = 1;
    }
     
    console.log((bar !== null) && (typeof bar === 'object') ||
    (typeof bar === 'function'));
</script>

输出：

true

如果 bar 是一个数组，那么上面的解决方案将返回 true 在这种情况下，这是期望的输出，因为数组被视为对象，但如果有一种情况下期望的输出是 false ，代码可以按照下面所示进行修改：

Javascript

<script>
    const bar = [1, 2, 3];
     
    console.log((bar !== null) && (typeof bar === "object") && 
    (toString.call(bar) !== "[object Array]"));
</script>

输出结果:

false

还有一个最后的选择，它针对数组、null和函数返回 false ，但针对对象返回 true 。代码如下：

Javascript

<script>
    const bar = { firstName: "foo", lastName: "bar" };
     
    console.log((bar !== null) && (bar.constructor === Object));
</script>

输出：

true