javascript中undefined的本质解析

 更新时间:2019年07月31日 14:33:24   作者:前端前端前端  
这篇文章主要介绍了javascript中undefined的本质解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、列出7种数据类型(面试可能问)

  • Undefined
  • Null
  • Boolean
  • String
  • Number
  • Symbol
  • Object

二、undefined本质

undefined是window对象的一个属性,其类型是Undefined。

下面解释javascript中属性的本质,因为undefined是一个属性,了解undefine的本质要用到属性的本质。

三、属性本质

对JavaScript来说,属性并非只是简单的名称和值,JavaScript用一组特征(attribute)来描述属性(property)。

先来说第一类属性,数据属性。它比较接近于其它语言的属性概念。数据属性具有四个特征。

  • value:就是属性的值。
  • writable:决定属性能否被赋值。
  • enumerable:决定for in能否枚举该属性。
  • configurable:决定该属性能否被删除或者改变特征值。

补充:第二类属性是访问器(getter/setter)属性,它也有四个特征。 (本文用不到,但可以和第一类属性放在一起记忆)

  • getter:函数或undefined,在取属性值时被调用。
  • setter:函数或undefined,在设置属性值时被调用。
  • enumerable:决定for in能否枚举该属性。
  • configurable:决定该属性能否被删除或者改变特征值。

我们通常用于定义属性的代码会产生数据属性,其中的writable、enumerable、configurable都默认为true。我们可以使用内置函数 Object.getOwnPropertyDescripter来查看,如以下代码所示:

const print = console.log
const o = {a: 1}
o.b = 2
// a和b均为数据属性
const aa = Object.getOwnPropertyDescriptor(o, 'a')
// {value: 1, writable: true, enumerable: true, configurable: true}
const bb = Object.getOwnPropertyDescriptor(o, 'b')
// {value: 2, writable: true, enumerable: true, configurable: true}
print('aa', aa)
print('bb', bb)

对window对象的undefined施加此函数:

由此看出undefined是window的第一类属性--数据属性,而且该属性不能能被赋值(writable=false),不能被for in枚举(enumerable=false),不能删除或改变特征值(configurable=false)。这也解释为什么给undefined重新赋值后其值却不改变:因为writable=false

以及解释为什么不能重新用Object.defineProperty函数定义undefined:因为configurable=false

注:如果我们要想改变属性的特征,或者定义访问器属性,我们可以使用 Object.defineProperty

四、Undefined与Null

一个问题,为什么有的编程规范要求用void 0代替undefined?现在我们就分别来看一下。

Undefined 类型表示未定义,它的类型只有一个值,就是 undefined。任何变量在赋值前是 Undefined 类型、值为 undefined,一般我们可以用全局变量undefined(就是名为undefined的这个变量)来表达这个值,或者 void 运算来把任一一个表达式变成 undefined 值。

但是呢,因为JavaScript的代码undefined是一个变量,而并非是一个关键字,这是JavaScript语言公认的设计失误之一,所以,为了避免无意中被篡改,建议使用 void 0 来获取undefined值。

Undefined跟 null 有一定的表意差别,null表示的是:“定义了但是为空”。所以,在实际编程时,我们一般不会把变量赋值为 undefined,这样可以保证所有值为 undefined 的变量,都是从未赋值的自然状态 。

Null 类型也只有一个值,就是 null,它的语义表示空值,与 undefined 不同,null 是 JavaScript 关键字,所以在任何代码中,你都可以放心用 null 关键字来获取 null 值。

五、总结

undefined是window对象的一个属性其类型是Undefined,属性不是简单的名值对,它还具有一组特征值(attribute)。通过Object.getOwnPropertyDescriptor函数可以得到这组特征值。通过Object.defineProperty函数可以添加一个自定义特征值的属性,在已有属性的特征值configurable为true的前提下也可以通过该函数修改已有属性的特征值。

补充:undefined在全局环境没法被赋值,在局部环境是可以被赋值的!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 判断一个变量是数组Array类型的方法

    判断一个变量是数组Array类型的方法

    JavaScript中如何判断一个变量是数组Array类型呢?本文向大家提供一个比较不错的方法,可以说是无懈可击了
    2013-09-09
  • JS实现n秒后自动跳转的两种方法

    JS实现n秒后自动跳转的两种方法

    这篇文章主要为大家详细介绍了JS实现n秒后自动跳转的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • javascript表单是否为空验证方法

    javascript表单是否为空验证方法

    表单验证在很多地方都可以用到,本文详细的介绍了javascript表单是否为空验证方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    时间轴动画和帧式动画有很大不同,但相比之下时间轴方式来的更直观和简便,下面这篇文章主要给大家介绍了关于如何利用JS实现时间轴动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • JS寄快递地址智能解析的实现代码

    JS寄快递地址智能解析的实现代码

    这篇文章主要介绍了JS寄快递地址智能解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • js当月水电气简单计算器

    js当月水电气简单计算器

    一个可以计算当月水电气多少钱的计算器 说明:输入各项后,在页面任意空白处点击鼠标,页面自动计算一次结果!,每项都必须填写,填0也可以
    2008-04-04
  • JavaScript 实现鼠标拖动元素实例代码

    JavaScript 实现鼠标拖动元素实例代码

    这篇文章主要介绍了JavaScript 实现鼠标拖动元素实例代码,需要的朋友可以参考下
    2014-02-02
  • Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解

    Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解

    这篇文章主要给大家介绍了关于Three.js利用orbit controls插件,也就是轨道控制来控制模型交互动作的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-09-09
  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    这篇文章主要介绍了JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件的相关资料,需要的朋友可以参考下
    2015-12-12
  • 使用堆实现Top K算法(JS实现)

    使用堆实现Top K算法(JS实现)

    这篇文章主要介绍了使用堆实现Top K算法,即JS实现,文中详细介绍了Top K算法,感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论