从JavaScript的函数重名看其初始化方式


Posted in Javascript onMarch 08, 2007

今天有个哥们问我要是JavaScript函数重名了会有什么后果?开始我没有细想,就说可能会出错吧,可是等我实验完了发现页面没有任何脚本错误提示,而且程序也运行了,只是对同名函数的调用执行了位置靠后的一个。

    回头仔细一想,这个结果完全可以接受,因为脚本在页面里本身就是顺序执行下来的,包括函数的定义,但然如果只是定义 function foo(){} 这种形式,我们是跟踪不到函数初始化的。可是如果是定义类的方式,我们就可以明显地跟踪到函数的初始化顺序。比如:

从JavaScript的函数重名看其初始化方式function foo() {}
从JavaScript的函数重名看其初始化方式
function foo.prototype.fn1() {}
从JavaScript的函数重名看其初始化方式
function foo.prototype.fn2() {}

    我们就可以明显地看到先执行function foo.prototype.fn1(){}再执行function foo.prototype.fn2(){}。

    回到我们刚才说的JavaScript脚本函数重名问题上来,比如我们定义两个函数 funAlert():

从JavaScript的函数重名看其初始化方式function funAlert()
从JavaScript的函数重名看其初始化方式{
从JavaScript的函数重名看其初始化方式    alert('A');
从JavaScript的函数重名看其初始化方式}
从JavaScript的函数重名看其初始化方式
从JavaScript的函数重名看其初始化方式
function funAlert()
从JavaScript的函数重名看其初始化方式{
从JavaScript的函数重名看其初始化方式    alert('B');
从JavaScript的函数重名看其初始化方式}

    调用 funAlert(),那么将显示一个MegBox,内容为'B'。

    为什么初始化函数会有这样的效果?这里只用把上面两个函数的定义改一下,就会一目了然了,我们把定义改为:

从JavaScript的函数重名看其初始化方式var fnAlert = new Function("alert('A')");
从JavaScript的函数重名看其初始化方式
var fnAlert = new Function("alert('B')");
从JavaScript的函数重名看其初始化方式
从JavaScript的函数重名看其初始化方式window.fnAlert();
    其函数也就是定义在对象上的一个函数指针,我们象这个指针赋什么函数引用,它就执行什么效果,而JavaScript中的脚本函数重名就和普通赋值语句一样,等同于:
从JavaScript的函数重名看其初始化方式var i = 0;
从JavaScript的函数重名看其初始化方式
var i = 1;
    // 稍微注意以下JavaScript里的var,用var定义变量和我们平时用的高级语言定义变量是不同的,它只起到一个提示的作用,提醒说我在这里定义变量了,而没有什么变量作用域的概念,只要不离开定义它的对象的域(比如页面刷新),出现过的变量会就一直存在。所以var写不写都行。举个例子:
从JavaScript的函数重名看其初始化方式if ( true )
从JavaScript的函数重名看其初始化方式{
从JavaScript的函数重名看其初始化方式   t 
= 100;
从JavaScript的函数重名看其初始化方式}
从JavaScript的函数重名看其初始化方式alert(t);

    将显示100,而

从JavaScript的函数重名看其初始化方式if ( true )
从JavaScript的函数重名看其初始化方式{
从JavaScript的函数重名看其初始化方式    
var t = 100;
从JavaScript的函数重名看其初始化方式}
从JavaScript的函数重名看其初始化方式alert(t);

    也是显示100。

    所以JavaScript的脚本函数名重不重复只是一个运算的问题,和我们高级语言里的语法约束完全不是一回事,当然也更不是overload的范畴。

    脚本函数名重名有什么用呢?最直观就是可以用来实现伪重载,比如我们不少免费的主页空间常常会给你强加弹出窗口广告,我们就可以在页面第一行写上:

<script language="javascript">
    var _open = window.open;
    window.open 
= function() {}
</script>
    这样就可以屏蔽掉不是加在页面第一行上的弹出窗口广告(加在第一行不能拦截,因为window.open还没有被'重载'open就先执行了)。
Javascript 相关文章推荐
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
翻译整理的jQuery使用查询手册
Mar 07 #Javascript
用window.location.href实现刷新另个框架页面
Mar 07 #Javascript
javascript中的location用法简单介绍
Mar 07 #Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 #Javascript
动态控制Table的js代码
Mar 07 #Javascript
js+FSO遍历文件夹下文件并显示
Mar 07 #Javascript
学习js所必须要知道的一些
Mar 07 #Javascript
You might like
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php二维码生成以及下载实现
2017/09/28 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python实现最长公共子序列
2018/05/22 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
高三英语复习计划
2015/01/19 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
如何写通讯稿
2015/07/22 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
PyTorch中permute的使用方法
2022/04/26 Python