JavaScript的:什么是.extend并用于.prototype?JavaScript的:什么

2019-05-13 07:40发布

我是比较新的JavaScript和不断看到.extend和.prototype在我使用第三方库。 我认为它与Prototype JavaScript库做的,但我开始认为情况并非如此。 这些是什么用的?

Answer 1:

JavaScript的继承是基于原型,所以你扩展的对象,如日期,数学,甚至你自己自定义的的原型。

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

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

在上面的片段中,我定义为所有 Date对象(已经存在的和所有新的)的方法。

extend通常是更高级的功能那份想要从基类扩展新子类的原型。

所以,你可以这样做:

extend( Fighter, Human )

Fighter的构造函数/对象将继承的原型Human ,所以如果你定义的方法,如livedieHumanFighter也将继承这些。

更新澄清:

“高级的功能”,意思.extend没有内置,但往往由库如jQuery或原型提供。



Answer 2:

.extend()是由许多第三方库添加到可以很容易地创建其他对象的对象。 见http://api.jquery.com/jQuery.extend/或http://www.prototypejs.org/api/object/extend的一些例子。

.prototype指的是“模板”(如果你想这样称呼它)加入方法的对象的原型对象的,所以(你该看到很多在库添加到字符串,日期,数学,或偶函数)这些方法被添加到该对象的每一个新的实例。



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语言的奇事”。

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

整个想法是让什么原型的真正含义。 我没有得到它,直到我看到约翰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;
  };
})();

有三个部分,它们做的工作。 首先,你遍历性,并将它们添加到该实例。 在这之后,你以后要加入object.Now创建一个构造函数,主要线路有:

// 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继承的帖子。



Answer 5:

一些extend的第三方库的功能比其他人更复杂。 Knockout.js例如含有一种微创简单的一个不具有一些jQuery的做的检查:

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


文章来源: JavaScript: What are .extend and .prototype used for?