기존 객체에 "네임 스페이스"가있는 프로토 타입 사용

Question

다음을 통해 무엇인가를 찾고 있습니다.

HTMLSpanElement.prototype.testNS = { 
    _this: this, 
    testFunc: function() { 
    console.log(this.innerHTML) //undefined as expected as this is the testFunc object 
    }, 
    testFunc2: function() { 
    console.log(this._this) //Window object 
    } 
} 

내 목표는이 경우 스팬 요소에 직접 일부 도우미 기능을 추가하는 것입니다. 내가 가진 경우

그래서, 다음

<span>test</span> 

나는 기능을 유지하는 것이 내가 아는

spanElement.testNS.testFunc() 

를 스팬을 찾아 "테스트"를 반환하려면이 코드를 호출 할 수있는 그것의 범위는 부모입니다 내가 그렇게 할 때 ...

HTMLSpanElement.prototype.testFunc = function() { 
    console.log(this.innerHTML) 
} 

하지만 코드를 좀 더 체계화하고 더 명확하게하려고합니다. 함수를 추가 할 때 함수가오고 범위를 유지할 수있는 방법을 찾지 못하는 것 같습니다. 일반적인 JSON 객체를 사용하면이 범위를 _this: this으로 가져 와서 "window"의 전체 범위를 반환합니다.

Answer 1

면책 조항 : 당신은 내장에 프로토 타입을 수정하려고해서는 안

당신이 게터로 testNS을 구현할 수 testFunc에서 spanElement에 대한 액세스 권한을 얻으려면 - 유형, 특히 호스트 객체 유형. 나쁜 생각이야.

---

당신의 접근 방식은 당신을 위해 작동하지 않는 이유는 기능이 this로 testNS 객체로 호출되고 있다는 점이다.

Object.defineProperty을 사용하여 게터 기능이있는 속성으로 testNS을 정의하면이 기능을 사용할 수 있습니다.

Object.defineProperty(HTMLSpanElement.prototype, 'testNS', { 
 
    get: function() { 
 
    var _this = this; 
 
    return { 
 
     testFunc: function() { 
 
     console.log(_this.innerHTML) 
 
     }, 
 
     testFunc2: function() { 
 
     console.log(_this) 
 
     } 
 
    } 
 
    } 
 
}); 
 
var span = document.getElementById('mySpan'); 
 

 
span.testNS.testFunc(); 
 
span.testNS.testFunc2();

<span id="mySpan">Wah-hoo!</span>

더 "바닐라"접근이 작동하는 이유는 get 기능은 속성 (스팬 될 것이다) 액세스되고있는 객체의 컨텍스트에서 실행한다는 것입니다 testNS을 일반 함수로 사용하고 하나라고 부르는 것입니다.

HTMLSpanElement.prototype.testNS = function() { 
 
    var _this = this; 
 
    return { 
 
    testFunc: function() { 
 
     console.log(_this.innerHTML) 
 
    }, 
 
    testFunc2: function() { 
 
     console.log(_this) 
 
    } 
 
    } 
 
} 
 

 
var span = document.getElementById('mySpan'); 
 

 
span.testNS().testFunc(); 
 
span.testNS().testFunc2();

<span id="mySpan">Wah-hoo!</span>

Answer 2

내가
:-) 상응하는 이상한 솔루션은 기본적으로 createElement와 리터럴 공간 객체를 추가 한 다음 인스턴스를 사용하여 네임 스페이스의 상단에 새로운 기능 testFunc을 정의하기 위해 오버라이드 (override) 된 이상한 요구 사항을 썼다 때문에 당신이 foo.bar()으로 함수를 호출 할 때 함수

!function(){ 
    var defaultNamespace = "testNS"; 
    var createElement = document.createElement; 

    document.createElement = function(tag, namespace) { 
     var element = createElement.apply(document, arguments); 

     element[namespace || defaultNamespace] = { 
      testFunc : function() { 
       console.log(this.innerHTML); 
      }.bind(element) 
     }; 

     return element; 
    }  
}(); 

var span = document.createElement("span"); 

Answer 3

에 바인더 제본 요소의 다음 bar 내부 this는 foo을 의미합니다. 따라서 함수를 spanElement.testNS.testFunc()으로 호출하면 spanElement.testNS은 this을 나타냅니다.

_this: this,this은 <span> 요소를 참조 할 수 없으므로 작동하지 않습니다.

Object.defineProperty(HTMLSpanElement.prototype, 'testNS', { 
 
    get: function() { 
 
    var element = this; 
 
    return { 
 
     testFunc: function() { 
 
     console.log(element.innerHTML); 
 
     }, 
 
    }; 
 
    }, 
 
}); 
 

 
document.querySelector('span').testNS.testFunc();

<span>foo</span>