首页 >> js开发 >> jsJS中作用域以及变量范围分析js大全
jsJS中作用域以及变量范围分析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
变量作用域变量作用域js作为一门脚本语言,他与c,java这些语言是不相同的。全局变量全局变量在js中声明全局变量,有下面几种方式:1.在函数外通过var来声明。1.在函数外通过var来声明。
var test ="hello";
console.log(test);
function a(){
test="xx";
console.log(test);
}
a();
console.log(test);
var test ="hello";
console.log(test);
function a(){
test="xx";
console.log(test);
}
a();
console.log(test);结果:
hello
xx
xx
hello
xx
xx这种方式通过声明的变量在任何地方都可进行修改和使用。2.在函数中隐士的声明变量2.在函数中隐士的声明变量
function a(){
test=22;
console.log(test);
}
a();
console.log(test);
function a(){
test=22;
console.log(test);
}
a();
console.log(test);结果:
22
22
22
22因为js是弱类型脚本语言,在使用之前无需定义,所以可以通过这种方式也能声明全局变量。来看一个反例:
var test="aa";
console.log(test);
function a(test){
test=22;
console.log(test);
}
a(test);
console.log(test);
var test="aa";
console.log(test);
function a(test){
test=22;
console.log(test);
}
a(test);
console.log(test);结果:
aa
22
aa
aa
22
aa可以看到在函数中修改了test值可是第二次在函数外打印的值没有变。这是因为在函数的过程中只是进行了值传递。局部变量覆盖掉了全局变量,只是局部变量 在 修改。因为在函数的参数内定义的变量并不是全局变量。反例二:
function a(){
var test="aa";
console.log(test);
}
a();
console.log(test);
function a(){
var test="aa";
console.log(test);
}
a();
console.log(test);结果
aa
notdefine
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);
if(1!=1){
var y=c;
}
console.log(y)
if(1==1){
var x=a;
}
console.log(x);结果:
undefine
a
undefine
a可以看到在if代码块定义的两个变量,在if块之外去打印,如果判断成功的话,才会去执行里边的声明语句,声明语句执行了,那么在代码块外边就可访问到了。也可以看出在代码块中声明的变量也是全局变量。2.js中的全局变量都会成为window的属性
var x=0;
console.log(window.x);
var x=0;
console.log(window.x);结果:
0
03.变量提升
var c=0;
function a(){
console.log(c);
}
a();
var c=0;
function a(){
console.log(c);
}
a();结果:
0
0
var c=0;
function a(){
console.log(c);
var c=11;
}
a();
var c=0;
function a(){
console.log(c);
var c=11;
}
a();结果:
undefine
undefine可以看出在函数中加了一行声明语句结果就会不同,这产生这样的原因是什么呢?其实第二个代码块的执行顺序是这样的:
var c=0;
function a(){
var c;
console.log(c);
c=11;
}
a();
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();
var c=10;
function a(){
console.log(c);
if(false) {
var c = 10;
}
}
a();结果:
undefine
undefine因为在if判断中定义了局部变量c,虽然if条件不成立,但是也会进行变量提升,所以打印c也是undefine;4.let变量4.let变量通过上面的例子可以看到用var来定义变量的弊端:1.var定义的变量没有块作用域;2.var定义的全局变量会自动添加全局window对象的属性;3.var变量会提前装载(变量提升);let就是为了解决这些问题而诞生的。
for(let i=0;i<5;i++){
}
console.log(i);
for(let i=0;i<5;i++){
}
console.log(i);结果:
报错
报错在代码块中定义了let变量,在外部引用的时候不会存在。即存在块作用域。
let i=10;
console.log(window.i);
let i=10;
console.log(window.i);结果:
undefine
undefinelet声明的变量并不会成为window的属性。
var c=10;
function a(){
console.log(c);
let c=1;
console.log(c);
}
a();
var c=10;
function a(){
console.log(c);
let c=1;
console.log(c);
}
a();在函数中存在变量与全局变量名相同的c,因此会覆盖掉全局变量c,但是由于let不会提前装载,所以在第一个打印语句打印c时会报错。
var test ="hello";
console.log(test);
function a(){
test="xx";
console.log(test);
}
a();
console.log(test);
var test ="hello";
console.log(test);
function a(){
test="xx";
console.log(test);
}
a();
console.log(test);结果:
hello
xx
xx
hello
xx
xx这种方式通过声明的变量在任何地方都可进行修改和使用。2.在函数中隐士的声明变量2.在函数中隐士的声明变量
function a(){
test=22;
console.log(test);
}
a();
console.log(test);
function a(){
test=22;
console.log(test);
}
a();
console.log(test);结果:
22
22
22
22因为js是弱类型脚本语言,在使用之前无需定义,所以可以通过这种方式也能声明全局变量。来看一个反例:
var test="aa";
console.log(test);
function a(test){
test=22;
console.log(test);
}
a(test);
console.log(test);
var test="aa";
console.log(test);
function a(test){
test=22;
console.log(test);
}
a(test);
console.log(test);结果:
aa
22
aa
aa
22
aa可以看到在函数中修改了test值可是第二次在函数外打印的值没有变。这是因为在函数的过程中只是进行了值传递。局部变量覆盖掉了全局变量,只是局部变量 在 修改。因为在函数的参数内定义的变量并不是全局变量。反例二:
function a(){
var test="aa";
console.log(test);
}
a();
console.log(test);
function a(){
var test="aa";
console.log(test);
}
a();
console.log(test);结果
aa
notdefine
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);
if(1!=1){
var y=c;
}
console.log(y)
if(1==1){
var x=a;
}
console.log(x);结果:
undefine
a
undefine
a可以看到在if代码块定义的两个变量,在if块之外去打印,如果判断成功的话,才会去执行里边的声明语句,声明语句执行了,那么在代码块外边就可访问到了。也可以看出在代码块中声明的变量也是全局变量。2.js中的全局变量都会成为window的属性
var x=0;
console.log(window.x);
var x=0;
console.log(window.x);结果:
0
03.变量提升
var c=0;
function a(){
console.log(c);
}
a();
var c=0;
function a(){
console.log(c);
}
a();结果:
0
0
var c=0;
function a(){
console.log(c);
var c=11;
}
a();
var c=0;
function a(){
console.log(c);
var c=11;
}
a();结果:
undefine
undefine可以看出在函数中加了一行声明语句结果就会不同,这产生这样的原因是什么呢?其实第二个代码块的执行顺序是这样的:
var c=0;
function a(){
var c;
console.log(c);
c=11;
}
a();
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();
var c=10;
function a(){
console.log(c);
if(false) {
var c = 10;
}
}
a();结果:
undefine
undefine因为在if判断中定义了局部变量c,虽然if条件不成立,但是也会进行变量提升,所以打印c也是undefine;4.let变量4.let变量通过上面的例子可以看到用var来定义变量的弊端:1.var定义的变量没有块作用域;2.var定义的全局变量会自动添加全局window对象的属性;3.var变量会提前装载(变量提升);let就是为了解决这些问题而诞生的。
for(let i=0;i<5;i++){
}
console.log(i);
for(let i=0;i<5;i++){
}
console.log(i);结果:
报错
报错在代码块中定义了let变量,在外部引用的时候不会存在。即存在块作用域。
let i=10;
console.log(window.i);
let i=10;
console.log(window.i);结果:
undefine
undefinelet声明的变量并不会成为window的属性。
var c=10;
function a(){
console.log(c);
let c=1;
console.log(c);
}
a();
var c=10;
function a(){
console.log(c);
let c=1;
console.log(c);
}
a();在函数中存在变量与全局变量名相同的c,因此会覆盖掉全局变量c,但是由于let不会提前装载,所以在第一个打印语句打印c时会报错。
相关文章:
- jsvscode中Vue别名路径提示的实现js大全
- jsvue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)js大全
- jsvue props default Array或是Object的正确写法说明js大全
- js代码深入了解JavaScript词法作用域
- js如何用JS模拟实现数组的map方法js大全
- jsvue-cli或vue项目利用HBuilder打包成移动端app操作js大全
- js代码详解JavaScript作用域 闭包
- jsvue 解决setTimeOut和setInterval函数无效报错的问题js大全
- js浅谈vue 组件中的setInterval方法和window的不同js大全
- jsAngular+ionic实现折叠展开效果的示例代码js大全