javascript 显示全局变量与隐式全局变量的区别


Posted in Javascript onFebruary 09, 2017

在JavaScript中,全局变量有两种声明方式

  • 使用 var 显示声明的全局变量

  • 不使用 var 声明的隐式全局变量

两者的区别在于是否能通过 delete 操作符删除

先看一段代码

var a = 'a'; // 显式声明的全局变量
b = 'b'; // 隐式声明的全局变量
 
console.log(a); // a
console.log(b); // b
console.log(window.a); // a
console.log(window.b); // b

在 js 中全局变量其实是global对象(window)的属性,因此两种方式声明的全局变量都可以通过 window 拿到

尝试用 delete 删除

// 显式声明的全局变量不能被删除
delete a; // 返回 false 
 
// 隐式声明的全局变量可以被删除
delete b; // 返回 true 
 
// 删除情况
console.log(typeof a); // string
console.log(typeof b); // undefined

delete 操作符可以删除一个对象的属性,但如果属性是一个不可配置(non-configurable)属性,删除时则会返回 false(严格模式下会抛出异常)

这就表示使用 var 声明的变量是不可配置的,使用 getOwnPropertyDescriptor 来获取描述属性特性的对象来验证这一点

Object.getOwnPropertyDescriptor(window, a); // {value: "a", writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptor(window, b); // {value: "b", writable: true, enumerable: true, configurable: true}

两者的根本区别在于显式声明的变量不可配置,不能通过 delete 操作符删除

需要注意的是 configurable 值一旦为 false,描述属性特性的对象就不能被修改,因此不能通过修改属性描述符使得显示声明的全局变量能被 delete 删除,但反过来,可以使隐式声明的全局变量也不能被 delete 删除

b = 'b';
var descriptor = Object.getOwnPropertyDescriptor(window, b);
descriptor.configurable = false;
Object.defineProperty(window, b, descriptor);
delete b; // 返回 false

以下是其他网友的补充

JavaScript之全局变量和隐式全局变量

隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。

1、通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。
2、无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。

这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的:

// 定义三个全局变量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
  global_fromfunc = 3; // 反面教材
}());
 
// 试图删除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true
 
// 测试该删除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在浏览器中,全局对象可以通过window属性在代码的任何位置访问(除非你做了些比较出格的事情,像是声明了一个名为window的局部变量)。但是在其他环境下,这个方便的属性可能被叫做其他什么东西(甚至在程序中不可用)。如果你需要在没有硬编码的window标识符下访问全局对象,你可以在任何层级的函数作用域中做如下操作:

var global = (function () {
  return this;
}());

这种方法可以随时获得全局对象,因为其在函数中被当做函数调用了(不是通过new构造),this总 是指向全局对象。实际上这个病不适用于ECMAScript 5严格模式,所以,在严格模式下时,你必须采取不同的形式。例如,你正在开发一个JavaScript库,你可以将你的代码包裹在一个即时函数中,然后从 全局作用域中,传递一个引用指向this作为你即时函数的参数。

以上就是javascript 显示全局变量与隐式全局变量的区别,两者的根本区别在于显式声明的变量不可配置,不能通过 delete 操作符删除,希望大家多关注三水点靠木的其他文章。

Javascript 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
使用node.js搭建服务器
May 20 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 #Javascript
简单谈谈Javascript函数中的arguments
Feb 09 #Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 #Javascript
微信小程序之picker日期和时间选择器
Feb 09 #Javascript
BootStrap 弹出层代码
Feb 09 #Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 #Javascript
javascript history对象详解
Feb 09 #Javascript
You might like
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
js表头排序实现方法
2015/01/16 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python使用Matlab命令过程解析
2020/06/04 Python
使用K.function()调试keras操作
2020/06/17 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
湘江北去观后感
2015/06/15 职场文书
女性健康讲座主持词
2015/07/04 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL