浅析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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
JQuery触发事件例如click
Sep 11 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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 获取远程网页内容的函数
2009/09/08 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
细说webpack6 Babel的使用详解
2019/09/26 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
详解Python多线程
2016/11/14 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
详解Python中的文件操作
2021/01/14 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
论文诚信承诺书
2014/05/23 职场文书
文明单位申报材料
2014/12/23 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
电话营销开场白
2015/05/29 职场文书
行政处罚听证告知书
2015/07/01 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js