CustomElement 내부의 자체 (this)에 대한 참조

Question

나는 polyfill을 사용하여 자바 스크립트에서 맞춤 요소를 구현하고 있습니다. 그러나 을 먼저 호출하지 않는 한 self 변수는 내 방법 내에서 Window을 참조합니다.

누군가 나를 친절하게 설명하고 메소드 내에서 맞춤 요소 인스턴스에 액세스하는 더 좋은 방법을 제안 할 수 있습니까?

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

가 this.methodName = this.methodName.bind(this) 같이 bind()를 사용하여 생성자의 방법 onMessage() 및 renderDocuments() 바인딩 시도 컨텍스트를 바인딩 할 수 있습니다. 이를 통해 this을 통해 속성과 메소드에 액세스 할 수 있습니다. 도움이

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); 
    } 
} 

희망이!

Answer 2

자바 스크립트에서 this 키워드는, 현재 함수의 컨텍스트를 의미합니다.

document.addEventListener('mqttsub', function(event) { 
    // this here corresponds to your function(event) {...} context 
    this.onMessage(event.detail); // Will fail 
}); 

쉽게 해결할 수있는 방법 중 하나는 화살표 기능을 사용하는 것입니다. 화살표 함수는 기본적으로 외부 컨텍스트를 사용합니다.

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

그렇지 않으면 당신은 또한

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