浅析JavaScript中的同名标识符优先级


Posted in Javascript onDecember 06, 2013

一,局部变量先使用后声明,不影响外部同名变量

var x = 1; // --> 外部变量x 
function fn(){ 
    alert(x);  // --> undefined 局部变量x先使用 
    var x = 2; // 后声明且赋值 
} 
fn(); 
alert(x); // --> 1<BR>

第一点,函数fn内第一句输出x,x是在第二句才定义的。这在JS中是允许的,这里的允许是指不会出现语法错误程序可以运行。

但在其它语言如C,Java中却是不允许的。变量必须先声明后使用,如

public class Test { 
    public static void main(String[] args) { 
        System.out.println(x); // 先使用 
        int x = 10; // 后声明 
    } 
}

Java中编译器会提示错误,程序无法运行。

第二点,函数fn内的局部变量x不会影响到外部的变量x。即fn内alert输出不是1,而是undefined。

二,形参优先级高于函数名

function fn(fn){ 
    alert(fn); 
} 
fn('hello'); // --> "hello"

可以看到函数名和形参同名都是fn,输出的是字符串"hello",却不是函数fn的函数体(fn.toString())。

三,形参优先级高于arguments

function fn(arguments){ 
    alert(arguments); 
} 
fn('hello'); // --> "hello"<BR>

arguments对象可以直接在函数内使用,是语言本身提供的一个 特殊标识符 。

这里刚好将形参声明成与其同名。输出可以看到是"hello"而非"[object Object]",即形参arguments覆盖了语言本身提供的真正的arguments。

四,形参优先级高于只声明却未赋值的局部变量

function fn(a){ 
    var a; 
    alert(a); 
} 
fn('hello'); // --> "hello"

函数fn形参为a,函数内第一句仅声明局部变量a,却并未赋值。从输出结果是"hello"而非undefined可以看出形参a优先级高于仅声明却未赋值的局部变量a。

五,声明且赋值的局部变量优先级高于形参

function fn(a){ 
    var a = 1; 
    alert(a); 
} 
fn('hello'); // --> "1"

函数fn形参为a,函数内第一句仅声明局部变量a,赋值为1。从输出结果是"1"而非"hello"可以看出声明且赋值的局部变量a优先级高于形参a。

六,形参赋值给同名局部变量时

function fn(a){ 
    var a = a; 
    alert(a); 
} 
fn('hello');

暂不运行,猜测下结果。如果按照第五点:声明且赋值的局部变量优先级高于形参。那么a将是undefined。但实际上a是"hello",即右a是形参a,左a才是局部变量a。

浅析JavaScript中的同名标识符优先级

这里的两个a互不干扰,谁也没覆盖谁。这与刚刚说的赋值的局部变量优先级高于形参又矛盾了。但引擎这样做的确是我们想要的,因为并不希望var a = a后a是undefined。

Javascript 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
json的使用小结
Jun 08 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
node+vue实现文件上传功能
May 28 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 #Javascript
随鼠标上下滚动的jquery代码
Dec 05 #Javascript
js简单实现删除记录时的提示效果
Dec 05 #Javascript
Jquery 切换不同图片示例代码
Dec 05 #Javascript
jquery 快速回到页首的方法
Dec 05 #Javascript
JS验证邮箱格式是否正确的代码
Dec 05 #Javascript
javascript eval(func())使用示例
Dec 05 #Javascript
You might like
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python 函数返回值的示例代码
2019/03/11 Python
Django models.py应用实现过程详解
2019/07/29 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
Python 使用office365邮箱的示例
2020/10/29 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
女方回门宴答谢词
2014/01/14 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
和谐社区口号
2014/06/19 职场文书
现实表现材料范文
2014/12/23 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android