Question

我试图让方法链接使用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();
})();

要删除导出到第二个函数的全局窗口对象，可以使用仅在匿名函数的范围中可见的Object。

(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();。

您也可以保存指向此的指针（正如Jonathon所指出的）：

(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不引用对象的实例，其中使用this，就像您在Java中所期望的那样。

因此，每个函数都可以绑定到另一个范围。要调整函数上下文，请使用bind, apply and call。

Answer 2

当您在全局对象的上下文中使用this时，您将创建全局变量并在它们已存在时删除它们。如有疑问，请记录this，如果它是全局对象......

不要这样做。

这是一个可以帮助您找到所需行为的选项：

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()。这是因为this用于通过调用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();
  }()
);

使用javascript链接的方法不起作用？

3 个答案: