从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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
jQuery live
May 15 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
翻译整理的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的分页功能
2007/03/21 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python模拟百度登录实例详解
2016/01/20 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python绘制封闭多边形教程
2020/02/18 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
ddl,dml和dcl的含义
2016/05/08 面试题
大学学习个人的自我评价
2014/02/18 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书