JavaScript：.extend和.prototype用于什么？

I am relatively new to JavaScript and keep seeing .extend and .prototype in third party libraries I am using. I thought it had to do with the Prototype javascript library, but I am beginning to think that is not the case. What are these used for?

我是一个相对较新的JavaScript，并继续在我使用的第三方库中看到.extend和.prototype。我认为这与Prototype javascript库有关，但我开始认为情况并非如此。这些用于什么？

5 个解决方案

#1

Javascript's inheritance is prototype based, so you extend the prototypes of objects such as Date, Math, and even your own custom ones.

Javascript的继承是基于原型的，因此您可以扩展对象的原型，例如Date，Math，甚至是您自己的自定义对象。

Date.prototype.lol = function() {
 alert('hi');
};

( new Date ).lol() // alert message

In the snippet above, I define a method for all Date objects ( already existing ones and all new ones ).

在上面的代码片段中，我为所有Date对象（已经存在的对象和所有新对象）定义了一个方法。

extend is usually a high level function that copies the prototype of a new subclass that you want to extend from the base class.

extend通常是一个高级函数，它复制要从基类扩展的新子类的原型。

So you can do something like:

所以你可以这样做：

extend( Fighter, Human )

And the Fighter constructor/object will inherit the prototype of Human, so if you define methods such as live and die on Human then Fighter will also inherit those.

并且Fighter构造函数/对象将继承Human的原型，因此如果您在Human上定义诸如live和die之类的方法，那么Fighter也将继承那些。

Updated Clarification:

更新澄清：

"high level function" meaning .extend isn't built-in but often provided by a library such as jQuery or Prototype.

“高级函数”意味着.extend不是内置的，但通常由jQuery或Prototype等库提供。

#2

.extend() is added by many third-party libraries to make it easy to create objects from other objects. See http://api.jquery.com/jQuery.extend/ or http://www.prototypejs.org/api/object/extend for some examples.

.extend（）由许多第三方库添加，以便于从其他对象创建对象。有关示例，请参阅http://api.jquery.com/jQuery.extend/或http://www.prototypejs.org/api/object/extend。

.prototype refers to the "template" (if you want to call it that) of an object, so by adding methods to an object's prototype (you see this a lot in libraries to add to String, Date, Math, or even Function) those methods are added to every new instance of that object.

.prototype是指对象的“模板”（如果你想称之为），所以通过向对象的原型添加方法（你在库中看到很多东西，以添加到String，Date，Math，甚至函数）这些方法被添加到该对象的每个新实例中。

#3

The extend method for example in jQuery or PrototypeJS, copies all properties from the source to the destination object.

例如，jQuery或PrototypeJS中的extend方法将所有属性从源复制到目标对象。

Now about the prototype property, it is a member of function objects, it is part of the language core.

现在关于prototype属性，它是函数对象的成员，它是语言核心的一部分。

Any function can be used as a constructor, to create new object instances. All functions have this prototype property.

任何函数都可以用作构造函数，以创建新的对象实例。所有函数都具有此原型属性。

When you use the new operator with on a function object, a new object will be created, and it will inherit from its constructor prototype.

在函数对象上使用new运算符时，将创建一个新对象，它将从其构造函数原型继承。

For example:

例如：

function Foo () {
}
Foo.prototype.bar = true;

var foo = new Foo();

foo.bar; // true
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

#4

Javascript inheritance seems to be like an open debate everywhere. It can be called "The curious case of Javascript language".

Javascript继承似乎就像一场无处不在的公开辩论。它可以被称为“Javascript语言的奇怪案例”。

The idea is that there is a base class and then you extend the base class to get an inheritance-like feature (not completely, but still).

我们的想法是有一个基类，然后扩展基类以获得类似继承的功能（不完全，但仍然）。

The whole idea is to get what prototype really means. I did not get it until I saw John Resig's code (close to what jQuery.extend does) wrote a code chunk that does it and he claims that base2 and prototype libraries were the source of inspiration.

整个想法是获得真正意义上的原型。直到我看到John Resig的代码（接近jQuery.extend所做的）编写了一个执行它的代码块并且他声称base2和原型库是灵感的来源之后我才得到它。

Here is the code.

这是代码。

    /* Simple JavaScript Inheritance
     * By John Resig http://ejohn.org/
     * MIT Licensed.
     */  
     // Inspired by base2 and Prototype
    (function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

There are three parts which are doing the job. First, you loop through the properties and add them to the instance. After that, you create a constructor for later to be added to the object.Now, the key lines are:

有三个部分正在完成这项工作。首先，遍历属性并将它们添加到实例中。之后，您将创建一个构造函数，以便稍后添加到对象中。现在，关键行是：

// Populate our constructed prototype object
Class.prototype = prototype;

// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;

You first point the Class.prototype to the desired prototype. Now, the whole object has changed meaning that you need to force the layout back to its own one.

首先将Class.prototype指向所需的原型。现在，整个对象已经改变了意味着你需要强制布局回到它自己的布局。

And the usage example:

用法示例：

var Car = Class.Extend({
  setColor: function(clr){
    color = clr;
  }
});

var volvo = Car.Extend({
   getColor: function () {
      return color;
   }
});

Read more about it here at Javascript Inheritance by John Resig 's post.

通过John Resig的帖子在Javascript继承中阅读更多相关信息。

#5

Some extend functions in third party libraries are more complex than others. Knockout.js for instance contains a minimally simple one that doesn't have some of the checks that jQuery's does:

第三方库中的某些扩展功能比其他库更复杂。例如，Knockout.js包含一个最简单的一个，它没有jQuery所做的一些检查：

function extend(target, source) {
    if (source) {
        for(var prop in source) {
            if(source.hasOwnProperty(prop)) {
                target[prop] = source[prop];
            }
        }
    }
    return target;
}