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 相关文章推荐
jQuery Clone Bug解决代码
Dec 22 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
书法大赛策划方案
2014/06/04 职场文书
运动会的口号
2014/06/09 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
社区工作者个人总结
2015/02/28 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2016新年年会主持词
2015/07/06 职场文书
运动员入场前导词
2015/07/20 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python