javascript当中的代码嗅探扩展原生对象和原型(prototype)
更新时间：2013年01月11日 09:37:27 作者：
如果不是有特殊需要而去扩展原生对象和原型（prototype）的做法是不好的,除非这样做是值得的，例如，向一些旧的浏览器中添加一些ECMAScript5中的方法
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
注：翻译之中有什么不恰当的地方，欢迎大家指正，祝大家双节快乐！
如果不是有特殊需要而去扩展原生对象和原型（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 HTML5 canvas实现打砖块游戏
这篇文章主要介绍了基于javascript HTML5 canvas实现打砖块游戏的具体实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
刚接触微信小程序，对里面的语法和属性还不怎么了解，最近正在努力学习中，下面这篇文章主要给大家介绍了微信小程序中多个页面传参通信的相关资料，是最近学习的一个内容总结，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
echarts-for-weixin是ECharts官方维护的一个开源项目，提供了一个微信小程序组件，可以通过这个组件在微信小程序中使用?ECharts?绘制图表。本文将通过示例详解微信小程序使用ECharts的方法，感兴趣的可以了解一下2022-06-06
mockjs,json-server一起搭建前端通用的数据模拟框架教程
下面小编就为大家分享一篇mockjs,json-server一起搭建前端通用的数据模拟框架教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了js焦点文字滚动效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
最近在写位操作的时候突然想到了这个问题，突然想总结一下，交换变量值的问题可能使我们学习编程语言接触到的比较早的逻辑问题，小伙伴或多或少会两种解决的方法，本文提供了七种解决的方法，下面跟着小编来一起看看吧。2016-12-12
春节将至，相信大家跟小编一样很激动呀。为了迎接虎年春节到来，小编为大家准备了一个虎年春节倒计时，仅20行代码用js就实现啦。感兴趣的可以动手试一试2022-01-01
这篇文章主要为大家详细介绍了微信小程序scroll-view组件实现滚动动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了JavaScript同源策略和跨域访问,结合实例形式较为详细的分析了javascript同源策略与跨域访问的原理、实现、使用方法及相关注意事项,需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了微信小程序实现可长按移动控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
最新评论