javascript - 调用不带 "this"前缀的对象方法

Question

我正在将我的一个小项目重构为一个有序的类结构，使用对象和所有方法作为原型(prototype)。这是一段相当困惑的代码，但原理很简单，我正在创建一个对象构造函数，在 init 上设置所有必要的属性，并且在外部我通过 ObjectName.prototype.funcname 定义所有方法

现在在每个方法中，如果我想调用另一个方法，我正在使用“this.methodname()”，如果我想再次访问对象属性，我正在使用“this.someprop”，效果很好，但是当发生特定情况时，我实际上正在创建另一个对象(不是通过构造函数，因为我不需要，所以我只需要存储一些属性)，并且我想用新对象作为“this”调用另一个方法，所以我正在调用 this.someMethod.call(newobj) ，但我搞乱了一切，因为现在如果该方法尝试调用不同的方法，它将失败，但如果它将访问属性，它将成功。我的目标是将新的 Obj 作为“嵌套”对象存储在主 obj 中(通过构造函数创建)，并且如果满足某些条件，则使用新的“嵌套”对象作为 this 调用一些方法，并且仍然能够调用我的主要 obj 方法。有什么最佳实践吗？我的第一个猜测是向构造函数添加一个参数，这样如果我需要另一个“嵌套”对象，我可以使用这个参数调用构造函数，并且只得到一个小对象，而不是也调用一些方法的“大”对象。

编辑:我的构造函数看起来像这样:

function IframeMain (IframeNode,Html){
    this.IframeDomReady(IframeNode);
   Object.assign(this,this.CreateContext(window.location.href,IframeNode));
    this.ParsedDoc = this.HtmlParser(Html);
    this.DocReady = false; 
    this.Appender(this.ContentDocument.head,this.ParsedDoc.Head).then(data => {
        this.Appender(this.ContentDocument.body,this.ParsedDoc.Body)
    }).catch(err => {
        console.error(err);
    });     
}

我正在调用“Object.assign”将我的新对象(this)与从​​“CreateContext”方法返回的对象合并。之后，我获取一些 html 并将其附加到提供给构造函数的 iframe 中，现在在某些情况下，html 中还有另一个 iframe，所以我附加它，并且我需要使用此 iframe contentWindow/创建一个新对象记录下来，以便我可以将 html 附加到嵌套的 iframe，那么您认为这里的最佳实践是什么？如果我要在主对象内部创建一个嵌套对象并使用一些参数调用构造函数以仅返回主对象的一部分并填充它？

CreateContext方法:

IframeMain.prototype.CreateContext = function (src,IframeNode){
    if(!IframeNode.contentWindow || !IframeNode.contentDocument || !IframeNode.contentWindow.document)console.error("Context Problem!");

    return {
        NodesArray : [],
        Natives: {},
        DocReady: null,
        NestedContexts : {},
        IframeNode: IframeNode,
        ContentWindow : IframeNode.contentWindow,
        ContentDocument: IframeNode.contentDocument || IframeNode.contentWindow.document,
        Src : src,
        Location: this.ParseUrl(src),
    };

};

HtmlParser 方法:

IframeMain.prototype.HtmlParser = function(HtmlString){
let doc = new this.ContentWindow.DOMParser().parseFromString(HtmlString, 'text/html');
//Some more code...... and return parsed html

附加方法:

IframeMain.prototype.Appender = async function(target,nodes){
// append each node recursively to the iframe document 
//More calls here to different methods and if we hit an iframe we create another context and i would like to call the exact same methods and not change a thing because on each method i'm using "this" so technically i can do this recursively for 1000 nested iframes.
so what do you think is best practise here?  

我正在创建一个新实例，如下所示:

让 Iframe = new IframeMain(iframeel,html);

这就是逻辑开始立即执行的方式，我试图避免创建另一个实例，因为它会再次执行它，而我不需要它。

当我遇到一个新的 iframe 时，我会调用:

IframeMain.prototype.nestedframes = async function(iframeNode,html,PrevSrc){

this.NestedContexts = this.NestedContexts || {};
this.NestedContexts[UID] = this.CreateContext(PrevSrc,IframeEl);
// more code ...
and then i would like to call my appender method like this:
 await this.NestedContexts[UID].Appender(this.NestedContexts[UID].ContentDocument.head,this.NestedContexts[UID].ParsedDoc.Head);

but obviously my created context doesn't contain those methods and if i will call my method like so:

await this.Appender.call(this.NestedContexts[UID],this.NestedContexts[UID].ContentDocument.head,this.NestedContexts[UID].ParsedDoc.Head);

// i will have problems in the appender method because my this is my new object but inside appender i can't call my methods because they doesn't exist for that obj.

Answer 1

我仍然不太确定，但我认为您实际上正在寻找的是一个单独的 Context 类:

class Context {
    constructor(src, iframeNode) {
        if (!iframeNode.contentWindow || !iframeNode.contentDocument || !iframeNode.contentWindow.document) throw new Error("Context Problem!");
        this.nodesArray = [];
        this.natives = {};
        this.nestedContexts = {};
        this.iframeNode = iframeNode;
        this.contentWindow = iframeNode.contentWindow;
        this.ontentDocument = iframeNode.contentDocument || iframeNode.contentWindow.document,
        this.src = src;
        this.location = Context.parseUrl(src);
    }
    static parseUrl(src) { … } // if it needs properties of IframeMain, make it a method there
                               // and pass the parsed location to the Context constructor
    htmlParser(htmlString) {
        const doc = new this.ContentWindow.DOMParser().parseFromString(HtmlString, 'text/html');
        // Some more code...... and return parsed html
    }
    async append(target, nodes) {
        // append each node recursively to the iframe document 
        // More calls here to different methods and if we hit an iframe we create another context 
    }
    async nestedFrames(iframeNode, html, prevSrc) {
         const nested = this.NestedContexts[UID] = new Context(prevSrc, iframeEl);
         // more code ...
         await this.nestedContexts[UID].append(nested.contentDocument.head, nested.parsedDoc.Head);
    }
    // etc

i'm calling "Object.assign" to merge my new object (this) with an object returned from "CreateContext" method.

不要那样做。我认为这是你的主要问题。不要使上下文成为普通对象，而使它们成为具有所需的所有方法和属性的类实例。

如果您的 IframeMain 的功能超出了 minimal Context 类的范围，请引入第二种对象。创建一个 Context 子类，或者可能 better use composition .

class IframeMain {
    constructor(iframeNode, html) {
        this.IframeDomReady(IframeNode); // ???
        this.context = new Context(window.location.href, iframeNode);
        this.parsedDoc = this.context.htmlParser(Html);
        this.docReady = false;
    }
}

不确定它们之间的确切区别是什么。在您的nestedFrames方法中，您使用上下文的parsedDoc属性 - 如果每个上下文都应该有一个已解析的文档，那么也将该属性放在那里。或者，如果只有 IframeMain 负责管理 nestedContexts 的集合，请将其放在那里(而不是每个上下文都有自己的子上下文，采用树状结构)。

也许我判断错误，你实际上并不需要两种不同的数据结构。如果是这样，只需保持 Context 构造函数最小化，并且不调用任何方法，而只调用初始化属性。这项工作应该在单独的函数中完成:

 async function iframeMain(iframeNode, html) {
     const context = new Context(html, iframeNode);
     await context.append(context.contentDocument.head, context.parsedDoc.head);
     await context.append(context.contentDocument.body, context.parsedDoc.body);
 }
 try {
     const iframe = await iframeMain(iframeel, html);
} catch (err) {
    console.error(err);
}