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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
关于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动态图像的创建
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
twig里使用js变量的方法
2016/02/05 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
Js获取事件对象代码
2010/08/05 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
webpack4简单入门实例
2018/09/06 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
python爬取网易云音乐评论
2018/11/16 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
商铺租赁意向书
2014/04/01 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
通知范文怎么写
2015/04/16 职场文书
开学典礼观后感
2015/06/15 职场文书
校园之声广播稿
2015/08/18 职场文书