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面向对象编程
Mar 04 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JavaScript Split()方法
Dec 18 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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的库,结果发现很多东西
2006/12/31 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
jQuery实现动态加载瀑布流
2020/09/01 jQuery
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python杀死一个线程的方法
2015/09/06 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
Weblogic的布署方式
2013/08/23 面试题
商场促销活动方案
2014/02/08 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
2014年话务员工作总结
2014/11/19 职场文书
Python中的pprint模块
2021/11/27 Python
如何使用python包中的sched事件调度器
2022/04/30 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python