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 Timing
Apr 21 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
vue实现页面切换滑动效果
Jun 29 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
jquery中radio checked问题
2015/03/16 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
岗位职责定义及内容
2013/11/08 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
企业金融服务方案
2014/06/03 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
关于环保的广播稿
2015/12/17 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js