undefined 与Void 0的微妙关系

333 阅读3分钟

局部属性 undefined

大多数情况下undefined指的都是window.undefined。其实在ECMAScript中,undefined不是一个保留字,这意味着什么呢?也就是说我们可以将undefined作为一个局部变量来使用,就像局部作用域中任何其他普通变量一样,没有任何特殊性,我们可以对其赋予任何类型的值。

(function() {
    var undefined = 'not is undefined';
    console.log(undefined); //"not is undefined"
    console.log(typeof undefined) // "string"
})()

我们可以看到undefined的值和类型都已经改变,这样的做法是非常不友好的,这样会使我们的代码难以维护和排错。

总结:undefined可以作为一个局部变量来使用,可以对其赋予任何类型的值

undefined 判断

如何判断一个变量是否为undefined,这里有两种方法。

  1. 使用严格相等符===或不相等操作符!==来决定一个变量是否拥有值,这里不使用标准相等操作符==,是因为标准相等符还会会检查变量是不是为null,但是严格相等操作符不会检查。null不等同于undefined,这点我们会在后面讲到。
  2. 使用typeof操作符,这种方式我们在上面已经使用过了,对未定义的变量检测时只能使用这种方式,要不然会出现报错。

void 0

上面我们提到过了,undefined作为局部变量使用是可以被重写的,那么如果我们使用下面这种判断方式,是有风险的。

if(data === undefined){
    //do something
}

那么我们怎样做才能确保万无一失呢?让我们先来了解一下void运算符,官方文档是这样解释的:

The void operator evaluates the given expression and then returns undefined.

void 运算符 对给定的表达式进行求值,然后返回 undefined

什么意思呢?就是使用void对后面的表达式求值,无论结果是多少,都会返回原始值undefined。因此我们可以用void 0来代替undefined进行判断,因为void 0始终返回的都是原始值undefined。

var data;
console.log(data === void 0); //true

JavaScript:viod(0)

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。

实例1:

<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

实例2:

<a href="javascript:void(alert('Warning!!!'))">点我!</a>  

在用户点击链接后显示警告信息

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是**#top** 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>  
<a href="#pos">点我定位到指定位置!</a>  
<p id="pos">尾部定位点</p>

详细资料可以参考: 《JavaScript 深入理解之原型与原型链》