Question

我有一个像这样构建的Item类

export class Item {

    element:JQuery<HTMLElement>

    constructor(...) {
        this.element = $("<div >...</div>");
        ...
        this._tooltipUpdate();
        this.element.tooltip({
            items: "div[data-tooltip]",
            content: this.element.attr("data-tooltip"),
            open: this._tooltipUpdate,
            ...
        });

    }

    ...

    public _tooltipUpdate = ():void => {
        this.element.attr(
            "data-tooltip",
            `...`
        );
    };

}

基本上，Item类具有保存其DOM元素的element属性。

我现在有一个不同的班级InventoryElement

export class InventoryElement extends MenuElement {

    amount:number;

    constructor(item:Item) {
        super(...)

        this.amount = 0;

        ...

        this.item._tooltipUpdate = () => {
            this.element.attr(
                "data-tooltip",
                `${this.amount}`
            );
        }
    }
}

基本上Item InventoryElement _tooltipUpdate实例应具有不同的_tooltipUpdate功能。目前，它没有正确覆盖它。我之前Item _tooltipUpdate() { ... }实施了Item，

data _null_;
file _webout;
put '<HTML>';
put '<HEAD><TITLE>Hello World!</TITLE></HEAD>';
put '<BODY>';
put '<H1>Hello World!</H1>';
put '</BODY>';
put '</HTML>';
run;

但我读到这会将它作为原型函数实现，而不是上面带箭头操作符的实例函数。

我是否正确使用箭头功能？如何更改%macro test; proc sql; create table eqmtid_name as select distinct EQMT_ID from library.joined_data; %let neqmtid = &sqlobs; quit; data _null_; set eqmtid_name; suffix=put(_n_,8.); call symput(cats('EQMTID',suffix), EQMT_ID); run; data _null_; file _webout; put '<script type="text/javascript">document.body.innerHTML = "";</script>'; put '<HTML>'; put '<head>'; put '<script type="text/javascript">'; put 'document.addEventListener("DOMContentLoaded", function initialize() {'; put ' var svgs = document.getElementsByTagName("svg");'; put ' for (i = 0; i < svgs.length; ++i) {'; put ' e = svgs[i];'; put ' e.removeAttribute("height");'; put ' e.removeAttribute("width");'; put ' e.setAttribute("width","80%");'; put ' }'; put ' '; put '});'; put '</script>'; put '</head>'; put '<BODY onload="initialize()">'; put '<HEADER class="pageheader">'; put '<TABLE>'; put '<tr>'; put '<td>'; put '<div class="divcenter">Header Text</div>'; put '</td>'; put '</tr>'; put '</TABLE>'; put '</HEADER>'; put '<FORM NAME="sub" METHOD="GET" ACTION="/SASStoredProcess/do">'; put '<INPUT TYPE="HIDDEN" NAME="_program" SIZE="100" VALUE="/Company/IT/Development/APP/stp_program">'; put '<INPUT TYPE="CHECKBOX" NAME="_debug" VALUE="log">Show SAS Log <br>'; put '<TABLE>'; put '<tr>'; put '<td>'; put '<label class="formitem">Equipment ID:</label>'; put '</td>'; put '<td>'; put '<select class="formitem styleinput" name="EQMTID">' / '<option value=""></option>' / %do i = 1 %to &neqmtid; / "<option value = %bquote(")%left(%trim(&&EQMTID&i))%bquote(") >&&EQMTID&i</option>" / %end; / '</select>'; put '</td>'; put '</TABLE>'; put '<br>'; put '<TABLE>'; put '<tr>'; put '<td>'; put '<INPUT class="button" class="formitem" TYPE="SUBMIT" VALUE="Search"><br>'; put '</td>'; put '</FORM>'; put '<FORM NAME="download" TARGET="_blank" METHOD="GET" ACTION="/SASStoredProcess/do">'; put '<INPUT TYPE="HIDDEN" NAME="_program" SIZE="100" VALUE="/Company/IT/Development/APP/export_data_stp">'; put '<td>'; put '<INPUT class="button" class="formitem" TYPE="SUBMIT" VALUE="Download"><br>'; put '</td>'; put '</FORM>'; put '</tr>'; put '</TABLE>'; put '</BODY>'; put '</HTML>'; run; %mend; %test;实例的功能？谢谢！

Answer 1

使用箭头功能时，您将this绑定到类型为InventoryElement的调用实例。

如果您想在this.element中致电Item，则需要执行

this.item._tooltipUpdate = function() {
    // this is now bound to Item
}.bind(this.item);

参见bind函数定义

一般来说，我不认为你这样做的方式，是最好的方法。看起来您的_tooltipUpdate类似于处理程序，它使您能够对项目中的更改做出反应。最好是实现一些事件逻辑，然后将侦听器附加到它。

另外，正如我所见，只有amount正在发生变化。那么为什么不在Item中使用setAmount的方法呢？这将更清洁，更容易实施。

TypeScript：覆盖不相关类中的实例函数

1 个答案: