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

Question

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

Answer 1

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

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

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

在上面的代码片段中,我为所有 Date对象(已经存在的对象和所有新对象)定义了一个方法.

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

所以你可以这样做:

extend( Fighter, Human )

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

更新澄清:

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

Answer 2

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

.prototype 指的是一个对象的"模板"(如果你想称它),所以通过向对象的原型添加方法(你在库中看到很多东西,以添加到String,Date,Math,甚至Function)这些方法被添加到该对象的每个新实例.

Answer 3

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

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

任何函数都可以用作构造函数,以创建新的对象实例.所有功能都具有此prototype属性.

在new函数对象上使用运算符时,将创建一个新对象,它将从其构造函数继承prototype.

例如:

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

var foo = new Foo();

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

Answer 4

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

我们的想法是有一个基类,然后扩展基类以获得类似继承的功能(不完全,但仍然).

整个想法是获得原型的真正含义.直到我看到John Resig的代码(接近于什么jQuery.extend)编写了一个代码块并且他声称base2和原型库是灵感的来源之后我才得到它.

这是代码.

    /* 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;
  };
})();

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

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

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

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

用法示例:

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

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

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