JS判定是否原生方法

浏览器的趋势是加入越来越多对象，像Worker，同时也为旧有的对象添加新方法。如何兼容它的第一步就是检测它们是否存在，没有则补上自己的兼容代码。这时问题就来了，有的类库是给你做了这一步，但有时没有，有时是做了，但并不符合标准。因此单纯是typeof Array.prototype.map === "function"可能不够用。这时isNative方法就要登场了。
我一直用的版本，自己写的：


代码如下:

var isNative = function(method){//判定是否为原生方法 
      return !! method && (/{s*[native code]s*}/.test(method+"") || 
          /{s*/* source code not available */s*}/.test(method+""));//这里是为了兼容opera9.x的 
  }

但世界这么大，肯定也有研究过这问题，下面是Diego Perini的版本，指出safari对原生方法的toString值其实也是个不合群的：


代码如下:

var isNative = function(object, method) { 
    return object && method in object && 
      typeof object[method] != string && 
      // IE & W3C browser return "[native code]" 
      // Safari < = 2.0.4 will return "[function]" 
      (/{s*[native code]s*}|^[function]$/).test(object[method]); 
  }

它比我的版本多一个参数，能指定是那个原生对象的方法，但一个参数与两个参数是没关系的，结果只是表明，我们俩离完美还有段距离。即使这两个函数取并集，可能还不是正确的全集。
当然这不是[native code]或者 source code not available还是[function]的问题，因为要javascript中，很容易山寨各种方法与对象。如，下面的代码就可以成功骗过检测代码。


代码如下:

window.test = { 
  toString: function() { 
    return [function]; 
  } 
};

isNative(window, test); // true
最后我从nwmathers中找到这个：


代码如下:

var isNative = (function() { 
   var s = (window.open + ).replace(/open/g, ); 
   return function(object, method) { 
     var m = object ? object[method] : false, r = new RegExp(method, g); 
     return !!(m && typeof m != string && s === (m + ).replace(r, )); 
   }; 
 })();

赞 (0)

相关推荐

  • 原生js实现给指定元素的后面追加内容

    复制代码 代码如下: var header1 = document.getElementById("header"); var p = document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法 function insertAfter( newElement, targetElement ){ // newElement是要

  • 原生js实现shift/ctrl/alt按键的获取

    复制代码 代码如下: document.onclick = function(e){ alert(getKey(e)); }; function getKey(e){ var e = e || window.event; var keys = []; if(e.shiftKey){ keys.push("shift键"); }; if(e.ctrlKey){ keys.push("ctrl键"); }; if(e.altKey){ keys.push("a

  • 原生js写的放大镜效果

    原生js写的放大镜效果

    我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me

  • 原生js实现跨浏览器获取鼠标按键的值

    复制代码 代码如下: document.onmousedown = function( e ){ alert(getButton(e)) // e.button W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键 而IE浏览器则是 1表示左键 4表示中间 2表示右键 这里的IE浏览器主要是IE8以下的浏览器 }; function getButton(e){ /* 1.window.event这个属性IE和Chrome都是支持的 2.但是Chrome也是支持W3C的 3.所以,如果说W3

  • 原生js 秒表实现代码

    html代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="gb2312"> <head> <style type="text/css"> #container { margin:0 auto; margin-top:10%; width:200px; } #t

  • 原生JS分页展示效果（点击分页看效果）

    文中图片地址已经失效,但代码功能都存在,大家注意替换下 实例索引 body{margin:0px;padding:0px;font-size:12px;font-family:Verdana, "微软雅黑";background:#2d3033;} img{border:0;} a{outline:none;} #box{width:918px;height:745px;margin:20px auto;border:5px solid #4b5258;background:#fff;

  • JS判定是否原生方法

    浏览器的趋势是加入越来越多对象,像Worker,同时也为旧有的对象添加新方法.如何兼容它的第一步就是检测它们是否存在,没有则补上自己的兼容代码.这时问题就来了,有的类库是给你做了这一步,但有时没有,有时是做了,但并不符合标准.因此单纯是typeof Array.prototype.map === "function"可能不够用.这时isNative方法就要登场了. 我一直用的版本,自己写的: 复制代码 代码如下: var isNative = function(method){//判定

  • 判定是否原生方法的JS代码

    浏览器的趋势是加入越来越多对象,像Worker,同时也为旧有的对象添加新方法.如何兼容它的第一步就是检测它们是否存在,没有则补上自己的兼容代码.这时问题就来了,有的类库是给你做了这一步,但有时没有,有时是做了,但并不符合标准.因此单纯是typeof Array.prototype.map === "function"可能不够用.这时isNative方法就要登场了. 我一直用的版本,自己写的: 复制代码 代码如下: var isNative = function(method){//判定

  • Android中webview与JS交互、互调方法实例详解

    Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这

  • 实现图片首尾平滑轮播(JS原生方法—节流)

    实现图片首尾平滑轮播(JS原生方法—节流)

    首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首尾轮播</title> <link rel="stylesheet" href="首尾轮播.css&q

  • 原生JS查找元素的方法(推荐)

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func

  • 在 Node.js 中使用原生 ES 模块方法解析

    从版本 8.5.0 开始,Node.js 开始支持原生 ES 模块,可以通过命令行选项打开该功能.新功能很大程度上得归功于 Bradley Farias. 1.演示 这个示例的代码目录结构如下: esm-demo/ lib.mjs main.mjs lib.mjs: export function add(x, y) { return x + y; } main.mjs: import {add} from './lib.mjs'; console.log('Result: '+add(2, 3

  • 原生JS取代一些JQuery方法的简单实现

    1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelectorAll(el); } querySelectorAll方法返回的是NodeList对象,需要转换为数组. myList = Array.prototype.slice.call(myNo

  • Android React Native原生模块与JS模块通信的方法总结

    Android React Native原生模块与JS模块通信的方法总结 前言: 在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式. 方式一:通过Callbacks的方式 说起Callbacks大家都不陌生,它是最常用的设计模式之一.无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影. 原生模块支持Callbacks类型的参数,该Callbacks对应JS中的f

  • 原生js封装的ajax方法示例

    本文实例讲述了原生js封装的ajax方法.分享给大家供大家参考,具体如下: 众所周知,框架之间会有冲突,这是源生js就起到作用了,下面介绍一种源生js封装的ajax请求. function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"

  • js原生方法被覆盖,从新赋值原生的方法

    实现原理 js的原生方法被覆盖掉以后,如果你还没让原生方法又从新指向一个新的变量名,那就gg了.所以,关键就是怎么再获取到原生的方法.实现的原理呢就是创建一个新的window对象,然后从新的window对象里面获取原生的方法,来重新赋值. 使用iframe实现 首先创建一个iframe对象,使用document.createElement方法创建 var iframe = document.createElement("iframe"); document.body.appendChi

随机推荐