再探JavaScript作用域

 更新时间:2014年09月24日 09:01:14   投稿:junjie  
这篇文章主要介绍了再探JavaScript作用域,本文用简洁的语言和直观的测试结果图片给大家讲解JavaScript的作用域,需要的朋友可以参考下

黄金守则第一条:

js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到。

first try:

这是为什么呢??

var a = 10;
function aaa(){//step-4
	alert(a);//step-5->执行alert,此时只能找到外面的a=10故弹框10
}
function bbb(){//step-2
	var a = 20;
	aaa();//step-3
}
//定义了函数没啥用,调用才是真格的所以这里是step-1
bbb();//step-1

其实原理大家都懂,应该就是易错而已,万变不离其综。

second try:

这是为什么呢? 因为给a赋值b的时候,b还没有定义,所以a是undefined,b是10.

黄金守则第二条:

变量的查找是就近原则,去寻找var定义的变量,当就近没有找到的时候就去查找外层。

look:

这是为什么呢、? 这里面有两个原因,一是预解析,二是就近查找。

var a=10;
function aaa(){
	alert(a);//undefined,查找a的时候会现在函数内查找,由于预解析的作用,此时的a是undefined,因此永远不会去查找外面的10了
	var a = 20;

	/*预解析
	var a
	alert(a);
	var a = 20;*/

}
aaa();

attention:

这个吧,就验证了第二条,虽然是就近原则,但是是就近找var声明的变量,这个是因为没有var声明的变量是全局的,这里只是修改了a的值。所以上面就是因为在函数内没找到var的a,于是到外面去找了,一找就找到了,于是a就alert出10了;不过没错的是a=20后,a确实为20了,只不过alert的时候还没有执行到那~~

看吧~

下面这个例子,更加验证了js的函数作用域 而已:

这是因为在alert(a)的时候,bbb函数中的a确实为20 ,可是它对于这时的alert(a)这句话来说是局部的,alert(a)根本找不到bbb函数中的a,所以在aaa函数中它找不到a,于是乎去外面找,一找,就找到了10。

黄金守则第三条:

当参数跟局部变量重名时,优先级是等同的。

例:

还有:传参时,基本类型传值,引用类型传引用。(但是重新赋值之后就不是这样了喔)

var a = 5;
var b = a;
b +=3;
alert(a);//5

var a = [1,2,3];
var b=a;
b.push(4);
alert(a);//[1,2,3,4];

上面代码没有问题,但是下面就不一样啦。

因为b被重新赋值了,不指向a了。

此外,参数与变量的作用域是相似的:

对比上下这两个:

上面是参数是基本类型,只传了值进去,下面的传个引用类型:(同样也包含重新赋值的情况)

相关文章

  • uni-app自定义组件components导入失败或页面不显示文本等解决方法

    uni-app自定义组件components导入失败或页面不显示文本等解决方法

    这篇文章主要给大家介绍了关于uni-app自定义组件components导入失败或页面不显示文本等的解决方法,众所周知Uni-app支持使用自定义组件,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • javascript数组里的27个方法总合详解

    javascript数组里的27个方法总合详解

    这篇文章主要为大家详细介绍了javascript数组里的方法27个总合,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • Javascript & DHTML 实例编程(教程)DOM基础和基本API

    Javascript & DHTML 实例编程(教程)DOM基础和基本API

    Javascript & DHTML 实例编程(教程)DOM基础和基本API...
    2007-06-06
  • 深入理解JavaScript中的对象复制(Object Clone)

    深入理解JavaScript中的对象复制(Object Clone)

    下面小编就为大家带来一篇深入理解JavaScript中的对象复制(Object Clone)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • Javascript基础知识详解

    Javascript基础知识详解

    本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学。本文将讲述几点对于初学者遇到的javascript的坑,相信对javascript基础薄弱的同学,可以加深对javascript的理解
    2021-10-10
  • JavaScript中函数的常用写法及调用方法

    JavaScript中函数的常用写法及调用方法

    这篇文章介绍了JavaScript中函数的常用写法及调用方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 深入理解JavaScript系列(48):对象创建模式(下篇)

    深入理解JavaScript系列(48):对象创建模式(下篇)

    这篇文章主要介绍了深入理解JavaScript系列(48):对象创建模式(下篇),本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码,需要的朋友可以参考下
    2015-03-03
  • Array对象方法参考

    Array对象方法参考

    Array对象方法参考...
    2006-10-10
  • Javascript基础教程之变量

    Javascript基础教程之变量

    大家都知道javascript是可以隐式声名变量的。但要注意,隐式声名变量总是被创建为全局变量。看以下代码,情愿javascript语言强制声明变量。建议大家一定要var声明变量。
    2015-01-01
  • Javascript之BOM(window对象)详解

    Javascript之BOM(window对象)详解

    下面小编就为大家带来一篇Javascript之BOM(window对象)详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论