从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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
js函数和this用法实例分析
Mar 13 Javascript
详解Vue之事件处理
Jul 10 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
python封装对象实现时间效果
2020/04/23 Python
python strip()函数 介绍
2013/05/24 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
ORACLE第二个十问
2013/12/14 面试题
管理科学大学生求职信
2013/11/13 职场文书
职工趣味运动会方案
2014/02/10 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
禁烟标语大全
2014/06/11 职场文书
股东授权委托书范本
2014/09/13 职场文书
python 模块重载的五种方法
2021/04/24 Python