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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
js实现图片实时时钟
Jan 15 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
浅析JavaScript中的变量提升
Jun 01 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP中使用curl入门教程
2015/07/02 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
用javascript实现自定义标签
2007/05/08 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
pycharm安装和首次使用教程
2018/08/27 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python中if有多个条件处理方法
2020/02/26 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
财务会计自荐信范文
2014/02/21 职场文书
公证委托书标准格式
2014/09/11 职场文书
mysql全面解析json/数组
2022/07/07 MySQL