변수를 동적으로 선언하기

Question

이 프로젝트는 내 자신을위한 것일 뿐이므로이 작업을 수행하기 위해 다른 라이브러리를 실제로 찾지는 않습니다. 나는 HTML 요소 라이브러리를 만들려고 노력 해요 :

var ElementLibrary = function() {}; 
(function() { 
    var _concatArray = [,'Element']; 
    var _varArray = [ 
     'html', 
     'head', 'title', 'base', 'link', 'meta', 'style', 
     'script', 
     'body', 'section', 'nav', 'article', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hgroup', 'header', 'footer', 'address', 'main', 
     'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'figure', 'figcaption', 'div', 
     'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr', 
     'ins', 'del', 
     'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio', 'source', 'track', 'canvas', 'map', 'area', 'svg', 'math', 
     'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 
     'form', 'fieldset', 'legend', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea', 'keygen', 'output', 'progress', 'meter', 
     'details', 'summary', 'command', 'menu' 
    ]; 
    var _l = _varArray.length; 
    for (var i = 0; i < _l; i++) { 
     _concatArray[0] = _varArray[i]; 
     ElementLibrary.prototype[_concatArray.join('')] = document.createElement(_varArray[i]); 
     ElementLibrary.prototype[_varArray[i]] = function() { 
      return this[_concatArray.join('')].cloneNode(false); 
     }; 
    } 
})(); 

내가 원래는 400 선에서 끝났다, 그래서 더 컴팩트 한 방법으로 그것을하고 싶었을 것이다 쓰기 시작했다 방법. 희소식, 그것은 부분적으로 작동한다. 내가하는 경우 :

var el = new ElementLibrary(); 
el.pElement // <---that is correctly a paragraph element 

그러나 실제로 의도 한 용도는 아닙니다. 내가 좋아하는 하나의 프로토 타입 재산 떨어져 얕은 복제를 얻으려면 : 내 ElementLibrary 기능 중 하나가 호출하면

var el = new ElementLibrary(); 
el.p() // <---this is where I run into trouble 

, 그것은 단지 내 배열 (이 경우 메뉴)에서 마지막 요소를 반환합니다. 속성이 모두 올바르게 선언 된 경우 모든 함수가 마지막 요소 만 반환하는 이유는 무엇입니까?

편집 : fiddle을 추가하고 _concatArray 비즈니스를 꺼 냈습니다.

솔루션 :

var ElementLibrary = function() {}; 
(function() { 
    var _varArray = [ 
     'html', 
     'head', 'title', 'base', 'link', 'meta', 'style', 
     'script', 
     'body', 'section', 'nav', 'article', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hgroup', 'header', 'footer', 'address', 'main', 
     'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'figure', 'figcaption', 'div', 
     'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr', 
     'ins', 'del', 
     'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio', 'source', 'track', 'canvas', 'map', 'area', 'svg', 'math', 
     'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 
     'form', 'fieldset', 'legend', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea', 'keygen', 'output', 'progress', 'meter', 
     'details', 'summary', 'command', 'menu' 
    ]; 
    var _l = _varArray.length; 
    for (var i = 0; i < _l; i++) { 
     var _temp = _varArray[i]; 
     var _tempElement = _temp + 'Element'; 
     (function(t, te) { 
      ElementLibrary.prototype[te] = document.createElement(t); 
      ElementLibrary.prototype[t] = function() { 
       return this[te].cloneNode(false); 
      }; 
     })(_temp, _tempElement); 
    } 
})(); 

var el = new ElementLibrary(); 
alert(el.p()); 

Answer 1

는 "_concatArray"의 "동결"버전을 참조하지 않는 루프에서 만드는 기능을한다. 그들은 모두 동일한 배열에 대한 참조를 공유합니다.

또 다른 기능에서 그들을 감싸 : 그것은 ** 많은 ** 덜 이상한 단순히 속성 이름 ('_varArray [I] + "요소를 형성하기 위해 문자열 연결을 사용하는 것처럼

ElementLibrary.prototype[_varArray[i]] = (function(ca) { 
    return function() { 
    return this[ca.join('')].cloneNode(false); 
    }; 
})(_concatArray);