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 相关文章推荐
javascript中的window.location.search方法简介
Sep 02 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
用console.table()调试javascript
Sep 04 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jQuery的框架介绍
May 11 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
对Angular中单向数据流的深入理解
2018/03/31 Javascript
SVG实现时钟效果
2018/07/17 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
详解Vue中的自定义指令
2020/12/07 Vue.js
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
中专自我鉴定范文
2013/10/16 职场文书
单位介绍信范文
2014/01/18 职场文书
李敖北大演讲稿
2014/05/24 职场文书
食品工程专业求职信
2014/06/15 职场文书
个人收入证明模板
2014/09/18 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
建党伟业的观后感
2015/06/01 职场文书