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前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 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
德劲1104的电路分析与改良
2021/03/01 无线电
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
关于php中一些字符串总结
2016/05/05 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
经典大学生求职信范文
2014/01/06 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js