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函数
May 27 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
js重写方法的简单实现
Jul 10 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JavaScript 实现页面滚动动画
Apr 24 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
初识PHP中的Swoole
2016/04/05 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Python使用asyncio包处理并发详解
2017/09/09 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Python 绘制多因子柱状图
2022/05/11 Python