理解'；这'；和'$(本)及"x27 ;；在jquery插件中

在上面的代码中，我无法理解关于使用“this”和“$（this）”的问题

让我们看看我通过如下更改代码试图理解的内容：

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
        }
    });
};

我也尝试了很多：

//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
        }
    });
};

哎呀！两种代码都不起作用

---

任何人都可以有更好的方法来澄清我关于第一个代码如何工作的概念吗？

它不会工作，因为

$（这个）

将指向

您为其创建的
插件
而不是
窗口对象

从您的工作代码中，您希望
滚动
您的
窗口
而不是
jquery您的选择器

如果你尝试

//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
        }
    });
};

希望上述代码能够正常工作

阅读
插件中的“this”指的是你调用插件的选择器&$（this）指的是jQuery对象。在任何函数/插件之外，这指的是窗口对象。在这个插件中，滚动函数调用了窗口滚动来运行一些代码。在更改后的代码中，您将引用一些没有滚动事件的元素，因此您的代码无法工作。
在JavaScript中，“this”通常指“拥有”该方法的对象，但它取决于函数的调用方式

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

调用对象构造函数或其任何方法时，“this”指的是对象的实例，与任何基于类的语言非常相似：

在代码中：

$.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
        }
    });
};

在插件中，它们将是相同的-插件函数调用的左侧。如果执行
$（'.blah'）.followTo（…）
，则在
followTo（）
内部，此
的值将是与选择器
匹配的jQuery列表。定义“不起作用”。JS调试器是怎么说的？但是如果我在每个人身上都改成$（this）…就不起作用了---我知道这和$（this），但是在我上一次尝试的代码中，我把它改成了$（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
        }
    });
};

<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> 

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