我是谁-jQuery，插件，$ this，$（this），this，访问变量

Question

我在确定运行该功能的对象时遇到问题

<div id="test1">lorem</div>
<div id="test2">ipsum</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#test1').plugin(); //alert: I am test1
        $('#test2').plugin(); //alert: I am test2

        $('#test1').plugin.fun(); //alert: I am undefined and I am undefined
        $('#test2').plugin.fun(); //alert: I am undefined and I am undefined
    });
    (function($) {
        $.fn.plugin = function() {
            $this = $(this);
            alert('I am '+$(this).attr('id'));//<-- it works
        }
        $.fn.plugin.fun = function() {
            alert('I am '+$(this).attr('id')); //<-- doesn't work!
            alert('and I am '+$this.attr('id')); //<-- also doesn't work!
        }
    })(jQuery);
</script>

Answer 1

了解什么$('#test1').plugin.fun(); 是干什么的，我们来看看如何this是JavaScript函数内。 我们将从理论开始，然后回到您的插件。

在JavaScript中， this完全由调用函数的方式定义。 最常见的方法是将其设置为从对象属性调用函数的副产品：

var foo = {
    msg: "I'm foo!",
    bar: function() {
        alert(this.msg);
    }
};
foo.bar(); // alerts "I'm foo!"

那一行foo.bar(); 做三件事：

1. 它从foo对象检索bar属性。
2. 它调用属性引用的函数。
3. 它＃2以这样的方式， this是指foo 。

（更多信息： 神话方法 。）

所以在通话中

$('#test1').plugin.fun();

...... this中fun将是plugin ，因为我们调用fun通过一个属性plugin 。

您可能会考虑使用jQuery UI所使用的机制，即通过主函数使用名称作为字符串来访问插件的“方法”。 例如，在jQuery UI Draggable实例上，您可以调用如下方法：

$('#test1').draggable('disable');

有关更多示例，请参Draggable文档 ，但基本上您的调用将如下所示：

$('#test1').plugin('fun');

---

有关函数调用的更多信息：

还有另外一种方式来设置this ，调用函数：通过call和apply上的功能实例的功能：

var f = function() {
    alert(this.msg);
};
var foo = {
    msg: "I'm foo!"
};
f.call(foo);  // alerts "I'm foo!"
f.apply(foo); // alerts "I'm foo!" too

call并apply调用一个函数， this值设置为传递给它们的第一个参数。 call和apply之间的区别是如何将参数传递给目标函数。 使用call ，您只需向call函数添加更多参数即可； 使用apply ，将给出一个参数数组作为apply的第二个参数。 例子：

function f(arg1, arg2) {
    alert(this.msg + " (" + arg1 + ", " + arg2 + ")");
}
var foo = {
    msg: "I'm foo!";
};
f.call(foo, "one", "two");    // Alerts "I'm foo! (one, two)"
//          ^-- "one" and "two" are discrete arguments
f.apply(foo, ["one", "two"]); // Alerts the same thing
//           ^------------^-- "one" and "two" are in an array

Answer 2

fun函数与您在调用中使用的对象没有任何直接关系，因此this将只是window对象。

当使用$('#test1').plugin ，您将获得对该函数的引用，并从中访问函数fun ，但是得到的只是一个常规函数。 您也可以使用$.fn.plugin.fun来访问该函数，一旦获得对fun函数的引用，将jQuery对象与选择器一起使用就根本不相关。

jQuery对象实际上将在调用fun函数之前被丢弃，因此无法从该函数到达它。