什么JavaScript概念允许相同的名称既是函数又是对象? [英] What JavaScript concept allows for the same name to be both a function and an object?

问题描述

我在网站设计/开发中使用JavaScript已有数年了，我所知道的一切都是自学成才的(我是一名设计专业人士，并且是业余爱好者，前锋成为了从事我的职业的完整的Web开发人员) .在这种背景下，我发现了一些我想了解更多的东西，却不知道它叫什么，它如何工作，甚至可能非常简单.

I've been using JavaScript for a few years now in web design/development, and everything I know has been self-taught (I was a design major and hobbyist front-ender turned full web developer in pursuit of my career). With that background, I discovered something that I want to learn more about and have no idea what it is called, how it works, or that it may even be something extremely simple.

我已经尝试搜索有关此的更多信息(以防止自己需要问这个问题)，但是当我不确定要什至找什么的时候就很难了……

I've tried to search for more information about this (to prevent myself from needing to ask this), but it's difficult when I'm not sure what it's called that I'm even looking for...

我在一些JavaScript库中注意到，我使用的变量名称既可以是函数也可以是对象.例如，jQuery库使用名称"jQuery".使用typeof jQuery登录时，它是一个函数，而typeof jQuery()是一个对象.对我来说有趣的是，最初的想法表明jQuery()将是一个函数，但实际上是一个对象.

I noticed in a few JavaScript libraries that I use that a variable name can be both a function and an object. For example, the jQuery library uses the name "jQuery". When logged using typeof jQuery it is a function, and typeof jQuery() is an object. What is interesting to me is that initial thought would suggest that jQuery() would be a function but it's actually an object.

//jQuery:
ƒ (a,b){return new r.fn.init(a,b)}


//jQuery():
r.fn.init {} //Expanding this reveals functions inside of __proto__ (which is obviously a clue, but I need more info)

当我尝试做这样的事情时，我最终覆盖了该名称(正如我期望的那样):

When I try to do something like this I end up overwriting the name (as I would expect):

//Declare an object:
var planetEarth = {
    'sky': 'blue',
    'grass': 'green'
}

//Now overwrite the object as a function:
function planetEarth(){
    console.log('inside of a function now');
}

这在JavaScript领域内是可以理解的，所以我的问题是，像jQuery这样的库如何同时实现两者?

This is understandable within the realm of JavaScript, so my question is how does a library like jQuery pull off having both at the same time?

最终(使用上面的示例)，我希望能够执行以下操作:

Ultimately (using the above example) I would like to be able to do something like this:

planetEarth().sky; //"blue"

所以我的回旋处问题只是这叫什么?

So my roundabout question is simply what is this called?

以及的后续活动，我在哪里可以了解完成此操作的基础?

我已经找到了有关面向对象的JavaScript和类以及原型的资源，但是我不确定这些概念中的一个(或两者)到底是什么.我发现的所有文章都不是从头开始的，它们似乎总是跳入不必要的复杂示例中.我不想建立一个庞大的图书馆-我只想在最基础的水平上获得更多经验.再次，这可能令人尴尬地简单，我以前从未遇到过这个概念，因此，我感谢被指出正确的方向，谢谢.

I've found resources on object-oriented JavaScript and classes, as well as prototypes, but I'm not sure if either (or both) of those concepts are what this is. All of the articles I've found aren't starting at the beginning and seem to always jump into unnecessarily complex examples. I'm not looking to make a giant library- I just want to get some more experience at the very basic level. Again, this could be embarrassingly simple and I've just never come across the concept before, so I appreciate being pointed in the right direction, thanks.

推荐答案

每个JavaScript函数也是一个对象，就像每个数组也是一个对象一样.我不认为这有个特别的名字，这只是语言的工作方式.

Every JavaScript function is also an object, just as every array is also an object. I don't think there is a special name for this, it's just how the language works.

您可能会混淆两件事:调用函数时返回的内容与函数本身的混淆.举个例子:

You may be confusing two different things: what a function returns when you call it, vs. the function itself. Take your example:

planetEarth().sky;  // "blue"

此代码不依赖于函数planetEarth是对象并且具有任何属性.您正在调用函数，因此要使此代码正常工作，该函数将需要返回一个对象.

This code does not rely on the function planetEarth being an object and having any properties. You're calling the function, so to make this code work the function would need to return an object.

由于函数是对象，因此也可以直接在函数本身上设置属性.下面的代码使用这两个功能.此版本的planetEarth()返回具有sky和grass属性的对象，因此它与您的示例一样工作:调用该函数以获取具有这些属性的对象.

Because a function is an object, you can also set properties directly on the function itself. The code below uses both of these features. This version of planetEarth() returns an object with sky and grass properties, so it works as in your example: you call the function to get an object with those properties.

代码还直接在函数上设置了exists属性，您可以在不调用函数的情况下访问该属性:

The code also sets an exists property directly on the function, and you can access that property without calling the function:

function planetEarth() {
    // Return an object when this function is called
    return {
        sky: 'blue',
        grass: 'green'
    }
}

// Set a property directly on the function itself
planetEarth.exists = true;

// Test accessing the function's property
console.log( planetEarth.exists );

// Test accessing a property in the object that the function returns when called
console.log( planetEarth().sky );

jQuery充分利用了这两种功能. jQuery是可以调用的函数.它返回一个通常称为"jQuery对象"的值.该对象具有属性和方法，例如jQuery('#foo').show().它还具有类似数组"的属性，您可以像访问任何数组一样访问它们，例如jQuery('#foo').length和jQuery('#foo')[0]. jQuery函数将这些属性添加到它返回的值中.

jQuery makes use of both of these facilities. jQuery is a function that you can call. It returns a value commonly called a "jQuery object". That object has properties and methods, such as jQuery('#foo').show(). It also has "array-like" properties that you can access as you would any array, e.g. jQuery('#foo').length and jQuery('#foo')[0]. The jQuery function adds those properties to the value it returns.

同时，jQuery库将其他属性和方法添加到jQuery函数本身.您无需调用该函数即可访问 ，例如jQuery.ajax({...}).

At the same time, the jQuery library adds other properties and methods to the jQuery function itself. You access without calling the function, e.g. jQuery.ajax({...}).

其他一些说明可帮助您理解jQuery代码.首先，下载 未压缩的版本的jQuery .看来您正在研究压缩的版本，该版本缩短了名称，没有任何意义.

A couple of other notes to help you understand the jQuery code. First, download the uncompressed version of jQuery. It looks like you are studying the compressed version, which has shortened names that won't make any sense.

此外，如果您想知道jQuery.fn是什么，它只是jQuery.prototype的别名.每当您看到jQuery.fn时，您都可以在心理上替代jQuery.prototype；了解JavaScript原型的工作方式，您将了解jQuery.fn.

Also, if you are wondering what jQuery.fn is, it is simply an alias for jQuery.prototype. Whenever you see jQuery.fn you can mentally substitute jQuery.prototype; learn how JavaScript prototypes work and you will understand jQuery.fn.

现在您可能想知道为什么 jQuery.fn根本存在.为什么不像其他使用原型继承的JavaScript代码那样直接使用jQuery.prototype?实际上，您可以，它的作用与jQuery.fn相同.但是早在2006年的jQuery的第一个版本就无法以这种方式工作. jQuery.fn是它自己的单独对象，每次调用jQuery函数时，它都会复制该对象的所有方法和属性为其返回的值.

And now you may wonder why jQuery.fn exists at all. Why not use jQuery.prototype directly like other JavaScript code that uses prototypical inheritance? In fact, you could, and it would work the same as jQuery.fn. But the very first version of jQuery, back in 2006, didn't work this way. jQuery.fn was its own separate object, and every time you called the jQuery function, it copied all of the methods and properties from this object into the value it returned.

您可能会猜到，这是相当低效的，因此jQuery更改为使用.prototype，因此它可以返回继承所有方法(例如.show()和.hide())的对象一一复制它们.同时，jQuery.fn被保留为jQuery.prototype的别名，以避免破坏现有代码.

As you can guess, this was rather inefficient, so jQuery was changed to use .prototype so it could return an object that inherits all the methods such as .show() and .hide() instead of copying them all one by one. At the same time, jQuery.fn was kept around as an alias for jQuery.prototype to avoid breaking existing code.

这篇关于什么JavaScript概念允许相同的名称既是函数又是对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！