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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
javascript实现简易计算器
Feb 01 Javascript
js如何获取网页所有图片
May 12 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
5 cool javascript apps
2007/03/24 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python查询sqlite数据表的方法
2015/05/08 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
会计学自荐信
2014/06/03 职场文书
幸福来敲门观后感
2015/06/04 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
教你利用python实现企业微信发送消息
2021/05/23 Python