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 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
js对象的比较
2011/02/26 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
数控个人求职信范文
2014/02/03 职场文书
成语的广告词
2014/03/19 职场文书
明信片寄语大全
2014/04/08 职场文书
研发工程师岗位职责
2014/04/28 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
办公室规章制度范本
2015/08/04 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python