2011-10-11 4 views
15

는 다음과 같은 기능을 상상할 수 있습니다 : 나는 다른 기능을 가진 체인 방식의 기능을 만들 수있는 방법을 찾고 있어요JavaScript에서 체인 가능한 함수를 만드는 방법은 무엇입니까?

var x, y; 
x = 'Notepad'; 
y = foo(x); 
console.log(y); // Prints 'Notepad+'. 

:처럼의

function foo(x) { 
    x += '+'; 
    return x; 
} 

사용이 될 것입니다.

상상해 사용 :

var x, y; 
x = 'Notepad'; 
y = x.foo().foo().toUpperCase(); // Prints 'NOTEPAD++'. 
console.log(y); 

어떻게 이런 짓을 했을까?

답변

14

물론, 트릭은 당신이 그것을 수정 완료되면 개체를 반환하는 것입니다. 그러나 속성을 열거 할 때 문제가 발생할 수 있으므로 Object에서이 작업을 수행하지 않도록주의하십시오.

+3

추가하기 전에 네이티브 유형의 속성을 확인하는 것이 좋습니다. 즉, if (String.prototype의! foo) {String.prototype.foo = function() {.. .}}' – keeganwatkins

+0

열거 형을 깨지 않고 개체를 확장하려면 (semi-modern) ['Object.defineProperty'] (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/)를 사용하십시오. Object/defineProperty) :'Object.defineProperty (String.prototype, {value : function() {return this + ";}})' 기본적으로'enumerable' 플래그는'false'로 설정됩니다. – Phrogz

+0

@keeganwatkins 예 예 :). 나는 OP가 예를 들어 문자열에 대해서만 묻기 때문에 경고를 최소한으로 유지했다. 그러나 그것은 좋은 지적이다. –

6

올바르게 기억하면 "this"를 함수의 컨텍스트 (해당 객체가 속한)의 컨텍스트로 사용하여 반환하여 함수를 연결 가능하게 만들 수 있습니다. 즉 :

var obj = 
{ 
    f1: function() { ...do something...; return this;}, 
    f2: function() { ...do something...; return this;} 
} 

은 다음 obj.f1().f2()

같은 호출을 명심 체인 수, 당신은() obj.f1 호출하여 기대하고 무엇을 달성 할 수 없습니다를 toUpperCase(). - f1()을 실행하고 "this"를 반환하고 obj.toUpperCase()를 호출하려고 시도합니다. ,

String.prototype.foo = function() { 
    return this + "+"; 
} 

var str = "Notepad"; 
console.log(str.foo().foo().toUpperCase()); 

http://jsfiddle.net/Xeon06/vyFek/

String의 방법을 사용할 수있게하려면 나는 프로토 타입의 수정 해요 :

관련 문제