JS中的变量作用域-阿里云开发者社区

开发者社区> 青衫无名> 正文

JS中的变量作用域

简介:
+关注继续查看

作用域说明:指一个变量的作用范围

1.全局作用域

(1) 全局作用域在页面打开时被创建,页面关闭时被销毁
(2) 编写在script标签中的变量和函数,作用域为全局,在页面的任意位置都可以访问到
(3) 在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接调用

(4) 全局作用域中声明的变量和函数会作为window对象的属性和方法保存


var a = 10;
b = 20;
function an(){
console.log('an')
}
var bn = function(){
console.log('bn')
}
console.log(window)

如图,变量a,b和函数an,bn都保存在window对象上


(5) window对象的属性和方法可以直接调用,如window.an() 可以写为 an()

2.函数作用域:

(1) 调用函数时,函数作用域被创建,函数执行完毕,函数作用域被销毁


function an(){
    var s = 'an'
    console.log(s);
}
//an();

此时函数an并没有执行,作用域没有创建,当函数执行时,作用域创建,输出结果an

an();


(2) 每调用一次函数就会创建一个新的函数作用域,他们之间是相互独立的

(3) 在函数作用域中可以访问到全局作用域的变量,在函数外无法访问到函数作用域内的变量


function an(){
var s = 'an'
console.log(s);
}
an();
console.log(s); // 此时,程序会从当前作用域和上级作用域及以上作用域中寻找变量s,并不会去下级作用域中寻找


(4) 在函数作用域中访问变量、函数时,会先在自身作用域中寻找,若没有找到,则会到函数的上一级作用域中寻找,一直到全局作用域

(5) 在函数作用域中也有声明提前的特性,对于变量和函数都起作用,此时函数作用域相当于一个小的全局作用域,详细声明提前请看声明提前部分


an();
bn();
function an(){
    var s = 'an'
    console.log(s);
}
var bn = function(){
    console.log('bn')
}

下图就结果中,an()可以正常执行,函数an()提升并创建了,函数bn的变量名提升了,但是为赋值,此时bn不是函数

(6) 在函数作用域中,不使用变量关键字声明的变量,在赋值时会往上一级作用域寻找已经声明的同名变量,直到全局作用域时还没找到,则会成为window的属性


an(); // 输出结果 bn
function an(){
var b = 'bn';
function bn(){
console.log(b);
b = 'bn2'; // b会往上一级寻找已经声明的同名变量,并赋值,直到全局作用域时还没找到,则会成为window的属性
}
bn();
console.log(b); // 输出 bn2
}

(7) 在函数中定义形参,等同于声明变量


function an(name){
console.log(name); // 输出 undefined
}
an();

等同于


function an(){
var name
console.log(name); // 输出 undefined
}
an();

原文发布时间:2018年06月30日

本文来源CSDN博客如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
AngularJs-变量
Angularjs-变量 名字 : Hello {{name}} ...
671 0
JS学习系列 06 - 变量对象
上一节我们讨论了执行上下文,那么在上下文中到底有什么内容,为什么它会和作用域链扯上关系,JS 解释器又是怎么找到我们声明的函数和变量,看完这一节,相信大家就不会再迷惑了。变量对象就是执行上下文和作用域链中间的桥梁。
1052 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13891 0
JS闭包以及作用域初探
    以前看到的一个问题,很有意思: for (var i = 0; i < 5; i++) { setTimeout(function () { console.
691 0
thymeleaf 传递数据到js变量
thymeleaf 传递数据到js变量 如何把控制器传来的model中的值传递给js变量呢? 需要以下两个: var message = [[${message}]] 1.
2861 0
JavaScript之作用域与变量
在javascript中声明变量时,我们经常使用的是 var 变量名=value; 例如: var =100; 可是你也许没有注意到这种声明变量的方式产生的变量是一个局部变量,而不是全局变量。
488 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载