Question

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this,$window = $(windw);
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            //if condition 
        } else {
            //else condition
        }
    });
};

在上面的代码中，我无法理解有关使用'this'和'$（this）'

的问题

通过更改代码来看看我试图理解的内容：

//var windw = this;
$.fn.followTo = function ( pos ) {
   // var $this = this,$window = $(windw); // as far as I understand $window becomes $(this)
    $(this).scroll(function(e){
        if ($(this).scrollTop() > pos) {
            //if condition
        } else {
            //else condition
        }
    });
};

我也尝试过这么多：

//var windw = this;
$.fn.followTo = function ( pos ) {
   // var $this = this,
      //  $window = $(windw);
    this.scroll(function(e){
        if (this.scrollTop() > pos) { // also tried $(this) here
            //if condition
        } else {
            //else condition
        }
    });
};

糟糕！这两个代码都不起作用！

任何人都可以有更好的方式来清除我对第一个代码如何工作的概念吗？

Answer 1

它无效，因为$(this)会指向您创建的your jquery selector而不是plugin

的window object

根据您的工作代码，您希望scroll window而不是jquery your selector。

如果你试试，

$.fn.followTo = function ( pos ) {
    $(window).scroll(function(e){// here scroll applied on window
        if ($(this).scrollTop() > pos) {// now this refers to window
            //if condition 
        } else {
            //else condition
        }
    });
};

希望以上代码能够正常运作。

阅读How to create basic plugin in jQuery

Answer 2

在插件中＆＃39;这个＆＃39;指你选择插件的选择器＆amp; $（this）引用为jQuery对象。在任何函数/插件之外，这指的是window对象。并且在这个插件滚动函数中调用窗口滚动来运行一些代码。在您更改的代码中，您将引用一些没有滚动事件的元素，因此您的代码无效。

Answer 3

在JavaScript中，'this'通常是指'拥有'该方法的对象，但它取决于函数的调用方式。

如果没有当前对象，'this'指的是全局对象。在Web浏览器中，这是“窗口” - 顶级对象，它表示文档，位置，历史记录以及一些其他有用的属性和方法。

当调用对象构造函数或其任何方法时，“this”指的是对象的实例 - 就像任何基于类的语言一样：

你的代码中的

：

var windw = this; // there’s no current object, ‘this’ refers to the global object. ie, window.

$.fn.followTo = function ( pos ) {
    // now this referes to the scope instance of $.fn.followTo which is not window
    var $this = this,$window = $(windw);
    $window.scroll(function(e){
        // inside this closure this referes to the instace of this closure function which is not window
        if ($window.scrollTop() > pos) {
            //if condition 
        } else {
            //else condition
        }
    });
};

Answer 4

<ul class="swapify">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="swapify">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$。fn.greenify = function（）{ / **这里指的是应用插件的JQuery对象，它有一个原型，所有jQuery方法都可以由你的元素继承（比如css）。由于它已经是一个jQuery对象，因此无需在$（）中对其进行双重包装。但是，$（this）也可以使用，但不是必需的。 * /

this.each(function(index, element){
   /** Here this is the same as element, it is a plain javascript dom object.  */
    console.log(this);
    console.log(element);
    /** Below line will cause error, because this means a plain javascript dom object hence it doesn't have css method. */
    //this.css("color","red"); 
      /** Below line will work well , since you have wrapped a jquery object. */
    $(this).css("color","red");
});
//  this.css( "color", "green" );
//console.log(this);// you will see a jQuery object in the console
};

$( "li" ).greenify();

在jquery插件中理解'this'和'$（this）'

4 个答案: