이 확장 된 DocumentFragment에서 불법 호출이 발생하는 이유는 무엇입니까?

Question

DocumentFragment 개체를 확장하려고했습니다.

function DocFragment() { 
    this.addHTML = function(html) { 
     var div = document.createElement("div"); 
     div.innerHTML = html; 
     while(div.firstChild) this.appendChild(div.firstChild); 
    }; 
} 
DocFragment.prototype = document.createDocumentFragment(); 

var doc = new DocFragment(); 
doc.addHTML("<b>after</b><i>list</i>"); 

그러나 나는 this.appendChild 줄에 Illegal Invocation 오류가 발생했습니다. 호스트 객체를 확장하는 것이 좋지 않다는 것을 알고 있습니다. 왜이 오류가 나타나는 지 궁금합니다. function addHTML(doc, html) 같은 일부 함수에 전달하는 것 외에도 DocumentFragment에 몇 가지 메서드를 추가하는 다른 적절한 방법이 있습니까?

Answer 1

document.createDocumentFragment()과 new DocumentFragment() 사이의 차이는 다소 차이가 있습니다. document.createDocumentFragment() 복사 할 수없는 불투명 초기화가 수행됩니다.

function addHTML(doc, html) 같은 일부 기능에 전달 옆에 DocumentFragment에 몇 가지 방법을 추가 할 수있는 다른 적절한 방법이 있나요?

function DocFragment() { 
    this.fragment = document.createDocumentFragment(); 
} 

DocFragment.prototype.addHTML = function (html) { 
    // Use this.fragment 
}; 

// Copy properties and methods as necessary 

이 addHTML(doc, html)을 정의하는 것은 (래퍼)

DocumentFragment.prototype.addHTML = function (html) { 
    // … 
}; 

당신은 또한 "jQuery를 접근 방식"을 수행 할 수 있습니다

당신은 잘 프로토 타입을 확장 할 수 있습니다, 문자 그대로를 촬영하려면 이 두 가지보다 훨씬 더 깨끗합니다.

Answer 2

DocumentFragment의 프로토 타입을 직접 확장 해 볼 수 있습니다. // perfectionkills : [이 링크] (HTTP에 따르면

var DocFragment = _(DocumentFragment).extend();