jQuery：这个简单的片段是如何工作的（下拉菜单）？

Question

代码：

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.dd.on('click', function (event) {
            $(this).toggleClass('active');
            event.stopPropagation();
        });
    }
}

$(function () {
    var dd = new DropDown($('#dd'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown-2').removeClass('active');
    });
});

http://jsfiddle.net/ttbvqa0z/
original source（#示例 2）

总的来说，到目前为止我的理解是
（但我还是想知道这是不是真的）：

var dd = new DropDown( $('#dd') );是自执行函数（jQuery 样式)
var dd = new DropDown( $('#dd') ); 执行函数 DropDown(el)
el 在这种情况下等于 #dd
this.dd = el 等于 #dd.dd = #dd
this.initEvents()继承自函数的原型，因此可以被dd对象执行

问题：

为什么会有 var obj = this 的目的是什么？（在原型中）
this 指的是什么？
（我想它是保存的引用所以它不会每次都被执行但我不知道那个原型的 this 指的是什么）
为什么会有obj.dd.on？
(#dd.#dd.on?)
如果函数继承原型的属性，那么为什么使用以下内容无效：obj.dd = el 而不是 this.dd？

Answer 1

老实说，我们不需要保留这个。

首先 this ( obj = this) 指的是 Dropdown obj 而 this 在点击事件中指的是 jquery obj $('#dd') 或obj.dd.

enter link description here

jQuery：这个简单的片段是如何工作的（下拉菜单）？

jQuery: how does this simple snippet work (dropdown)?

javascript

jquery

drop-down-menu

this