2011-10-16 3 views
1

최근에 JavaScript의 빌드 개체 기능에 대한 바로 가기를 작성하려고했습니다.JavaScript 개체 바로 가기

는 여기있다 :

function changeit(){ 
    var ge = getElementsByTagName() , doc = document; 
    doc.ge('div')[0].innerHTML = 'Changed'; 
} 

나는 그것이 작동 실제로 것 thoughy하지만하지 않았다. 그것을 작동시키는 방법이 있습니까? var 이름으로 내장 객체 함수를 호출하면 모든 브라우저에서 작동합니까?

답변

4

기능 getElementsByTagName를 작성할 수 있습니다. 당신은 document의 속성으로 액세스해야하지만 그렇다하더라도, 당신은뿐만 아니라 document에 대한 참조를 저장해야합니다 :

var ge = document.getElementsByTagName.bind(document); 

을 또는, 당신은 문자열로 이름을 절약 할 수있다 :

var ge = 'getElementsByTagName'; 

은 그럼 당신은 할 수 있습니다 : obj.foo 같다

document[ge]('div')... 

obj['foo'] 때문입니다.

+0

내가 찾고있는 것이 맞습니다! 당신이 나를 도우려는 위대한, 두 번째 시간! 감사. –

+2

['Function.prototype.bind'] (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind)는 ECMAScript 5 (JavaScript 1.8.5) 이후에만 사용할 수 있습니다. – Gumbo

7

이 :

var ge = getElementsByTagName() 

전화 기능, 또는 시도합니다. 그 이름으로 전역 함수가 없으므로 작동하지 않습니다. 마찬가지로,

doc.ge('div') 

시도도 존재하지 않는다 "문서"의 "GE"속성을 찾을 수 있습니다; 방금 "ge"를 "doc"의 속성이 아닌 지역 변수로 선언했습니다. 당신이 짧은 이름을 원하는 경우

, 그냥 같은 것을 할 :

function ge(tagName) { return document.getElementsByTagName(tagName); } 

이 그럼 당신은 거의 존재하지 않는

ge('div')[0].innerHTML = 'Changed'; 
1

당신은 당신이라는 변수를 생성한다 코드에 무엇을 ge, getElementsByTagname()의 결과를 가져옵니다. 기본적으로 윈도우 객체의 속성을 선택하기 때문에 실제로는 변수에 window.getElementByTagName()을 할당하려하지만 윈도우 객체에는 이러한 속성이 없습니다. 그래서 당신은 그것을 대체합니다.

이제 두 번째 문제는 메서드 개체 자체 대신 메서드를 호출 한 후 반환 된 값을 할당하는 것입니다. 그래서 ge = document.getElementsByTagName()ge = getElementsByTagName

이되어야합니다. 그런 다음 실제로는 문서 인 doc라는 다른 개체를 만듭니다. 그러나 문서에는 ge라는 속성이 없으므로 문서 객체의 속성을 만든 적이 없습니다.여기에 내가 코드를 재 작성 할 방법은 다음과 같습니다

function changeIt(){ 
    var doc = document; 
    //this line works, because doc doesn't get a copy of the document object but a reference to it 
    //so changing document changes doc. 
    document.ge = document.getElementsByTagName; 
    doc.ge('div')[0].innerHTML = 'Changed'; 
} 
+0

예, 지금 다른 오류를 만들었습니다. – bigblind

0

당신은 어떤 객체 속성에 대한 포인터를 보유하고 변수를 설정할 수 있습니다 당신이 그것을 사용해야하는 경우

var gEBTN = document.getElementsByTagName; 
var gEBI = document.getElementById; 

, 당신은 gETBN('div')...를 입력 할 필요를 또는 gEBI('elementId')... 귀하의 경우 :

function changeIt() { 
    var ge = document.getElementsByTagName; 

    ge('div')[0].innerHTML = 'Changed'; 
} 

여러 후크 체인을 입력 긴 명령을 피하기 이의를 제기 할 수 있으며, aswell의 값을 변경 (결과를 볼 수있는 JS 콘솔에 아래의 발췌를 입력) 할 수 있습니다

을 INSIDE 변경 SAME SCOPE

var originalObject = { 
    deepProperty: { 
    deepDeepProperty: { 
     someNumber: 0, 
     anotherNumber: 0, 
     someString: 'String', 
     anotherString: 'String', 
     someArray: ['a', 'b'], 
     anotherArray: ['a', 'b'] 
    } 
    } 
}; 
var hookA = originalObject.deepProperty; 
var hookB = originalObject.deepProperty.deepDeepProperty; 

hookA.siblingProperty = hookA; 

hookB.someNumber = 1; 
hookB.anotherNumber++; 

hookB.someString = 'Strong'; 
hookB.anotherString.replace(/i/, 'o'); 

hookB.someArray = ['b', 'c']; 
hookB.anotherArray.shift(); 
hookB.anotherArray.push('c'); 

console.log(originalObject); 
console.log(hookA); 
console.log(hookB); 

console.log(hookA === originalObject.deepProperty); 
console.log(hookB === originalObject.deepProperty.deepDeepProperty); 

ON ONE 변화 FUNCTION

var originalObject = { 
    deepProperty: { 
    deepDeepProperty: { 
     someNumber: 0, 
     anotherNumber: 0, 
     someString: 'String', 
     anotherString: 'String', 
     someArray: ['a', 'b'], 
     anotherArray: ['a', 'b'] 
    } 
    } 
}; 

function changeOriginalObject(obj) { 
    var hookA = obj.deepProperty; 
    var hookB = obj.deepProperty.deepDeepProperty; 

    hookA.siblingProperty = hookA; 

    hookB.someNumber = 1; 
    hookB.anotherNumber++; 

    hookB.someString = 'Strong'; 
    hookB.anotherString.replace(/i/, 'o'); 

    hookB.someArray = [ 
    'b', 
    'c' 
    ]; 
    hookB.anotherArray.shift(); 
    hookB.anotherArray.push('c'); 
} 

console.log(originalObject); 

changeOriginalObject(originalObject); 

console.log(originalObject);