深入理解 Undefined

jimhs 发布于2019-08-26 13:29 / 365人阅读

摘要：因此，当声明一个变量但还未赋值时，它将被赋予值。和之间唯一真正的关系是它们在类型强制过程中都判断为。之所以所以是因为没有执行严格的比较，因为在比较类型时使用更严格。

原文：http://davidshariff.com/blog/...
翻译：疯狂的技术宅

本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章

Undefined 这个概念听起来很简单，不过你知道应该怎样检查JavaScript中的变量或属性是否真的存在吗？做这件事最好的方法是什么？我们如何涵盖所有的边界值？要回答这些问题，首先让我们来看看究竟什么是undefined......

undefined概述

变量的值被赋予一个类型，JavaScript中有几个内置的本地类型：

Undefined

Null

Boolean

String

Number

Object

Reference

etc…

首先看第一个，内置的Undefined类型只能有一个值，它称为undefined。这是一个原始值，只要声明了变量，就会为其分配此undefined值，直到您以编程的手段为其分配不同的值。

此外，每当函数完成执行并返回一个没有给定的值时，它默认返回undefined。

var foo,
    bar = (function() {
        // do some stuff 
    }()),
    baz = (function() {
        var hello;
        return hello;
    }());

typeof foo; // undefined
typeof bar; // undefined
typeof baz; // undefined

因此，当声明一个变量但还未赋值时，它将被赋予undefined值。我们还应该注意的是：undefined本身是一个在全局范围内可用的变量/属性，它的值也是undefined。

typeof undefined; // undefined

var foo;

foo === undefined; // true

但是，全局变量undefined并不是保留字，因此它可以被重新定义。幸运的是，从ECMA 5开始，就不允许重新定义undefined了，但是在以前的版本和旧版浏览器中，可以执行以下操作：

typeof undefined; // undefined
undefined = 99;
typeof undefined; // number

null到底代表了什么？

先看下面的代码：

null == undefined // true
null !== undefined // true

很多人对此都感到困惑，实际上很简单。 null和undefined之间唯一真正的关系是：它们在类型强制过程中都判断为false。

之所以所以 null == undefined // true 是因为 == 没有执行严格的比较，因为在比较类型时使用 !== 更严格。每当您把 null 看作是一个值时，它会始终以编程方式进行指定，并且在默认情况下从不设置。

访问对象的属性

当您尝试使用对象上一个不存在的属性时，也会得到undefined，如果您把不存在的属性作为函数使用有时会引发错误。

var foo = {};

foo.bar; // undefined
foo.bar(); // TypeError

如果您想分辨“有未定义值的属性”和“根本不存在的属性”这两者，应该怎么做呢？

使用typeof 或者 ===都会给你一个undefined的值。

使用in运算符能够检查对象中是否存在某个属性：

var foo = {};

// undefined (这样不好，bar从未在window对象中被声明过)
typeof foo.bar;

// false (如果您不关心原型链，这样用)
"bar" in foo;

// false (如果你关心原型链，就这样用)
foo.hasOwnProperty("bar");

应该用typeof还是in/hasOwnProperty？

这很显然。一般来说，如果要测试是一个属性否存在，那么就用 in/hasOwnProperty，如果要检查属性或变量的值，则用 typeof。

通过例子进行总结

检查变量是否存在：

if (typeof foo !== "undefined") {}

检查对象上的属性是否存在，无论是否已经为它分配了值：

// 存在于对象上，同时也检查原型
if ("foo" in bar) {}

// 直接存在于对象上，不检查原型
if (bar.hasOwnProperty("foo")) {}

检查对象上是否存在属性，并且属性具有值集（真值或假）

var bar = {
    foo: false
}; 

if ("foo" in bar && typeof bar.foo !== "undefined"){ 
    // bar.foo存在，并且它包含以编程方式分配的值
}

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

GPU云服务器云服务器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108897.html

【1】JavaScript 基础深入——数据类型深入理解与总结

摘要：类型的实例首先要理解的含义是例子的意思，实际上是判断是否是的一个实例。数据类型深入理解数据类型分类基本（值）类型（5种） String：任意字符串 Number：任意的数字 boolean：true/false null：null undefined：undefined 对象（引用）类型（3种） Object：任意对象 Array：一种特别的对象（数值下...

since1986 2019-08-23 17:15 评论0 收藏0
深入理解JavaScript（一）：变量提升

摘要：变量提升原理引擎的工作方式是先解析代码，获取所有被声明的变量然后在运行。代码自上而下执行之前，浏览器首先会把所有带关键词的进行提前声明或者定义，这种预先处理机制称之为变量提升。变量提升原理：JS引擎的工作方式是先解析代码，获取所有被声明的变量；然后在运行。JS代码自上而下执行之前，浏览器首先会把所有带 VAR/FUNCTION 关键词的进行提前声明或者定义，这种预先处理机制...

voidking 2019-08-26 10:32 评论0 收藏0
深入理解 Javascript 之 JS的解析与执行过程

摘要：的解析与执行过程第一个弹出函数体第二个弹出函数体第三个弹出第四个弹出第五个弹出最后一行报错执行分析第行，没有关键字，不解析第行，遇到关键字，解析到全局的头部第行，没有关键字，不解析第行，遇到关键字，解析到全局的头部第行，没有关键 js的解析与执行过程 showImg(https://segmentfault.com/img/bVbe2UQ?w=1744&h=782); alert(a)...

amuqiao 2019-08-23 10:51 评论0 收藏0
JavaScript深入理解对象方法——Object.defineProperties()

摘要：方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。默认为当且仅当在枚举相应对象上的属性时该属性显现。函数返回值将被用作属性的值。默认为返回值传递给函数的对象。 Object.defineProperties() Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。语法 Object.defineProperti...

jk_v1 2019-08-21 17:06 评论0 收藏0
深入理解Webpack核心模块Tapable钩子[同步版]

摘要：本文将根据以下章节分别梳理每个钩子同步钩子首先安装是简单的同步钩子，它很类似于发布订阅。至此，我们把的所有同步钩子都解析完毕异步钩子比同步钩子麻烦些，我们会在下一章节开始解析异步的钩子传送门深入理解核心模块钩子异步版代码记录下自己在前端路上爬坑的经历加深印象，正文开始～ tapable是webpack的核心依赖库想要读懂webpack源码就必须首先熟悉tapableok.下面是...

cangck_X 2019-08-23 15:29 评论0 收藏0