JavaScript 中的方法重载

emi*_*mix 2 javascript methods overriding prototype

考虑示例 html 代码:

<head>
    ....
    <script src="/js/MyClass.js"></script>
    <script src="/js/extend.js"></script>
    <script>
        $(document).ready(function($) {
            var $obj=new MyClass();
            $obj.run();
        });
    </script>
</head>
<body>
Run Code Online (Sandbox Code Playgroud)

MyClass.js 文件:

var MyClass=function()
{
    this.run=function() {
        alert("MyClass");
    }
}
Run Code Online (Sandbox Code Playgroud)

扩展.js文件:

MyClass.prototype.run=function() {
    alert("Extend");
}
Run Code Online (Sandbox Code Playgroud)

为什么此代码会提醒“MyClass”而不是“Extend”?如何正确重写(重载)类方法?

Eli*_*gem 5

这一切都与JS如何解析像<object>.<property/function>. 我之前已经详细解释过这一点,但这里是适用于您的案例的示意图:

[    MyClass.run    ]<=========================================================\ \
MyClass[run] ===> JS checks instance for property run                           | |
 /\ ||                                                                          | |
 || || --> property found @instance, resolve value------------------------------| |
 || ||                                                                          | |
 || ===========> MyClass.prototype.run could not be found? check prototype      | |
 ||      ||                                                                     | |
 ||      ||--> OR property found @MyClass.prototype, return---------------------| |
 ||      ||                                                                     | |
 ||      ==========> Object.prototype.run: not found check prototype?           | |
 ||          ||                                                                 | |
 ||          ||--> property found @Object.prototype, return---------------------|-|
 ||          ||                                                                 |=|
 ||          =======> chech prototype of Object.prototype -> undefined~~~~~~~~~~|X|
 ||                                                                             \ /
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~< TypeError can't read property run of undefined
Run Code Online (Sandbox Code Playgroud)

这是 JS 可以检查run属性的所有地方。因为您的构造函数run在实例 ( this.run = function(){};)上定义了一个属性,所以查找永远不会超过第一步:“JS 检查实例的属性run
原型链从不发挥作用。

您会问是否以及如何重载JS 方法。简短的回答是:不是,不是真的。重载是一种有效的 OOP 技术,在传统的、基于类的 OO 模型中非常方便。JS 不会那样玩,而是使用原型模型。试图强制原型系统像传统的 OO 语言一样工作可能的(由于原型系统的灵活性),但它需要太多的努力来跟上,而且通常是不值得的。
您可以将其与使用普通轿车/轿车犁地进行比较。起初,您也许可以,但用不了多久,您就会陷入困境,不得不求助拖拉机将您拖出田地。

如果您仍然想尝试一下,方法如下:

function MyClass()
{
    this.run = function()
    {
        console.log('child method');
        var backup = this.run;//store reference to instance property
        delete this.run;//delete instance property
        this.run();//call again
        //but now, the instance property is missing, JS will use the prototype
        this.run = backup;//restore instance property
    };
}
MyClass.prototype.run = function()
{
    console.log('prototype run method');
};
var foo = new MyClass;
foo.run();
//logs:
//child method
//prototype run method
Run Code Online (Sandbox Code Playgroud)

您可能会发现看这里很有用,这是我之前的答案,其中我更详细地解释了 JS 解析表达式的方式。在我的答案的底部,我还添加了一些关于此事的更多链接,可能也值得一看……