浅析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 CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
如何判断元素是否为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脚本的10个技巧(4)
2006/10/09 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP中soap的用法实例
2014/10/24 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
python 安装impala包步骤
2020/03/28 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
同学聚会邀请函
2015/01/30 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
教师理论学习心得体会
2016/01/21 职场文书