JavaScript inheritance extend function
I'm having some trouble understanding the IF clause at the end of this function from Pro JavaScript Design Patterns:
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
subClass.superclass = superClass.prototype;
if(superClass.prototype.constructor == Object.prototype.constructor) {
superClass.prototype.constructor = superClass;
}
}
The book explains that these lines ensure that the superclass's constructor attribute is correctly set, even if the superclass is the Object class itself. Yet, if I omit those three lines and do the following:
function SubClass() {};
extend(SubClass, Object);
alert(Object.prototype.constructor == Object);
The alert says 'true', which means the superclass's constru开发者_运维问答ctor is set correctly even without those last three lines. Under what conditions, then, does this IF statement do something useful?
Thanks.
The problem that those two lines try to avoid, is generally produced when you replace the prototype
property of a Constructor Function, for example:
function Foo () {};
Foo.prototype = {
bar: 'baz'
};
var foo = new Foo();
foo.constructor === Object; // true, but `constructor` should refer to Foo
When functions objects are created, the prototype
property is initialized with a new object, which contains a constructor
property that refers to the function itself, e.g.:
function Bar () {};
var bar = new Bar();
bar.constructor === Bar; // true
When you replace the prototype
property with another object, this object has it's own constructor
property, generally inherited from other constructor, or from Object.prototype
.
var newObj = {};
newObj.constructor === Object;
Recommended articles:
- Constructors considered mildly confusing
- JavaScript Prototypal Inheritance
精彩评论