问题描述
我有这个基本类型:
typeA = function () {
};
typeA.prototype = {
do = function() { alert ("do something"); },
doMore = function() { this.do(); }
}
和继承的typeB:
typeB = function () {
};
typeB .prototype = new typeA();
typeB.prototype.do = function() { alert ("do something else"); };
当我创建一个typeB实例并调用doMore时，我收到一条错误消息，指示this.do不是一个函数.我可以用Javascript做这种事情吗?
这个例子是您要找的吗?
typeA = function () { };
typeA.prototype = {
do : function() { alert ("do something"); }, //use : instead of = here
doMore : function() { this.do(); }
}
typeB = function () { };
typeB.prototype = new typeA();
typeB.prototype.do = function() { alert ("do something else"); };
var instance = new typeB();
instance.doMore();
在声明对象的属性时使用:，在将值分配给变量时使用=. :D
其他说明:
这是发生有趣的事情的地方:
typeB.prototype = new typeA();
当您使用.访问对象的函数或变量时，浏览器首先查看对象本身，以查看是否在该对象中定义了该变量.这就是为什么您可以执行以下操作的原因:
var foo = function() {};
foo.prototype.bar = 3
instance = new foo();
alert( instance.bar ); //alerts 3
instance["bar"] = 55; //add a variable to the instance object itself
alert( instance.bar ); //alerts 55, instance variable masks prototype variable
这显示了事物可以通过两种方式存在"于对象中.它既可以在对象本身中(也可以通过在构造函数中添加this.bar = 55来实现)，也可以在对象的原型中.
因此，当您说typeB.prototype = new typeA();时，您会将typeA的该实例中的所有内容放入typeB'prototype.您基本上说的是嘿，浏览器，如果您在typeB实例中找不到东西，请查看它是否在typeA实例中！"
事实证明，在实例中实际上没有任何内容，只是当浏览器在 that 中找不到该名称的变量时，原型中的东西最终才被使用对象本身.调用instance.doMore()时，浏览器无法在instance中找到它，因此它会在typeB.prototype中查找，您只需将其设置为typeA的实例即可.由于它在 实例中找不到名为doMore的任何东西，因此它在 原型中查找，最后找到了doMore的定义并愉快地调用了它. /p>
一件有趣的事情是，您仍然可以弄乱设置为原型的typeA实例中的实际情况:
//earlier code the same
foo = new typeA();
typeB.prototype = foo;
foo.do = function() { alert ("do something else"); };
//^^ same as `typeB.prototype.do = function() { alert ("do something else"); };`
var instance = new typeB();
instance.doMore();
虽然当您了解IMHO发生的事情时这很酷，但间接的额外层(在查看typeA.prototype之前检查是否在typeA实例中定义了东西)可能不是最好的主意，并且如果您只是这样说，您的代码可能会更清晰:
typeB.prototype = typeA.prototype;
(很抱歉，如果您已经知道我刚刚告诉您的所有内容，但是我想我要描述一下事情是如何进行的；)
I have this base type:
typeA = function () {
};
typeA.prototype = {
do = function() { alert ("do something"); },
doMore = function() { this.do(); }
}
and an inherited type typeB:
typeB = function () {
};
typeB .prototype = new typeA();
typeB.prototype.do = function() { alert ("do something else"); };
When I create an instance of typeB and call doMore, I get an error indicating that this.do is not a function. Can I do this sort of thing in Javascript?
Is this example what you are looking for?
typeA = function () { };
typeA.prototype = {
do : function() { alert ("do something"); }, //use : instead of = here
doMore : function() { this.do(); }
}
typeB = function () { };
typeB.prototype = new typeA();
typeB.prototype.do = function() { alert ("do something else"); };
var instance = new typeB();
instance.doMore();
You use : when declaring the properties of an object and = when assigning values to variables. :D
Additional explanation:
This is where the interesting stuff happens:
typeB.prototype = new typeA();
When you access a function or variable of an object with ., the browser first looks in the object itself to see if that variable is defined there. This is why you can do things like this:
var foo = function() {};
foo.prototype.bar = 3
instance = new foo();
alert( instance.bar ); //alerts 3
instance["bar"] = 55; //add a variable to the instance object itself
alert( instance.bar ); //alerts 55, instance variable masks prototype variable
This shows how there are two ways that something can be 'in' an object. It can either be in the object itself (which you can also do by adding this.bar = 55 to the constructor) or it can in the object's prototype.
Hence, when you say typeB.prototype = new typeA(); you are putting everything in that instance of typeA into typeB'prototype. What you've basically said is "Hey browser, if you can't find something in an instance of typeB, look to see if its in this instance of typeA!"
Turns out there's nothing actually in that instance, just things in its prototype that end up getting used when the browser can't find a variable of that name in that object itself. When you call instance.doMore(), the browser can't find it in instance, so it looks in typeB.prototype, which you just set to an instance of typeA. Since it can't find anything called doMore in that instance, it looks in its prototype, and finally finds a definition for doMore and happily calls it.
One interesting thing is that you can still mess around with things that are actually in that instance of typeA that you set to be the prototype:
//earlier code the same
foo = new typeA();
typeB.prototype = foo;
foo.do = function() { alert ("do something else"); };
//^^ same as `typeB.prototype.do = function() { alert ("do something else"); };`
var instance = new typeB();
instance.doMore();
While this is kind of cool when you understand what's going on IMHO, the extra layer of indirection (checking to see if stuff is defined in the instance of typeA before looking in typeA.prototype) is probably not the best idea, and your code would probably be clearer if you just said this:
typeB.prototype = typeA.prototype;
(sorry if you already knew everything I just told you, but I thought I'd describe how things were working under the hood ;)
这篇关于找不到Javascript原型方法重写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！