javascript 显示全局变量与隐式全局变量的区别

 更新时间:2017年02月09日 12:20:23   投稿:mdxy-dxy  
这篇文章主要介绍了javascript 显示全局变量与隐式全局变量的区别,需要的朋友可以参考下

在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 操作符删除,希望大家多关注脚本之家的其他文章。

相关文章

  • 原生js拖拽功能制作滑动条实例代码

    原生js拖拽功能制作滑动条实例代码

    这篇文章主要介绍了原生js拖拽功能制作滑动条实例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 微信小程序位置授权处理方法

    微信小程序位置授权处理方法

    这篇文章主要给大家介绍了关于微信小程序位置授权处理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JavaScript中立即执行函数实例详解

    JavaScript中立即执行函数实例详解

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料,需要的朋友可以参考下。
    2017-11-11
  • php,js,css字符串截取的办法集锦

    php,js,css字符串截取的办法集锦

    这篇文章主要介绍了php,js,css字符串截取的办法,其实没有什么技术含量,就是记录一下,方便自己复习巩固,希望对大家能有所帮助
    2014-09-09
  • ECharts饼图颜色设置的4种方式总结

    ECharts饼图颜色设置的4种方式总结

    这篇文章主要给大家介绍了关于ECharts饼图颜色设置的4种方式,ECharts饼图的颜色可以通过多种方式进行设置,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • 关于JavaScript的with 语句的使用方法

    关于JavaScript的with 语句的使用方法

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象
    2011-05-05
  • momentjs使用详细说明

    momentjs使用详细说明

    这篇文章主要介绍了momentjs详细使用说明,使用 Moment.js 可以轻松地获取上周、上月和前三个月的起始和结束时间,在示例中,我们传入了 '2023-07-15',并将返回的日期信息存储在 dateInfo 变量中,然后将其打印到控制台上,需要的朋友可以参考下
    2023-07-07
  • JavaScript 详解预编译原理

    JavaScript 详解预编译原理

    这篇文章主要介绍了JavaScript 详解预编译原理的相关资料,需要的朋友可以参考下
    2017-01-01
  • Google (Local) Search API的简单使用介绍

    Google (Local) Search API的简单使用介绍

    这篇文章主要介绍了Google (Local) Search API的简单使用。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript生成简单等差数列

    JavaScript生成简单等差数列

    本文给大家分享使用for循环实现js生成简单的等差数列,具体实现方法,大家参考下本文
    2017-11-11

最新评论