从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 相关文章推荐
浅析node.js中close事件
Nov 26 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
web打印小结
Jan 11 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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类
2006/11/25 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python字符串的一些操作方法总结
2019/06/10 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
研究生自荐信
2013/10/09 职场文书
面试后感谢信
2014/02/01 职场文书
教师教学评估方案
2014/05/09 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB