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当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
js实现旋转木马效果
Mar 17 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
javascript实现点击产生随机图形
2021/01/25 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python实现坦克大战
2020/04/24 Python
Python中的__init__作用是什么
2020/06/09 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
知名企业招聘广告词大全
2014/03/18 职场文书
预备党员转正考核材料
2014/06/03 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
2015年党员自评材料
2014/12/17 职场文书
《失物招领》教学反思
2016/02/20 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
Tomcat弱口令复现及利用
2022/05/06 Servers