我是比较新的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
,所以如果你定义的方法,如live
和die
的Human
则Fighter
也将继承这些。
更新澄清:
“高级的功能”,意思.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;
}