js通过var定义全局变量与在window对象上直接定义属性的区别说明

 更新时间:2022年09月05日 10:52:04   作者:Shawyu_  
这篇文章主要介绍了js通过var定义全局变量与在window对象上直接定义属性的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

js var定义全局变量与在window对象上直接定义属性区别

关于window

一、所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

二、全局变量是 window 对象的属性。

三、全局函数是 window 对象的方法。

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。如:

var name = "xiaomi";
console.log(window.name);//"xiaomi"

区别一

全局变量不能通过delete删除,而window属性上定义的变量可以通过delete删除:

var num1=123;
window.num2=456;
delete num1;
delete num2;
console.log(num1);  //123
console.log(num2);  //num2 is not defined

全局变量num1之所以不能通过delete删除,是因为通过var语句添加的全局变量有一个configurable属性,其默认值为false,如下,所以这样定义的属性不可以通过delete删除。

var num1=123;
window.num2=456;
Object.getOwnPropertyDescriptor(window, "num1");
//Object {value: 123, writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptor(window, 'num2');
//Object {value: 456, writable: true, enumerable: true, configurable: true}

区别二

尝试访问未声明的变量会报错,xxx is not defined。

但是通过查询window查询,可以知道某个可能未声明的变量是否存在,不会报错,只会显示undefined。

console.log(num1); // undefined
var num1=123;
console.log(num2); // ReferenceError: a is not defined
window.num2=456;

这一点可以用预编译解释,var声明的变量会提升声明到顶部。

区别三

在函数中使用var定义的变量是局部变量。

有时想要在外部也访问到函数里面的变量,就需要定义window对象属性。

function () {
    var num1 = 123;
    window.num2 = 456;
}
console.log(num1); //num1 is not defined
console.log(num2); //456

js中定义的全局变量,局部变量

关于变量和参数问题

var a  = 2; //全局变量 
function func()
{
    var a = 1;  //局部变量    
     a = 2;     //全局变量 
}

函数外面定义的变量是全局变量,函数内可以直接使用。

在函数内部没有使用var定义的=变量则为全局变量,

*在函数内使用var关键字定义的变量是局部变量,即出了函数外边无法获取。

js函数定义的参数没有默认值,(形参的默认值在之前只有新版火狐支持,目前新版的chrome浏览器也可以支持)

JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍。 

声明方式一: 

使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量。该方式即为显式声明详细如下:

  var test = 5;//全局变量 
  function a(){ 
    var a = 3;//局部变量 
    alert(a); 
  } 
  function b(){ 
    alert(test); 
  } 
  //a();//调用a方法,那么方法里面的内容才会执行 
  //b();//同上 

声明方式二: 

没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test。即使该语句是在一个function内,当该function被执行后test变成了全局变量。

    test = 5;//全局变量 
    function a(){ 
      aa = 3;//也是全局变量 
      alert(test); 
    } 
    //a();  //输出5 
    //alert(aa);//这里也可以方法a()方法里面的变量,因为aa是全局变量 

声明方式三: 

使用window全局对象来声明,全局对象的属性对应也是全局变量,详细如下:

<script> 
  window.test = 50; 
  alert(test);//输出50 
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于JavaScript数组去重的一些理解汇总

    关于JavaScript数组去重的一些理解汇总

    这篇文章主要给大家介绍了关于JavaScript数组去重的一些理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • JavaScript手写Promise核心原理

    JavaScript手写Promise核心原理

    这篇文章主要介绍了JavaScript手写Promise核心原理,promise 可以说是出场率很高的api了,这篇文章手写一版promise,可以加强对promise的认识
    2022-06-06
  • 微信小程序音频录制波纹循环动画

    微信小程序音频录制波纹循环动画

    这篇文章主要为大家详细介绍了微信小程序音频录制波纹循环动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • javascript实现很浪漫的气泡冒出特效

    javascript实现很浪漫的气泡冒出特效

    这篇文章主要为大家详细介绍了javascript实现很浪漫的气泡冒出特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript实现动态删除列表框值的方法

    JavaScript实现动态删除列表框值的方法

    这篇文章主要介绍了JavaScript实现动态删除列表框值的方法,涉及javascript针对select列表框的遍历与删除操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 重新理解JavaScript的六种继承方式

    重新理解JavaScript的六种继承方式

    通过本文带领大家一起重新理解JavaScript的六种继承方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • js 与或运算符 || && 妙用

    js 与或运算符 || && 妙用

    js 与或运算符 || && 妙用,可用于精简代码,降低程序的可读性。
    2009-12-12
  • JavaScript获取图片真实大小代码实例

    JavaScript获取图片真实大小代码实例

    这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下
    2014-09-09
  • 微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

    微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

    这篇文章主要介绍了微信小程序swiper组件实现抖音翻页切换视频功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • antd组件Upload实现自己上传的实现示例

    antd组件Upload实现自己上传的实现示例

    这篇文章主要介绍了antd组件Upload实现自己上传的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论