undefined和undeclared区别

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

前言

先思考一个问题，在引入插件的时候，我们怎么判断引入成功了喃？比如大名鼎鼎的jQuery

 if($){   // Uncaught ReferenceError: $ is not defined
     console.log("成功引入jQuery")    
 }

这是你的第一思路喃？但是当我们运行代码的时候会发现，当我们没有引入jQuery时，代码会报错，因为我们在未声明的情况下就使用$变量。这里我们把未声明的$标识符理解为 undeclared（未声明）

undeclared和undefined

undefined

这是前端开发最长使用到的一个标识符，代表已在作用域中声明但还没有赋值的变量，是 undefined 的

 let a;
 console.log(a)   // undefined     

undeclared

很多开发人员认为undeclared等同于undefined ，这种理解是错误的！！！

undeclared是指没有在作用域中声明过的变量，很显然这样的变量直接使用就会报错

 console.log(b)   // Uncaught ReferenceError: b is not defined

如何判断undeclared

可能会有朋友疑惑，为什么要去区分这两个标识符喃，undeclared会报错，肯定不会去用呀！！！

但是就如前言里面讲的，怎么去判断是否成功引入jQuery插件喃？？？

• 使用widow.$判断

   if(widow.$){
       console.log("成功引入jQuery")
   }
  

  有类似场景经验的程序员会使用上面这种方式，判断widow.$返回的真假进行判断成功是否引入了jQuery

  主要利于的知识点包含：

  • 在JS中所有的全局变量，都可以通过window全局对象属性访问到；
  • 在S中访问对象没有的属性，不会产生报错，并且会返回undefined

  不足

  • 如果在某个局部作用域判断喃，此时就不能使用widow来访问这个变量了
  • 在不同环境中，不是所有的全局变量都时widow，比如在nodeJS环境

• typeof判断

  先来看看typeof的作用

   let a,b=2;
   typeof a   // undefined
   typeof b   // number
   typeof c   // undefined
  

  很显然作用就是返回变量的类型，但是当我们typeof undeclared数据时会发现返回的是undefined，很容易想到typeof 可以帮助我们判断undeclared数据，因为typeof 使用undeclared不会报错，这也是JS安全防范机制

  那我们就可以使用如下方案，也可以实现判断效果

   if(typeof $ == 'undefined'){
        console.log("成功引入jQuery")
   }
  

  而且这种方式完美的解决了第一种方式的不足，但是也还是有小小的不足，无法区分undefined和undeclared，但是这是可以避免和解决的