Verweis auf sich selbst (dieser) innerhalb CustomElement

Question

Ich verwende dieses polyfill ein eigenes Element in JavaScript zu implementieren. Die self Variable bezieht sich jedoch auf Window innerhalb meiner Methoden, wenn ich zuerst const self = this aufrufen.

Kann jemand freundlicherweise erklären, warum das ist für mich und vielleicht einen besseren Weg vorschlagen, die benutzerdefinierten Elementinstanz innerhalb von Methoden zugreifen?

class DocumentPreview extends HTMLElement { 
    constructor(self, documents) { 
    self = super(self); 
    self.documents = documents || []; 
    self.innerHTML = Handlebars.templates['document_preview'](); 
    } 

    connectedCallback() { 
    // if I don't do this first ... 
    const self = this; // <<---------------------------------- 
    console.log("connected now"); 
    document.addEventListener('mqttsub', function(event) { 
     // ... onMessage is undefined here: 
     self.onMessage(event.detail); 
    }); 
    } 

    disconnectedCallback() { 
    console.log("disconnected"); 
    } 

    onMessage(message) { 
    // Same story ... 
    const self = this; // <<---------------------------------- 
    Promise.resolve(true) 
    .then(json("/documents/")) 
    .then(ds => ds 
     .filter(x => x.name==message.payload) 
     .reduce((x, y) => y, undefined) 
    ) 
    .then(d => json(sprintf("/document/%d/", d.id))()) 
    // ... here: 
    .then(d => self.renderDocuments(d)) 
    .catch(console.log); 
    } 

    renderDocuments(d) { 
    console.log('render', d); 
    } 
} 

Answer 1

Bindung Probieren Sie die Methoden onMessage() und renderDocuments() im Konstruktor bind() wie in this.methodName = this.methodName.bind(this) verwenden. Damit können Sie über this auf Eigenschaften und Methoden zugreifen.

class DocumentPreview extends HTMLElement { 
    constructor(documents) { 
    super(); 

    this.documents = documents || []; 
    this.innerHTML = Handlebars.templates['document_preview'](); 

    this.onMessage = this.onMessage.bind(this); 
    this.renderDocuments = this.renderDocuments.bind(this); 
    } 

    connectedCallback() { 
    document.addEventListener('mqttsub', this.onMessage); 
    } 

    disconnectedCallback() { 
    console.log("disconnected"); 
    } 

    onMessage(event) { 
    const { detail: message } = event; 

    Promise.resolve(true) 
     .then(json("/documents/")) 
     .then(ds => ds 
     .filter(x => x.name==message.payload) 
     .reduce((x, y) => y, undefined) 
    ) 
     .then(d => json(sprintf("/document/%d/", d.id))()) 
     // ... here: 
     .then(d => this.renderDocuments(d)) 
     .catch(console.log); 
    } 

    renderDocuments(d) { 
    console.log('render', d); 
    } 
} 

Hoffentlich hilft das!

Answer 2

in JavaScript das this Schlüsselwort, bezieht sich auf den Kontext des aktuellen Funktion.

Eine einfache Möglichkeit, dies zu beheben, ist die Verwendung einer Pfeilfunktion. Pfeilfunktionen verwenden standardmäßig den äußeren Kontext.

document.addEventListener('mqttsub', (event) => { 
    // this here corresponds to the outer context = your class 
    this.onMessage(event.detail); 
}); 

Ansonsten können Sie auch den Kontext binden

document.addEventListener('mqttsub', (function(event) { 
    this.onMessage(event.detail); 
}).bind(this)); // Set the function context to be the class context