脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript扩展原生对象和原型

javascript当中的代码嗅探扩展原生对象和原型(prototype)

 更新时间：2013年01月11日 09:37:27   投稿：whsnow  
如果不是有特殊需要而去扩展原生对象和原型（prototype）的做法是不好的,除非这样做是值得的，例如，向一些旧的浏览器中添加一些ECMAScript5中的方法

注：翻译之中有什么不恰当的地方，欢迎大家指正，祝大家双节快乐！
如果不是有特殊需要而去扩展原生对象和原型（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() {
// 一些代码
};
}

但是，在一个充满敌意和残酷竞争的环境下（换句话说，但你提供或者使用一个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

（完）^_^

相关文章

  • HTML页面滚动时获取离页面顶部的距离2种实现方法

    HTML页面滚动时获取离页面顶部的距离2种实现方法

    获取离滚动页面的顶部距离有两种方法一是DOM；而是jquery，具体的实现如下，感兴趣的朋友可以尝试操作下
    2013-09-09
  • javascript new 需不需要继续使用

    javascript new 需不需要继续使用

    在javascript你不需要使用new Object()，你该使用{}就可以了。
    2009-07-07
  • php中给js数组赋值方法

    php中给js数组赋值方法

    PHP函数库提供了编/解码JSON的函数：json_encode()和json_decode()，可以比较方便的传递数组或对象给javascript
    2014-03-03
  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    这篇文章主要介绍了用html+css+js实现的一个简单的图片切换特效,需要的朋友可以参考下
    2014-05-05
  • js实现弹窗效果

    js实现弹窗效果

    这篇文章主要为大家详细介绍了js实现弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js与jQuery实现checkbox复选框全选/全不选的方法

    js与jQuery实现checkbox复选框全选/全不选的方法

    这篇文章主要介绍了js与jQuery实现checkbox复选框全选/全不选的方法,结合实例较为详细的分析了JavaScript与jQuery针对checkbox复选框全选与反选的操作技巧,需要的朋友可以参考下
    2016-01-01
  • echarts安装与配置

    echarts安装与配置

    这篇文章介绍了echarts安装与配置的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • promise封装wx.request的方法

    promise封装wx.request的方法

    这篇文章主要介绍了promise封装wx.request的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-05-05
  • JS的replace方法

    JS的replace方法

    在javascript中，String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力，这里简单介绍下，方便需要的朋友
    2013-12-12
  • JavaScript设计模式之原型模式(Object.create与prototype)介绍

    JavaScript设计模式之原型模式(Object.create与prototype)介绍

    这篇文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下
    2014-12-12

最新评论