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 相关文章推荐
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
关于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输出时间格式
2013/08/31 PHP
session 加入redis的实现代码
2016/07/15 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
JS hashMap实例详解
2016/05/26 Javascript
javascript基础知识
2016/06/07 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python计算方程式根的方法
2015/05/07 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python中的print()输出
2019/04/12 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
公司道歉信范文
2014/01/09 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书