개체의 복제본을 만들면 오류 메시지가 표시됩니다.

Question

먼저 다음 코드는 내 자신의 JavaScript 라이브러리입니다.

(function() { 
    var lib = { 
     elems: [], 
     getElem: function() { 
      var tmpElem = []; 
      for (var i = 0; i < arguments.length; i++) 
       tmpElem.push(document.getElementById(arguments[i])); 
      this.elems = tmpElem; 
      tmpElem = null; 
      return this; 
     }, 
     html: function(txt) { 
      for (var i = 0; i < this.elems.length; i++) 
       this.elems[i].innerHTML = txt; 
      return this; 
     }, 
     style: function(prob, val) { 
      for (var i = 0; i < this.elems.length; i++) 
       this.elems[i].style[prob] = val; 
      return this; 
     }, 
     addEvent: function(event, callback) { 
      if (this.elems[0].addEventListener) { 
       for (var i = 0; i < this.elems.length; i++) 
        this.elems[i].addEventListener(event, callback, false); 
      } else if (this.elems[0].attachEvent) { 
       for (var i = 0; i < this.elems.length; i++) 
        this.elems[i].attachEvent('on' + event, callback); 
      } 
      return this; 
     }, 
     toggle: function() { 
      for (var i = 0; i < this.elems.length; i++) 
       this.elems[i].style.display = (this.elems[i].style.display === 'none' || '') ? 'block' : 'none'; 
      return this; 
     }, 
     domLoad: function(callback) { 
      var isLoaded = false; 
      var checkLoaded = setInterval(function() { 
       if (document.body && document.getElementById) 
        isLoaded = true; 
      }, 10); 
      var Loaded = setInterval(function() { 
       if (isLoaded) { 
        clearInterval(checkLoaded); 
        clearInterval(Loaded); 
        callback(); 
       } 
      }, 10); 
     } 
    }; 

    var fn = lib.getElem; 
    for(var i in lib) 
     fn[i] = lib[i]; 

    window.lib = window.$ = fn; 
})(); 

이전에는이 ​​방법으로 내 자신의 라이브러리를 사용했으며 정상적으로 작동합니다.

$.getElem('box').html('Welcome to my computer.'); 

하지만 내 자신의 라이브러리의 코드를 업데이트, 나는이 방법

$('box').html('Welcome to my computer.'); 

같은 요소 선택기를 사용하고있는 것으로

var fn = lib.getElem; 
for(var i in lib) 
    fn[i] = lib[i]; 

을 추가하지만 문제가 나타날 시작했을 때 추가 lib 객체를 복제하는 업데이트 된 코드 TypeError: $(...).html is not a function.

그리고 지금 난 그냥, 난 당신이 이러한 추가 라인을 달성하기 위해 노력하고 정확히 알 수 없지만

$.getElem('box').html('Welcome to my computer.'); 

Answer 1

"getElem"에 대한 참조가있는 변수 fn을 만들었지 만 fn이 lib 객체의 속성이 아니므로 getElem이 "this"를 참조 할 때 이것이 당신이 될 가능성이 큰 전역 객체가됩니다.

는 모두 다음과 같은 3 선

var fn = lib.getElem; 
for(var i in lib) 
    fn[i] = lib[i]; 

를 제거하고 다음이

window.$ = function() { return lib.getElem.apply(lib, arguments); }; 

이 getElem은 $로 불리는하지만 컨텍스트로 "lib에"유지 될 수 있습니다 않습니다. return this;

$은 그 함수에 대한 참조입니다 : 근본 원인이 getElem() 기능에 있지만

Answer 2

대신 그

$('box').html('Welcome to my computer.'); 

같은 요소 선택기를 사용하려면 코드를 읽으면 lib.getElem에는 html

lib이라는 기능이 없습니다.

따라서 var fn = lib;은 정상적으로 처리되어야합니다.

Answer 3

이 더 많은 방법이를 달성하기 위해. $()으로 전화하면 메소드가 아니라 함수로 호출됩니다. 따라서, this은 window을 나타내고, window은 물론 html() 기능을 갖는다.

return lib;을 사용하여 문제를 해결할 수 있습니다.