为什么控制台不显示从选择器返回的jQuery对象的方法？ [英] Why console don't show methods of jQuery object returned from selector?

问题描述

我知道如果我输入：

lockquote
$（'body'）;

我得到一个jQuery对象。然而在chrome的控制台上，我只能看到jQuery对象的内部数组，尽管事实上jQuery方法可以像

$（ 'body'）。hide（）;

为什么控制台不显示所有可访问的方法，以及jQuery如何管理做这个魔术？

如果仅仅是因为这些方法是在原型上定义的，那么我怎么写这些代码呢：

  function Person（）{this.myProp ='test'}; 
 var person = new Person（）; 
 Person.prototype.proto ='test2'; 
  

然后我检查chrome中的人我会看到：

__ proto__：Person
构造函数：Person（）
proto：test2

但在检查 $（'body'）; 时，那么在开发工具中没有显示 proto ？

解决方案

这些方法在对象的原型上。默认情况下，控制台和 console.log（）都不显示原型上的项目。

如果您在Chrome调试器中查看jQuery对象，则可以展开原型，然后查看其中的所有方法。

所以，你所看到的只是选择的控制台实现。它显示直接的实例属性，而不是原型上的项目。

---

当我将这段代码放入页面时：

  function Person（）{this.myProp ='test'}; 
 Person.prototype.proto ='test2'; 
 
 var person = new Person（）; 
 var jq = $（body）; 
  

然后检查 person 和 jq 在Chrome调试器中，我看到这个：

它显示了两个对象上的 proto 属性。而且，如果我为jQuery对象扩展该属性，它确实会显示所有方法。

I know that if I type:

$('body');

I get a jQuery object. However on chrome's console I'll only see the internal array of the jQuery object, despite the fact that jQuery methods are accessible like

$('body').hide();

Why the console don't show me all the accessible methods and how did jQuery manage to do this magic?

If it's just because these methods are defined on a prototype, then how come when I write these lines:

function Person(){this.myProp = 'test'};
var person = new Person();
Person.prototype.proto = 'test2';

and then I inspect person in chrome I will see:

__proto__: Person constructor: Person() proto: "test2"

but when Inspecting $('body'); then no proto is shown on dev tools?

解决方案

The methods are on the prototype of the object. Both the console and console.log() do not, by default, show items on the prototype.

If you examine a jQuery object in the Chrome debugger, you can expand the prototype and can then see all the methods there.

So, what you are seeing is just the chosen implementation of the console. It shows direct instance properties, not items on the prototype.

---

When I put this code into a page:

function Person(){this.myProp = 'test'};
Person.prototype.proto = 'test2';

var person = new Person();
var jq = $("body");

And, then examine both person and jq in the Chrome debugger, I see this:

which shows the `proto property on both objects. And, if I expand that property for the jQuery object, it does indeed show all the methods.

这篇关于为什么控制台不显示从选择器返回的jQuery对象的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！