2013-05-17 2 views
0

훨씬 작은 플러그인을 위해 jQuery 구문을 모방하려고했습니다. 나는 한동안 내부적으로 $ 객체의 메서드를 사용하는 데 어려움을 겪었습니다. 나에게 설명하자Javascript 프레임 워크는 실제로 내부적으로 메소드를 호출 할 수 없습니다.

(function() { 
    window.$ = function (element) { 
     return new Plugin(element); 
    }; 

    var Plugin = function (element) { 
     this.element = element; 
    }; 

    Plugin.prototype = { 
     foreach: function(callback) { 
      // Of course the "foreach" function will be bigger than this, this is just for testing. 
      var values = []; 
      for (i = 0; i < this.element.length; i++) { 
       values[i] = callback.call(this, this.element[i], i); 
      } 

      return values; 
     }, 
     someOtherFunctionThatUsesForeachInternally: function() { 
      var arr = []; 
      $([6, 32, 2]).foreach(function(item, key) { 
       arr[key] = item + 7; 
      }); 
      return arr; 
     } 
    }; 
})(); 

/* Desired result: 
[ 
    [13, 39, 9], 
    [13, 39, 9], 
    [13, 39, 9], 
    [13, 39, 9] 
] 
*/ 

var arr = [1, 5, 7, 9]; 
var test = []; 

$(arr).foreach(function(value, key) { 
    test[key] = this.someOtherFunctionThatUsesForeachInternally(); 
}); 

console.log(test); 

새로운 플러그인 개체가 달러 기호 (예에서이 var arr = [1, 5, 7, 9]을 것, 배열과 같은) 인수와 함께 사용될 때마다 인스턴스화 및 방법은 immediatly 그 후라고합니다 .

테스트 할 작은 foreach을 썼지 만 프레임 워크의 함수에서 호출하는 것이 불가능한 것 같습니다. 맨 끝에있는 console.log(test);은 var arr의 각 요소에 대해 수행하는 대신 [[13, 39, 9]]를 출력합니다. foreach가 내부적으로 호출 될 때 this이 덮어 쓰기되기 때문입니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 전역 범위에서 선언했기 때문에 당신의 foreach 방법

답변

1

for 루프의 인덱스 (i는) 덮어 쓰기되고있다. 항상 변수를 선언 var를 사용

for (var i = 0; i < this.element.length; i++) { 
    values[i] = callback.call(this, this.element[i], i); 
} 

DEMO :http://jsfiddle.net/QhXa7/

+0

젠장! 매우 단순한 – user2180613

+0

@ user2180613 찾을 고통 : 모든게 좋게 보였다. 그래서 나는 그것이 효과가 없을 것이라고 이해하지 못했다. 그런 다음 무작위로'var'이 없다는 것을 깨닫고 추가하고 다시 시도해 보았습니다. :) – Ian

+1

JShint를 통해 코드를 버리는 습관을 가지면 버그가 발생하기 전에 버그를 잡을 수 있습니다. 실제 문제. – Racheet

관련 문제