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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
js几个验证函数代码
2010/03/25 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python isinstance函数用法详解
2020/02/13 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Python连接mysql方法及常用参数
2020/09/01 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
2014信息公开实施方案
2014/02/22 职场文书
灰雀教学反思
2014/04/28 职场文书
党员检讨书
2014/10/13 职场文书
大四学生个人总结
2015/02/15 职场文书
商务司机岗位职责
2015/04/10 职场文书
答辩状格式范本
2015/05/22 职场文书
初中体育教学随笔
2015/08/15 职场文书
Python中的套接字编程是什么?
2021/06/21 Python