浅析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 相关文章推荐
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
小程序如何构建骨架屏
2019/05/29 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
.NET笔试题(20个问题)
2016/02/02 面试题
介绍一下常见的木马种类
2014/11/15 面试题
创业大赛策划书
2014/03/01 职场文书
小学庆六一活动总结
2014/08/28 职场文书
财务管理专业自荐书
2014/09/02 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
复兴之路展览观后感
2015/06/02 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书