javascript当中的代码嗅探扩展原生对象和原型(prototype)


Posted in Javascript onJanuary 11, 2013

:翻译之中有什么不恰当的地方,欢迎大家指正,祝大家双节快乐!
如果不是有特殊需要而去扩展原生对象和原型(prototype)的做法是不好的

//不要这样做 
Array.prototype.map = function() { 
// 一些代码 
};

除非这样做是值得的,例如,向一些旧的浏览器中添加一些ECMAScript5中的方法。
在这种情况下,我们一般这样做:
if (!Array.prototype.map) { 
Array.prototype.map = function() { 
//一些代码 
}; 
}

如果我们比较偏执,为了防止别人将map定义为其它意想不到的值,像true或其他,我们可以 将检测代码改为下面这样:
if (typeof Array.prototype.map !== "function") { 
Array.prototype.map = function() { 
// 一些代码 
}; 
}

(尽管这将破坏其它开发者的map定义,并影响他们功能的实现)
但是,在一个充满敌意和残酷竞争的环境下(换句话说,但你提供或者使用一个js库时),你不应该相信任何人。如果其他人的js代码先于你的js代码加载,并且以某种方式定义了一个不完全兼容ES5的map()方法,导致你的代码不能正常运行,该怎么办呢?

不过,你可以相信浏览器,如果Webkit内核实现了map()方法,你可以放心,这个方法肯定会正常运行。否则的话,你就要用你的代码进行检测了。

幸运的是,这在JavaScript当中很容易实现,当你调用原生函数的toString方法的时候,会返回一个函数的字符串,该函数的函数体是[native code]。
例如在Chrome的控制台下:

> Array.prototype.map.toString(); 
"function map() { [native code] }"

一个适当的代码检查向来就是一个稍微令人不快的事,因为不同浏览器对空格和换行处理的太过轻率。测试如下:
Array.prototype.map.toString().replace(/\s/g, '*'); 
// "*function*map()*{*****[native*code]*}*" // IE 
// "function*map()*{*****[native*code]*}" // FF 
// "function*map()*{*[native*code]*}" // Chrome

只简单的去掉\s会得到更实用的字符串:
Array.prototype.map.toString().replace(/\s/g, ''); 
// "functionmap(){[nativecode]}"

你可以将它封装成一个可以重用的shim()函数,这样以来你就没有必要去重复所有的类似!

Array.prototype...这样的操作了。这个函数会接受一个对象作为参数(例如,Array.prototype),一个将要添加的属性(例如 'map')和一个要添加的函数。

function shim(o, prop, fn) { 
var nbody = "function" + prop + "(){[nativecode]}"; 
if (o.hasOwnProperty(prop) && 
o[prop].toString().replace(/\s/g, '') === nbody) { 
//表名是原生的! 
return true; 
} 
//新添加的 
o[prop] = fn; 
}

测试:
//这是原生的方法 
shim( 
Array.prototype, 'map', 
function(){/*...*/} 
); // true 
//这是新添加的方法 
shim( 
Array.prototype, 'mapzer', 
function(){alert(this)} 
); 
[1,2,3].mapzer(); // alerts 1,2,3

(完)^_^
Javascript 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
面试常见的js算法题
Mar 23 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 #Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 #Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 #Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 #Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 #Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 #Javascript
防止文件缓存的js代码
Jan 10 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php中请求url的五种方法总结
2017/07/13 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
简历的自我评价
2014/02/03 职场文书
水毁工程实施方案
2014/04/01 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
商铺消防安全责任书
2014/07/29 职场文书
爬山的活动方案
2014/08/16 职场文书
离职证明标准格式
2014/09/15 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书