浅析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实现flash8类似的连接效果
May 03 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python实现KNN分类算法
2019/10/16 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python如何实现邮件功能
2020/05/27 Python
python中如何设置代码自动提示
2020/07/15 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
社会学专业学生职业规划书
2014/02/07 职场文书
岗位廉政承诺书
2014/03/27 职场文书
公司委托书范本
2014/04/04 职场文书
专项法律服务方案
2014/06/11 职场文书
党员承诺书范文2015
2015/04/27 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL