Метод цепочки с использованием javascript не работает?

Question

Im пытается получить метод цепочки работать с использованием JavaScript:

(function(){ 
    var first = function(){ 
     console.log("1st Chain"); 
     return this; 
    }; 

    var second = function(){ 
     console.log("2nd Chain"); 
    } 

    first().second(); 
})(); 

Только первый функция печати на консоли, но вторая функция говорит его неопределенными. Однако, когда я пытался использовать конструктор, он работает.

var Chaining = function(){ 
    this.first = function(){ 
     console.log("1st Chain"); 
     return this; 
    }; 

    this.second = function(){ 
     console.log("2nd Chain"); 
    }; 
}; 

var chain = new Chaining; 
chain.first().second(); // this works fine. 

Answer 1

В первой цепи this связан с окном и, следовательно, second не видна (undefined в этой области видимости).

(function(){ 

    var first = function(){ 
     console.log("1st Chain"); 
     console.log(this); 
     return this; 
    }; 

    window.second = function(){ 
     console.log("2nd Chain"); 
    } 

    first().second(); 
})(); 

Чтобы избавиться от экспорта глобального объекта окна второй функции, вы можете использовать объект, который виден только в области анонимной функции.

(function(){ 

    var Chain = {}; 

    Chain.first = function(){ 
     console.log("1st Chain"); 
     console.log(this); 
     return this; 
    }; 

    Chain.second = function(){ 
     console.log("2nd Chain"); 
     return this; 
    } 

    // example 
    Chain.first().second().first(); 

    // example export 
    // window.Chain = Chain; 

})(); 

Если вы хотите цепи в другой области, вы можете экспортировать ваши Chain в окно и использовать его без нового, то есть. Chain.first().second();.

Вы также можете сохранить указатель на это (как указал Джонатон):

(function(){ 

    var self = this; 

    this.first = function(){ 
     console.log("1st Chain"); 
     console.log(this); 
     return self; 
    }; 

    this.second = function(){ 
     console.log("2nd Chain"); 
     return self; 
    } 

    // example 
    first().second().first(); 

    // export example 
    // window.Chain = self; 
})(); 

// exported anonymous function to Chain  
// Chain.first().second(); 

Сохранение указатель на this иногда необходимо, потому что это ключевое слово является сфера меняется, и относится к контексту выполненная функция. this не относится к экземпляру объекта, где используется this, как и в Java.

Каждая функция может поэтому связываться с другой областью. Чтобы настроить контекст функции, используйте bind, apply and call.

Answer 2

Когда вы используете в контексте глобального объекта, вы делаете глобальные переменные и уничтожаете их, если они уже существуют. В случае сомнений, журнал , и если это глобальный объект ...

Не делайте этого.

Вот вариант, который получает вам поведение, которое вы ищете:

var chaining = function() { 
    return { 
    first: function() { 
     console.log("first()"); 
     return this; 
    }, 
    second: function() { 
     console.log("second()"); 
    }, 
    all: function() { 
     this.first().second(); 
    } 
    } 
}; 

chaining().all(); 

var chain = chaining(); 
chain.first().second(); 

Это выводит first(), second(), first(), second(), как вы, наверное, и следовало ожидать. Это связано с тем, что используется в контексте объекта, возвращаемого вызовом chaining().

More information and good reading about this

Answer 3

(
    function(){ 
    var that = this; 

    this.first = function() { 
     console.log("1st Chain"); 
     return that; 
    }; 

    this.second = function() { 
     console.log("2nd Chain"); 
     return that; 
    } 

    first().second(); 
    }() 
);