JS中作用域以及变量范围分析


Posted in Javascript onJuly 18, 2020

变量作用域

js作为一门脚本语言,他与c,java这些语言是不相同的。

全局变量

在js中声明全局变量,有下面几种方式:

1.在函数外通过var来声明。

var test ="hello";
console.log(test);
function a(){
  test="xx";
  console.log(test);
}
a();
console.log(test);

结果:

hello
xx
xx

这种方式通过声明的变量在任何地方都可进行修改和使用。

2.在函数中隐士的声明变量

function a(){
  test=22;
  console.log(test);
}
a();
console.log(test);

结果:

22
22

因为js是弱类型脚本语言,在使用之前无需定义,所以可以通过这种方式也能声明全局变量。

来看一个反例:

var test="aa";
console.log(test);
function a(test){
  test=22;
  console.log(test);
}
a(test);
console.log(test);

结果:

aa
22
aa

可以看到在函数中修改了test值可是第二次在函数外打印的值没有变。这是因为在函数的过程中只是进行了值传递。局部变量覆盖掉了全局变量,只是局部变量 在 修改。

因为在函数的参数内定义的变量并不是全局变量。

反例二:

function a(){
  var test="aa";
  console.log(test);
}
a();
console.log(test);

结果

aa
notdefine

在函数内通过var来声明的变量是局部变量,函数外无法访问。

变量作用域

js的作用域和c与java这些语言的作用域也不相同,骚小孩在以前经常会因为这个而头疼,后来在认真学习了以后才懂了。

1.js中没有块范围。

if(1!=1){
  var y=c;
}
console.log(y)
 
if(1==1){
  var x=a;
}
console.log(x);

结果:

undefine
a

可以看到在if代码块定义的两个变量,在if块之外去打印,如果判断成功的话,才会去执行里边的声明语句,声明语句执行了,那么在代码块外边就可访问到了。

也可以看出在代码块中声明的变量也是全局变量。

2.js中的全局变量都会成为window的属性

var x=0;
console.log(window.x);

结果:

0

3.变量提升

var c=0;
function a(){
  console.log(c);
}
a();

结果:

0

var c=0;
function a(){
  console.log(c);
  var c=11;
}
a();

结果:

undefine

可以看出在函数中加了一行声明语句结果就会不同,这产生这样的原因是什么呢?

其实第二个代码块的执行顺序是这样的:

var c=0;
function a(){
  var c;
  console.log(c);
  c=11;
}
a();

在函数中他会先把声明语句提升到第一行,但是并不提升赋值。然后局部变量覆盖全局变量,在打印c的时候局部变量还没来的

及赋值所以就是undefine。

变量提升不只会提升会执行的变量,不会执行的变量也会进行提升:

var c=10;
function a(){
  console.log(c);
  if(false) {
    var c = 10;
  }
}
a();

结果:

undefine

因为在if判断中定义了局部变量c,虽然if条件不成立,但是也会进行变量提升,所以打印c也是undefine;

4.let变量

通过上面的例子可以看到用var来定义变量的弊端:

1.var定义的变量没有块作用域;

2.var定义的全局变量会自动添加全局window对象的属性;

3.var变量会提前装载(变量提升);

let就是为了解决这些问题而诞生的。

for(let i=0;i<5;i++){
  
}
console.log(i);

结果:

报错

在代码块中定义了let变量,在外部引用的时候不会存在。即存在块作用域。

let i=10;
console.log(window.i);

结果:

undefine

let声明的变量并不会成为window的属性。

var c=10;
function a(){
  console.log(c);
  let c=1;
  console.log(c);
}
a();

在函数中存在变量与全局变量名相同的c,因此会覆盖掉全局变量c,但是由于let不会提前装载,所以在第一个打印语句打印c时会报错。

到此这篇关于JS中作用域以及变量范围分析的文章就介绍到这了,更多相关JS变量作用域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
JS中的变量作用域(console版)
Jul 18 #Javascript
js里面的变量范围分享
Jul 18 #Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 #Javascript
深入理解 ES6中的 Reflect用法
Jul 18 #Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 #Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 #Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 #Javascript
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
财务经理的岗位职责
2013/12/17 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android