0

我正在研究如何制作 jquery 插件。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>JS Study</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function($, undefined) {
    function MyPlugin() {
        this.myoption = "myvalue";
    }

    $.extend(MyPlugin.prototype, {
        _attachMyPlugin: function(target, settings) {
            console.log(this); // check2
        }
    });

    $.fn.myPlugin = function(options) {
        console.log(this); // check1
        $.myPlugin._attachMyPlugin(this, options);
        return this;
    };

    $.myPlugin = new MyPlugin(); // singleton instance
}(jQuery));
$(document).ready(function(){
    $("#abc").myPlugin();
});
</script>
<h1 id="abc">title1</h1>
</body>
</html>

我不知道为什么this调用_attachMyPlugin() 时值会发生变化。在 check1this似乎只引用一个 jQuery 对象。这对我来说似乎并不奇怪。但是在 check2 'this' 似乎是指 MyPlugin 对象。为什么？

this关键字的引用对象可以在没有new运算符或调用.apply()/.call()函数的情况下更改吗？如果是，为什么？

这是 Chrome 控制台的结果。

[h1#abc，上下文：文档，选择器：“#abc”，jquery：“1.9.1”，构造函数：函数，初始化：函数...] w.html：21 MyPlugin {myoption：“myvalue”，_attachMyPlugin：函数} w.html:16

4

3 回答 3

1

通常在函数内部， this 的值是调用函数的对象：

var a = {
  b : { 
    c : function() {
      console.log(this);
    }
  }
};

a.b.c() // this will be a.b

var d = {};
d.e = a.b.c;

d.e() // this will be d

var f = a.b.c;

f() // this will be the global object (usually window) or undefined (strict mode)

显然call并apply允许您覆盖它并将其他对象传递给函数。还有一个值得注意的例外：bind. Bind 创建一个新函数，该函数总是在传递给 bind 的对象上调用。它通过使用apply（查看 MDN 以获取近似实现）来完成此操作。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

应用于您的代码：

$("#abc").myPlugin(); // check1 this is $("#abc")

$.myPlugin._attachMyPlugin(this, options); // check2 this is $.myPlugin (which is an instance of MyPlugin)
于 2013-11-14T15:13:53.513 回答
0

this仅当函数与 .apply 或 .call 一起使用时，如果它是一个事件，或者如果它脱离上下文（稍后会详细介绍），它才会更改。

例如，我们有这样的代码：

var foo = {
    myFunction: function(){
        console.log(this);
    },
    bar: "foobar"
}

只要我们myFunction作为属性执行foo而不是应用或调用，this就会是foo.

foo.myFunction(); // foobar
foo.bar = "Hello World!";
foo.myFunction(); // Hello World!

现在，如果我们绑定一个 click 事件并将它的处理程序设置为foo.myFunction,this将成为元素。

$("#abc").click(foo.myFunction); // HTMLDomNode (after a click)

现在，如果您存储foo.myfunction在另一个变量中然后执行它，this那么它将是窗口，因为它的引用不再是foo.

var bar = foo.myFunction;
bar(); // window

演示：http: //jsfiddle.net/9V9S7/

于 2013-11-14T15:07:57.203 回答
0

$.myPlugin - MyPlugin 类的实例。_attachMyPlugin() 方法属于 MyPlugin 实例。当您调用此方法时，“this”指向 $.myplugin 对象。当你调用 $.fn.someFunction 时，"this" 指向 jQuery 对象，$("#abc")

于 2013-11-14T15:08:27.283 回答