Chrome有时会调用错误的构造函数 [英] Chrome sometimes calls incorrect constructor

问题描述

我们有一个广泛使用jQuery的网站，它在Firefox和IE中运行良好。然而，在Chrome中，我们经常（和半随机地）获取 Uncaught TypeError：无法调用未定义的方法'apply'（也出现其他jQuery方法代替<$ c

我们设法将问题追踪到jQuery方法 pushStack（） $ b

原始源代码（jQuery 1.7.1）：



  //获取一个元素数组并将其推入堆栈
 //（返回新的匹配元素集）
 pushStack：function（elems，name，selector）{
 //构建一个新的jQuery匹配元素集
 var ret = this.constructor（）; 
 
 //（等）
} 
  

：



  pushStack：function（elems，name，selector）{
 if（！（this instance of jQuery.fn。 init））抛出这个; 
 
 //构建一个新的jQuery匹配元素集
 var ret = this.constructor（）; $！
 $ b if（！（ret instanceof jQuery.fn.init））{
 console.log（pushStack> this：+ this.constructor）; 
 console.log（pushStack> ret：+ ret.constructor）; 
 throw ret; 
} 
 
 //（等）
} 
  

在大多数情况下， pushStack（）能正常运行。但是，有时Chrome会构造一个 Object 类型的对象，而不是 jQuery.fn.init 。控制台输出：



  pushStack> this：function（selector，context）{
 // jQuery对象实际上只是init构造函数'enhanced'
返回新的jQuery.fn.init（selector，context，rootjQuery）; 
} 
 pushStack> ret：function Object（）{[native code]} 
 Uncaught＃< Object> 
  

有没有人遇到类似的问题？它是Chrome的一个（已知的）错误吗？

更新 以简化我们的页面，以便它可以自行加载。我填写了 Chromium项目中的bug 项目，该页面用于复制问题附在那里。

解决方案

Chromium bug跟踪器中的回复似乎证实这是Chrome浏览器的一个bug。 b

解决方法是在jQuery中修复 pushStack（）函数：

 pushStack：function（elems，name，selector，p $ p $） ）{
 //构建一个新的jQuery匹配元素集
 var ret = this.constructor（）; 
 
 //针对Chrome bug的解决方法
 if（（this instance of jQuery.fn.init）&&！（ret instanceof jQuery.fn.init））{
 / / console.log（应用pushStack修复）; 
 ret = new jQuery.fn.init（）; 
} 
 
 //等等
} 
  

We have a web site that uses extensively jQuery and it works fine in Firefox and IE. However in Chrome, we are getting frequently (and semi-randomly) Uncaught TypeError: Cannot call method 'apply' of undefined (also other jQuery methods appear in place of apply).

We managed to track down the problem to jQuery method pushStack().

Original source code (jQuery 1.7.1):

// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
   // Build a new jQuery matched element set
   var ret = this.constructor();

   // (etc.)
}

Instrumented code:

pushStack: function( elems, name, selector ) {
   if (!(this instanceof jQuery.fn.init)) throw this;

   // Build a new jQuery matched element set
   var ret = this.constructor();

   if (!(ret instanceof jQuery.fn.init)) {
          console.log("pushStack>this: " + this.constructor);
          console.log("pushStack>ret: " + ret.constructor);
          throw ret;
   }

   // (etc.)
}

In most cases pushStack() runs correctly. However sometimes Chrome constructs an object of type Object instead of jQuery.fn.init. Console output:

pushStack>this: function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
    }
pushStack>ret: function Object() { [native code] }
Uncaught #<Object>

Did anybody encounter similar problem? Is it a (known) bug of Chrome?

Update

I managed to simplify our page, so that it could be loaded on its own. I filled bug in Chromium project project, the page for reproducing the issue is attached there.

解决方案

The responses in Chromium bug tracker seem to confirm that this is a bug of Chrome browser.

The workaround solution is to "fix" pushStack() function in jQuery:

// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
   // Build a new jQuery matched element set
   var ret = this.constructor();

   // Workaround for Chrome bug
   if ((this instanceof jQuery.fn.init) && !(ret instanceof jQuery.fn.init)) {
       // console.log("applying pushStack fix");
       ret = new jQuery.fn.init();
   }

   // etc.
}

这篇关于Chrome有时会调用错误的构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！