使用 typeof bar === “object” 来确定 bar 是否是对象的潜在陷阱是什么？

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

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

typeof operand
// OR 
typeof(operand)

参数：它采用以下参数：

• 操作数：需要计算其类型的表达式。

示例：演示typeof运算符的基本示例。

Javascript

    // 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" }); 

Javascript

  
    // 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></code></pre></div><br><hr><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">const GFG = new Object();
  GFG.name = "Rajat";
  GFG.age = 35;
  GFG.gender = "Male";
    
  // Printing object
  console.log(GFG);</code></pre></div><br><hr><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
    const bar = null;
      
    // Logs true to the console
    console.log(typeof bar === 'object'); 

输出：

string
number
boolean
undefined
object

JavaScript 中的对象是属性的集合，这些属性通常以键值对的形式出现。它可以被认为是一种非原始数据类型。

创建对象的三种不同方法：

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

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

句法：

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

Javascript

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

输出：

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

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

Javascript

  
    // 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>
</code></pre></div></div></div><p style="text-align:justify"><strong>输出：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">{
   name: 'Rajat',
   age: 11,
   gender: 'Male'
}</code></pre></div><p style="text-align:justify"><strong>示例：</strong>通过直接在 JavaScript 中创建 Object 类的实例来创建对象。</p><p style="text-align:justify"><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">const GFG = new Object();  </code></pre></div><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> Javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">const GFG = new Object();
  GFG.name = "Rajat";
  GFG.age = 35;
  GFG.gender = "Male";
    
  // Printing object
  console.log(GFG);
</code></pre></div></div></div></div><p style="text-align:justify"><strong>输出：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">{
   name: 'Rajat',
   age: 35,
   gender: 'Male'
}</code></pre></div><p style="text-align:justify">来到<strong>typeof bar === “object”</strong> ，如果变量<strong>bar</strong>是一个对象，这意味着如果它采用上述三种对象类型中的任何一种的形式，那么该语句将返回<strong>true</strong> 。最初， <strong>typeof bar === “object”</strong>似乎是确定<strong>bar</strong>是否为对象的可靠方法。但是，使用它的一个潜在缺陷是，在 JavaScript 领域中，即使原始值<strong>null</strong>也被视为对象。</p><p style="text-align:justify">这实际上是语言中的一个错误，因为<strong>null</strong>应该表示有意缺少对象值，但在使用<strong>typeof</strong>运算符进行测试时它返回<strong>“object”</strong> 。过去曾尝试修复它，但由于向后兼容性问题而被拒绝。下面的代码片段说明了这个问题：</p><div class="responsive-tabs"><h2 class="tabtitle"> Javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
    const bar = null;
      
    // Logs true to the console
    console.log(typeof bar === 'object'); 

输出：

true

如果将简单的检查添加到预先存在的代码中，则可以避免这种情况。也就是说，检查bar !== null 是否。现在它将产生预期的输出（ false ）。

Javascript

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

输出：

false

直到这个阶段，假设bar是一个变量。但是如果bar是一个函数呢？上面的解决方案将返回false ，这是大多数情况下所需的输出，但如果存在预期输出为true的场景，则代码需要稍微修改如下：

Javascript

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

输出：

true

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

Javascript

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

输出：

false

最后一种替代方法对数组、空值和函数返回false ，但对对象返回true 。代码如下所示：

Javascript

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

输出：

true