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 获得选中文本内容的方法
Feb 15 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python实现录音小程序
2020/10/26 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
毕业证丢失证明
2014/01/15 职场文书
运动会广播稿200米
2014/01/27 职场文书
元旦晚会感言
2014/03/12 职场文书
汇源肾宝广告词
2014/03/20 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
法制工作总结2015
2015/07/23 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python