浅析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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
jQuery 动画基础教程
2008/12/25 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js创建数组的简单方法
2016/07/27 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
jQuery validata插件实现方法
2017/06/25 jQuery
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 中的 else详解
2016/04/23 Python
python与C互相调用的方法详解
2017/07/14 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
2015年度优秀员工自荐书
2015/03/06 职场文书
党支部鉴定意见
2015/06/02 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书