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 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
layui动态表头的实现代码
Aug 22 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
关于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 foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
幼儿园小班教学反思
2014/02/02 职场文书
事业单位考核材料
2014/05/21 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
银行资信证明
2015/06/17 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android