关于javascript:JavaScript未定义变量检测undefined-null-detection

HTML5 自十多年前（2010 年前后）被推举以来，逐步大放异彩，只管过来十年是属于 Native APP 的高光时刻，但 HTML5 的一些新个性和性能还是带来了大量的新网络 / 网页利用，尤其是在 JavaScript 的加持下，网页利用有极其令人着迷的便当与弱小。

JavaScipt 是网页利用默认编程语言，让人又爱又恨。

笔者已经在《中国计算机学会通信》上刊发了一篇认识文章《JavaScript 或成主导的编程语言》（https://dl.ccf.org.cn/institu…），其后两个开源我的项目 GTAjax (https://ufqi.com/dev/gtajax) 和 Hanjst (https://ufqi.com/dev/hanjst/H…) 又别离是应用 JavaScript 做了实现，甚至 Base62x(https://ufqi.com/dev/base62x/) 的编解码办法，都有 JavaScript 语言版本，堪称是 JavaScript 的重度用户、开发者。

即便如此“资深”，仍经常感觉 JavaScript 用起来让人不那么释怀，为了写出更牢靠的代码，咱们甚至在 JavaScript 中显示地申明用严格查看模式: use strict.

即便如此“审慎”，咱们也会遇到 object/variable is null or undefined 的异样抛出，使得程序异样终止，为用户带来了很不好的体验。随着咱们在 UfqiWork/ 有福工坊 (https://ufqi.com/work) 的开发推动，咱们尝试寻找一种检测 JavaScript 变量或者对象是否 null 或 undefined 办法的致力，有了新播种，兹分享如下。

从 JavaScript 自身来说，要检测某个对象或变量是否为 null/undefined，次要有两个工具可用：typeof 操作符 和 window.hasOwnProperty 办法。咱们所创制的办法，代码 1，也是基于这两个基本操作。

//- _isDefined
//- @param: $var, to be tested;
//- @param: global_or_local:‘global|local’, optional
//- return true | false
//- usage: test whether a global variable($var): _isDefined(“$var”) , _isDefined($var)
//- test a variable($var) declared nearby/locally: _isDefined($var) , _isDefined(“$var”,“local”)
function _isDefined($var, global_or_local){
var isDef = false;
if($var != null){
var myTp = typeof $var;
if(myTp ==‘string’){
if(window.hasOwnProperty($var)){
isDef = true;
}
else if(global_or_local != null && global_or_local ==‘local’){
isDef = true;
}
else{
//- @todo
}
}
else if(myTp !=‘undefined’){
isDef = true;
}
}
return isDef;
}

这些代码曾经部署在 Hanjst/ 汉吉斯特，UfqiWork/ 有福工坊 相干模块中，经实测，运行良好，合乎预期。

在编制这些代码之前，咱们也已经在多个利用中写了大量的检测某个 JavaScript 是否为 null/undefined，无一例外地都是应用 typeof 或者 window.hasOwnProperty 办法，甚至再带着对 null 和 empty 的判断。代码显得异样繁琐和臃肿。置信尔后，这些代码将陆续失去简化和修改，新写的代码也将引入该性能 _isDefined .

在编制这些代码之前，咱们也在网络上进行了 code review，翻阅了大量针对此问题的解决思路和方法，可能面对不同运行时环境，给出的解决办法也各个不同，实际上并没有一种办法能够通用到“放之四海而皆准”。

比方最靠近本办法的一个尝试是定义一个 isDefined2, 代码 2，而后在办法体内应用 typeof 操作符判断传入的 $var 是否 null/undefined , 以此来进行判断变量或者对象 $var 是否为 null/undefined .

//- _isDefined2, WRONG!
//- @param: $var, to be tested
//- return true | false
function _isDefined2($var){
var isDef = false;
if(typeof $var !=‘undefined’){
isDef = true;
}
return isDef;
}

这段代码通常状况下，可能进行运行，并对一些变量实现 null/undefined 的探测。然而这个状况只局限在本地变量或者以后曾经申明的变量，如果待探测的变量 $var 没有在 _isDefined2 调用之前被申明，则调用探测语句 _isDedined2($var) 自身就会报错说 $var is null/undefined .

问题进一步地被延申到 JavaScript 的函数办法调用的参数传递是 pass-by-value 传值，还是 pass-by-reference 传援用。通常状况下，JavaScript 的办法调用都是 pass-by-value, 所以在执行语句 _isDefined($var) 时，先要对 $var 进行取值操作，而 $var 如果自身 undefined 时，喜剧谬误就产生了，检测是否为 null/undefined 之前曾经产生了 undefined .

当咱们判断了 $var 为 String 类型的数据对象时，同时引发了另外一个问题，就是当某一个数据变量或对象其自身就是字符串时，如果其自身是一个本地变量，而 String 类型会被视为检测全局变量，这里就会产生异样谬误，把本该返回本地变量为 true 的后果，谬误地解释为全局变量为 false。因而须要进一步地对办法自身做修改，使之可能兼容本地变量、String 类型，改良的做法是针对 _isDefined 引入第二个参数，显示地通知程序，以后尽管引入了 String 类型的变量，但不是默认检测全局变量，而是要检测本地变量。

进一步地修改这个问题，咱们创制了样例代码 1. 能够兼容全局变量和本地变量，不论 $var 是否被什么，都可能进行检测。只是，在调用的时候须要辨别，待检测的变量或者对象是全局变量或者是局部变量：
如果是全局变量，调用形式是：_isDefined(“$var”) , _isDefined($var)
如果是局部变量，调用办法是：_isDefined($var,‘local’) , _isDefined(“$var”,‘local’)

变量 $var 在被检测之前，咱们可能晓得它是全局变量或者局部变量吗？
答案应该是明确的。

测试样例：

var a;
console.log(“UfqiWork/Hanjst: a:”+_isDefined(a));
var b = null;
console.log(“UfqiWork/Hanjst: b:”+_isDefined(b));
var c = 0;
console.log(“UfqiWork/Hanjst: c:”+_isDefined(c));
console.log(“UfqiWork/Hanjst: global-c:”+_isDefined(“c”));
var dd =“d_string”;
console.log(“UfqiWork/Hanjst: local-dd:”+_isDefined(dd,‘local’));
console.log(“UfqiWork/Hanjst: global-dd:”+_isDefined(dd));
console.log(“UfqiWork/Hanjst: global-dd:”+_isDefined(“dd”));
console.log(“UfqiWork/Hanjst: local-dd:”+_isDefined(“dd”,‘local’));

预期输入：

UfqiWork/Hanjst: a:false
UfqiWork/Hanjst: b:false
UfqiWork/Hanjst: c:true
UfqiWork/Hanjst: global-c:false
UfqiWork/Hanjst: local-dd:true
UfqiWork/Hanjst: global-dd:false
UfqiWork/Hanjst: global-dd:false
UfqiWork/Hanjst: local-dd:true

Hanjst

Hanjst 汉吉斯特 Logo

🙋Hanjst 汉吉斯特 是一种基于 JavaScript 的模板语言及模版解析引擎，她运行在客户端或服务器端。

🙋Hanjst 汉吉斯特 可能表述逻辑管制，可能实现与服务器端模版语言雷同的弱小性能。

Hanjst 当齐全在客户端解析时，节俭服务器端计算资源;

Hanjst 模板语言独立，不与服务器端资源做任何绑定；

纯正的 MVC，层间数据用 JSON 格局传递；

常见模板语言性能全反对，附带简单而弱小的 JavaScript 编程能力；

无学习老本，间接应用 JavaScript 书写模板语言；

….

Hanjst is a JavaScript-based templating language and parsing engine that runs on both the client-side and/or server-side.

Hanjst can express logical controls and achieve the same functionalities as the server-side templating languages.

Hanjst’s Run-time in client-side, reduce computing render in server-side;

Hanjst is Language-independent, not-bound with back-end scripts or languages;

Totally-isolated between MVC, data transfer with JSON;

Full-support template tags with built-in logic and customized JavaScript functions;

No more tags languages to be learned, just JavaScript;

….

https://ufqi.com/blog/javascr…