JavaScript之作用域
博客专区 > liu_yong 的博客 > 博客详情
JavaScript之作用域
liu_yong 发表于1年前
JavaScript之作用域
  • 发表于 1年前
  • 阅读 8
  • 收藏 1
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 几乎所有的编程语言都有作用域的概念,而且理解该门语言作用域是掌握这门语言的必经之路。如果你要访问某个变量或函数,作用域则决定了你能否访问到,换句话说作用域控制着变量与函数的可见性和生命周期。

     几乎所有的编程语言都有作用域的概念,而且理解该门语言作用域是掌握这门语言的必经之路。如果你要访问某个变量或函数,作用域则决定了你能否访问到,换句话说作用域控制着变量与函数的可见性和生命周期。

    记得刚刚学js的时候(其实当时压根没怎么学js,按照对Java的理解就直接开始用了),对于js的作用域这块完全是按照Java的作用域来理解的,结果就这样写点简单的js倒也没有太大的问题,但是后来业务越来越复杂,需要写的js也越来越复杂,就发现js的作用域和Java的不一样呢!(对于Java和JavaScript之间的关系还有疑问的同学,只需要记住这两种语言的共同点就是名字都含有Java就是了。)那么js的作用域是怎么的样呢?下面我们就说道说道。

    在js里面,以函数来分隔作用域,又称函数作用域: 作用域在函数内修改。 如:

function scopeFunc(){
	for(var i=0;i<5;i++){
		//console.log(i);
	}
	console.log(i);
}
scopeFunc();//5
//如果js有块级作用域,那么在for循环外应该是取不到i的值的,应该报错,但是我们照样取到了i的值;这里的i是局部变量

function scopeFunc2(){
	for(let i=0;i<5;i++){
		//console.log(i);
	}
	console.log(i);
}
scopeFunc2();//i is not defined
//在ES6(ES2015)之前,我们看到js是没有块级作用域的,但是ES6新有的定义变量的let关键字,可以定义块级作用域

function Student(name){
	console.log(name);//ly
	var score;
	console.log(score);//undefined
	console.log(age);//ReferenceError: age is not defined
}
Student('ly');
console.log(name);//undefined;函数参数只在函数内起作用,是局部变量。
//我们看到在函数内使用一个定义了但是未赋值的变量的时候,提示undefined,使用一个未定义的变量时提示出错了。

//scopeFunc是函数的句柄,在js中,对象和函数同样也是变量,此处,scopeFunc是全局函数,也是全局变量了
setTimeout(scopeFunc,500);
//setTimeout这里用的是函数的句柄,如果写成setTimeout(scopeFunc(),500);会造成内存泄露

/*
最外层函数和在最外层函数外面定义的变量拥有全局作用域,所以声明全局变量比较简单,不过有种特殊的情况,在函数内,
如果不使用var声明,直接给变量赋值,这个变量直接就拥有全局作用域
*/
function wholeScopeFn(){
	testw='imwhole';//如果不使用var声明变量,此处就相当于是window.testw='imwhole';
	var testpart='impart';
	console.log(testpart);
}
console.log(testw);//ReferenceError: testw is not defined 
wholeScopeFn();//impart
console.log(testw);//imwhole
/*
全局变量我们都可以通过window.变量名 的方式来获取,但是当使用var声明一个全局变量时,
创建的这个属性是不可配置的,也就是说无法通过delete运算符删除,不使用var声明的全局变量,可以通过delete删除
*/

//函数运行在它们被定义的作用域里,而不是它们被执行的作用域里
function Student(name){
	console.log(name);//ly
	var score;
	console.log(score);//undefined
	console.log(age);//ReferenceError: age is not defined
}
function myCare(){
	var age=10;
	Student('ly');
}
myCare();
//我们看到,myCare函数内已经声明并初始化了一个变量age,而在Student函数内,在执行到打印age变量的时候任然提示为定义

    总结一下就是变量在函数外定义,就是全局变量。 变量在函数内声明,就是局部变量, 只能在函数内部访问。

    说了变量的作用范围,还得说说变量的生命周期。生命周期意味着你用了当前变量之后下次用的时候他得是个什么。简单的说,变量在他还能被用到的时候就不会被销毁,不能再被用到的时候就该销毁了,生命也就走到尽头了。如:

function scopeLife(){
	var sl=0;
	console.log(++sl);
}
var wsl=0;
scopeLife();//1
scopeLife();//1
scopeLife();//1 ;局部变量在函数执行完毕后销毁。
console.log(++wsl);//1
console.log(++wsl);//2
console.log(++wsl);//3 ;全局变量在页面关闭后销毁。

    好的,我们再来看看和作用域有关的一个有趣的地方,变量声明提升。

var name='ly';
function Student(){
	console.log(name);//undefined
	var name='liuyong';
	console.log(name);//liuyong
}
//上面的代码可以写成如下
var name='ly';
function Student(){
        var name;
	console.log(name);//undefined
	name='liuyong';
	console.log(name);//liuyong
}
//这样是不是好理解得多了,当执行函数的时候,会先函数内的变量的声明。

//如果函数内不写var直接定义全局变量,这样的变量是不会被提升的
function Student(){
	console.log(name);
	name='liuyong';
	console.log(name);//liuyong
}
Student();

    说到js作用域,如果不说作用域链,会不会显得太低端了呢?哈哈,可以看下这两篇文章(JavaScript作用域链详细介绍JavaScript 开发进阶:理解 JavaScript 作用域和作用域链),个人觉得作用域链这块,这两篇文章讲得挺不错的。有什么问题也欢迎交流。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 21
码字总数 30353
×
liu_yong
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: