Jquery插件动态添加输入字段，这是什么

因此，一旦我的插件被调用，我就会添加一个输入字段

function myPlugin ( element, options ) {
        this.element = element;
        this.settings = $.extend({}, $.fn.myPlugin.defaults, options );
        this.init();
        this.setUpSearchField()
}

// Avoid Plugin.prototype conflicts
$.extend(myPlugin.prototype, {
        init: function () {
            if ($.isFunction(this.settings.onInit())) {
                this.settings.onInit();
            }
        },
        setUpSearchField: function () {
        //Adding Input Field to Div
        var self = this;
        this.$searchField = $("<input/>", {
            id: 'control'
        })
        .appendTo(this.element)
        .focus(function () {
            self.$searchField.val("");
        })
        }
});

但如果我一开始试着这么做

this.$searchField.val("");

我收到一个错误，上面写着“this.$searchField未定义”。如果有人可以解释的话，我不理解这种情况下的区别？

在$.extend块中，这将引用参数中的对象，而在焦点事件处理程序中，这将引用引发事件处理程序的元素

为了停止它们之间的歧义，在父对象中，这将存储到自变量中，以便可以在事件处理程序中引用它

举例说明：

$.extend(myPlugin.prototype, {
    // this = the object
    var self = this;

    $('#foo').focus(function () {
        // this = the #foo element
        // self = the object
    });
});

---

我现在明白了，我想我也可以像这样走$this.removeAttr'style.val；

$.extend(myPlugin.prototype, {
    // this = the object
    var self = this;

    $('#foo').focus(function () {
        // this = the #foo element
        // self = the object
    });
});