javascript中undefined的本质解析


Posted in Javascript onJuly 31, 2019

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

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

二、undefined本质

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

javascript中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)

javascript中undefined的本质解析

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

javascript中undefined的本质解析

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

javascript中undefined的本质解析

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

javascript中undefined的本质解析

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

javascript中undefined的本质解析

四、Undefined与Null

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

javascript中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在全局环境没法被赋值,在局部环境是可以被赋值的!

javascript中undefined的本质解析

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

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 #Javascript
js实现一个简易计算器
Mar 30 #Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 #Javascript
JS获取动态添加元素的方法详解
Jul 31 #Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
详解Vuex下Store的模块化拆分实践
Jul 31 #Javascript
You might like
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP中ADODB类详解
2008/03/25 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
python中文乱码的解决方法
2013/11/04 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python用for循环求和的方法总结
2019/07/08 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Python3运算符常见用法分析
2020/02/14 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英语专业推荐信
2013/11/16 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
超市创业计划书
2014/04/24 职场文书
先进事迹演讲稿
2014/09/01 职场文书
公务员个人年终总结
2015/02/12 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js