文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 19:17:45
原创
1867人浏览过

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

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

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

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

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

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

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

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

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

    将显示100，而

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

    也是显示100。

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

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

script language="javascript">
    var _open = window.open;
    window.open = function() {}
script>
    这样就可以屏蔽掉不是加在页面第一行上的弹出窗口广告(加在第一行不能拦截，因为window.open还没有被'重载'open就先执行了)。
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：使用onbeforeunload属性后的副作用_javascript技巧 下一篇：HTML中不支持静态Expando的元素的问题_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JS中的事件委托是什么？如何实现？ 事件委托是利用JS事件冒泡机制，将子元素的事件监听委托给父元素处理。其核心原理是通过在父元素上绑定一个事件监听器，统一管理所有子元素的事件触发，从而减少监听器数量，提升性能，尤其适用于动态内容或大量子元素的情况。例如：一个包含几十个按钮的列表，若每个按钮都单独绑定事件，会增加内存消耗，但通过将事件绑定到父容器（如），可显著优化资源使用。实现步骤包括：1.找到父级元素并绑定事件；2.在回调函数中通过event.target获取实际触发事件的子元素；3.根据目标元素的属性判断是否执行对应操作。以点击
2025-06-10 18:06:02
714
JS中的map方法怎么用？有什么作用？ JavaScript中的map方法用于对数组每个元素进行处理并返回新数组。map是数组方法，通过传入函数处理每个元素，返回新数组，原数组不变，例如numbers.map(n=>n*2)返回新数组。常见用途包括：1.数据转换，如提取对象字段；2.不推荐直接调用异步函数，应结合Promise.all使用；3.React中配合JSX渲染列表。注意点有：不修改原数组、不能中途break、别滥用做副作用、必须返回值构建新数组。掌握map能提升代码简洁性和可读性。
2025-06-10 15:24:06
143
JS中的typeof能检测哪些类型？如何使用？ typeof操作符在JavaScript中用于检测变量的数据类型，它能识别的基本类型包括：1."number"、2."string"、3."boolean"、4."undefined"、5."object"（含null）、6."function"、7."symbol"、8."bigint"；但需要注意typeofnull返回"object"是历史问题，并不代表null是对象；判断数组应使用Array.isArray()，更复杂的对象类型建议用Object.prototype.toString.c
2025-06-10 14:39:01
609
JS中的encodeURI和encodeURIComponent有什么区别？ encodeURI用于编码完整URL，保留结构字符如:、/、?等，适合拼接整个地址时使用；encodeURIComponent用于编码URL参数值，会对=、&、#等特殊字符进行彻底编码，适合动态拼接参数内容。两者核心区别在于使用范围不同：encodeURI处理整体结构安全，encodeURIComponent确保参数值不会干扰解析。例如传递带特殊字符的参数时必须用encodeURIComponent，否则可能导致参数截断或解析错误。正确做法是拼接前对每个参数单独编码。
2025-06-10 13:33:01
616
JS中的localStorage怎么用？能存什么？ localStorage是JS中用于持久化存储字符串数据的工具，即使页面刷新或浏览器关闭也不会丢失。它仅支持字符串类型，存储对象或数组时需先用JSON.stringify()转换，读取时用JSON.parse()还原。1.存数据用setItem(key,value)；2.取数据用getItem(key)；3.删数据用removeItem(key)；4.清空用clear()；5.查看key用key(index)。适合存用户偏好、静态缓存等非敏感信息，不适合频繁修改或敏感数据。使用时需注意：必须手动
2025-06-09 22:54:05
534
JS中的闭包是什么？如何实现？ 闭包是指函数能够访问并记住其词法作用域，即使在其作用域外执行。1.闭包通过嵌套函数引用外部函数变量实现；2.常见实现方式包括函数返回函数或将函数作为参数传递；3.实际用途有封装私有变量、数据缓存、柯里化函数和事件回调；4.使用时需注意内存占用、调试困难和性能影响等问题，应合理控制生命周期以避免资源浪费。
2025-06-09 21:57:01
365
JS中的let和var有什么区别？怎么用？ 在JavaScript中，let和var的主要区别在于作用域、变量提升和重复声明。1.let是块级作用域，而var是函数作用域；例如，在if块中用let声明的变量无法在外部访问，var则可以。2.var存在变量提升，即变量可在声明前访问但值为undefined，而let不会提升，提前访问会报错。3.var允许重复声明变量，而let在同一作用域下不可重复声明。4.推荐优先使用let，因其更安全且符合现代编程习惯，var一般用于旧项目或需要函数作用域的场景，如for循环中使用let可避免闭包问题。
2025-06-09 20:54:01
397
JS中的WeakMap和WeakSet有什么用？ WeakMap和WeakSet的主要作用是存储弱引用对象，避免内存泄漏。当对象仅被WeakMap或WeakSet引用时，仍可被垃圾回收机制回收，而Map和Set的引用会阻止对象被回收。例如，将对象设为null后，若仅被WeakMap引用，则该对象可被回收。适用WeakMap的场景包括：1.存储私有数据或元数据，如记录DOM元素状态而不污染属性；2.缓存对象相关数据，如组件状态或计算结果，对象销毁后缓存自动释放；3.观察或监听对象行为，判断对象是否仍在使用中。WeakSet适用于：1.标记对象是否
2025-06-09 18:36:02
745
JS中的Object.assign有什么用？怎么用？ Object.assign是JavaScript中用于复制对象属性的方法，其核心作用是将一个或多个源对象的可枚举属性复制到目标对象中并返回。1.基本用法是合并对象，语法为Object.assign(target,...sources)，若属性名重复，后面的源对象属性会覆盖前面的；2.它执行的是浅拷贝，并不复制嵌套对象的内部结构，仅复制引用地址，因此修改副本会影响原对象；3.常见应用场景包括React状态更新与配置项合并，确保原有对象部分更新而非完全替换；4.展开运算符（...）是其替代方案之一，
2025-06-09 17:51:01
147
JavaScript中的reduce方法怎么用？ JavaScript中的reduce方法是一个强大工具，用于将数组元素通过累加器函数处理成单一值。其用法包括：1.求和，如constsum=numbers.reduce((acc,val)=>acc+val,0);2.扁平化数组，如constflattened=nestedArray.reduce((acc,val)=>acc.concat(Array.isArray(val)?val.reduce((a,v)=>a.concat(v),[]):val),[]);使用时需注意提供初始值以避免处理
2025-06-09 17:06:04
537
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部