【发布时间】：2017-04-22 14:09:52
【问题描述】：
我对所有扩展抽象类的子类使用依赖注入。
如果需要，我在抽象构造函数类中启动了一个我计划在其子级中覆盖的方法的问题。
我遇到的问题是我注入的依赖项在从 super 启动的覆盖类中不可见。
下面是代码示例：
abstract class Base {
constructor(view: string) {
this._assemble();
}
protected _assemble(): void {
console.log("abstract assembling for all base classes");
}
}
class Example extends Base {
constructor(view: string, private helper: Function) {
super(view);
console.log(this.helper);
}
public tryMe(): void {
this._assemble();
}
protected _assemble(): void {
super._assemble();
// at first run this.helper will be undefined!
console.log("example assembling", this.helper);
}
}
let e = new Example("hoho", function () { return; })
console.log("So now i will try to reassemble...");
e.tryMe();
所以一个问题的核心是typescript将Example类转译成代码如下：
function Example(view, helper) {
_super.call(this, view);
this.helper = helper;
console.log(this.helper);
}
而不是这个：
function Example(view, helper) {
this.helper = helper;
_super.call(this, view);
console.log(this.helper);
}
如您所见，如果我在 JavaScript 中将 this.helper 放在 _super 之前，this.helper 将始终在 _assemble 中可见。即使super 会调用_assemble 函数。
但默认分配给它是在_super 调用之后。所以如果super 类将调用汇编。首次在示例中覆盖的_assemble 方法中将不可见。
所以我的问题是......
这是一个错误吗？
或
我不知道什么？
现在我解决了我的问题，只是从 super 类中删除了 _assemble，并且总是从孩子那里调用它。但这感觉不对。
注意事项： 这是编译后的 JavaScript 代码 vs 固定的 JavaScript 代码演示：
TypeScript 常用输出：
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Base = (function () {
function Base(view) {
this._assemble();
}
Base.prototype._assemble = function () {
document.write("<p>abstract assembling for all base classes</p>");
};
return Base;
}());
var Example = (function (_super) {
__extends(Example, _super);
function Example(view, helper) {
_super.call(this, view);
this.helper = helper;
console.log(this.helper);
}
Example.prototype.tryMe = function () {
this._assemble();
};
Example.prototype._assemble = function () {
_super.prototype._assemble.call(this);
// at first run this.helper will be undefined!
document.write("<p>example assembling <b/>" + (this.helper) + "</b></p>");
};
return Example;
}(Base));
var e = new Example("test", function () { return "needle"; });
document.write("<p><i>So now i will try to reassemble...</i></p>");
e.tryMe();TypeScript 修复了 javascript 输出：
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Base = (function () {
function Base(view) {
this._assemble();
}
Base.prototype._assemble = function () {
document.write("<p>abstract assembling for all base classes</p>");
};
return Base;
}());
var Example = (function (_super) {
__extends(Example, _super);
function Example(view, helper) {
/**
* Slight change, compiled assigning to this BEFORE _super.
*/
this.helper = helper;
_super.call(this, view);
console.log(this.helper);
}
Example.prototype.tryMe = function () {
this._assemble();
};
Example.prototype._assemble = function () {
_super.prototype._assemble.call(this);
// at first run this.helper will be undefined!
document.write("<p>example assembling <b/>" + (this.helper) + "</b></p>");
};
return Example;
}(Base));
var e = new Example("test", function () { return "Needle"; });
document.write("<p><i>So now i will try to reassemble...</i></p>");
e.tryMe();【问题讨论】：
-
您正在谈论将被转译为 ES5 的代码。我说的是转译结果的代码，即 ES5。请尝试编译我提供的 TypeScript 示例，并查看
private helper在超类中不可见。\ -
它被编译到 ES5 的方式应该与 ES6 类的工作方式相同（为什么要不然呢？）。在 ES6 中，不允许在调用基类构造函数之前使用
this。 -
-
@artem 因此，在这种情况下，以应该在 ES6 中工作的方式转换为 ES5 不是一种选择。我认为在 TS => ES5 中，它应该在
super之前将所有private, public, protected转换为构造参数。其余的应该照常进行。
标签： javascript typescript transpiler