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入门教程 Cookies
Jan 31 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python内置数据类型详解
2014/08/18 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python使用pymysql小技巧
2017/06/04 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python笔记之代理模式
2019/11/20 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
师说教学反思
2014/02/07 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
小兵张嘎观后感
2015/06/03 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
MySQL创建管理HASH分区
2022/04/13 MySQL