无法在JS中获取继承的类函数 [英] Can't get the inherited class functions in JS

问题描述

我构建了一些基础PopupBuilder类，并希望在一些不同的用例中实现它。对于每种情况，我创建一个类扩展基类。

所以：

I build some base PopupBuilder class and want to implement it in some different usecases. For each case I create a class extends the base class.
So:

function PopupBuilder () {
    var _this = this;

    this.buildPopup = function () {
        var popup = $('<div>', {
        id: "popup",
        class: "full-page",
        click: clickHandler});
    } //works fine

    function acceptChanges () {}
    function clickHandler (event) { // works fine 
        console.log(_this); // _this doesn't overrides by child class _this. Should it? 
        acceptChanges(event); // doesn't overrides by child class function as well
    }
}

function ToServerSender (text) {
    var _this = this;
    function acceptChanges (event) {
        // send data to server
    }
}

ToServerSender.prototype = new PopupBuilder();

var updateFile = new ToServerSender();
updateFile.buildPopup();

我创建了一个子类的实例，为什么我无法获得子类代码并覆盖/扩展基类？
我应该如何重写它将起作用的代码？

I create an instance of child class, why I can't get to child class code and override/extend the base class? How should I rewrite the code it will works?

推荐答案

你需要记住OOP的工作方式在JavaScript中与类式OOP大不相同。

You need to bear in mind that the way OOP works in JavaScript is vastly different from class-style OOP.

所以让我们分解一下：

var _this = this;

此分配发生在新PopupBuilder（）在你发布的代码的末尾调用构造函数。这里的 this 是指一个类型为 PopupBuilder 的对象，并且通过继承实质上是共享 ToServerSender 。每个 ToServerSender 都没有获得此 _this 的副本。

This assignment takes place when the new PopupBuilder() constructor is called toward the end of the code you posted there. The this here refers to an object of type PopupBuilder, and through inheritance is essentially "shared" among all instances of ToServerSender. Each ToServerSender does not get its own copy of this _this.

function acceptChanges () {}

这只是一个存在于 PopupBuilder 构造函数中的函数。这不是一种方法。它不能通过在 ToServerSender 构造函数中定义新的构造函数来覆盖：

This is just a function that exists inside your PopupBuilder constructor. It's not a method. It can't be overridden by defining a new one in the ToServerSender constructor:

console.log(_this); // _this doesn't overrides by child class _this. Should it? 

如上所述，这里的 _this 是引用一次调用 PopupBuilder 构造函数时创建的 _this 的一个实例，它在所有构造函数中共享 ToServerSender的实例。

As explained above, the _this here is referring to the one instance of _this that was created the one time you called the PopupBuilder constructor and it is shared among all instances of ToServerSender.

acceptChanges(event); // doesn't overrides by child class function as well

这只是对<$的闭包 PopupBuilder 构造函数中的c $ c> acceptChanges 函数。它不能被覆盖。

---

那么你能做什么？

This is simply a closure to the acceptChanges function inside the PopupBuilder constructor. It can't be overridden.

---

So what can you do?

1。使用可覆盖的方法。

您需要做的一件事是将方法分配给这个以便孩子对象可以覆盖它们：

One thing you need to do is assign methods to this so that child objects can override them:

function PopupBuilder () {
    var _this = this;

    this.buildPopup = function () {} //works fine

    this.acceptChanges = function () {}

    this.clickHandler = function (event) { 
        console.log(this); 
        this.acceptChanges(event); 
    }
}

这里，我们有构造函数为函数赋值此以便它们可以通过原型链继承并根据需要覆盖：

Here, we have the constructor assigning functions to properties of this so that they can be inherited via the prototype chain and overridden as needed:

function ToServerSender (text) {
    var _this = this;

    // overrides prototype's  .acceptchanges
    this.acceptChanges = function (event) {
        // send data to server
    }
}

2。使用 Object.create（）创建子类型的原型，而不是构造函数。

2. Create the child type's prototype using Object.create(), not a constructor.

使用构造函数在子类型上创建原型有点过时了。 新方法是使用 Object.create 来创建父对象原型的副本：

Using a constructor to create a prototype on a child type is a bit outdated. The new way to do this is to use Object.create, to create a copy of the parent object's prototype:

ToServerSender.prototype = Object.create(PopupBuilder.prototype);

但这会留下 ToServerSender 原型而不是全部在 PopupBuilder 构造函数中初始化的东西。这实际上是一件好事，因为 PopupBuilder 构造函数正在创建一个私有变量的副本，这些变量将在所有 ToServerSenders <之间共享/ code>存在，可能会造成严重破坏。

But this leaves the ToServerSender prototype without all the stuff that was initialized in the PopupBuilder constructor. This is actually a good thing, because the PopupBuilder constructor was creating one copy of its private variables that were going to be shared between all of the ToServerSenders in existence, potentially wreaking havok.

解决方法是......

The solution to this is to...

第3。从子构造函数调用父构造函数：

function ToServerSender(text) {
    PopupBuilder.call(this);

    var _this = this;
    this.a = "hello";
    //this class overrides acceptChanges from PopupBuilder
    this.acceptChanges = function(event) {
        // send data to server
        console.log(1);
        console.log(_this);
    }
}

这里发生的是 ToServerSender 在本身上调用 PopupBuilder 构造函数，以便在 _this 是在该构造函数中创建的，它指的是 ToServerSender ，而不是一些共享的 PopupBuilder 。这允许您在闭包中使用它并清除您遇到的一些问题。

What happens here is that ToServerSender calls the PopupBuilder constructor on itself, so that when _this is created inside that constructor, it is referring to the ToServerSender, and not some shared PopupBuilder. This allows you to use it in closures and clear up some of the problems you were experiencing.

所以这些是要记住的主要事项。我知道这很多东西，但你使用的越多，它就越容易。

So those are the main things to keep in mind. I know this is a ton of stuff, but the more you use it, the easier it will become.

这篇关于无法在JS中获取继承的类函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！