在面向对象编程时, 事件处理函数是避免不了的，如果在此过程中使用了jQuery函数库的话，this 就会发生冲突

比如：在点击事件中

var pro = {
    $div: null, // 保存div
    count: 0,
    init() { // 初始化方法
        this.$div = $("#div"); // 获取div保存在$div中
        // 为$div绑定点击事件
        this.$div.click(function () {
            console.log(this.count++);
        });
    }
}
pro.init();

运行之后点击div元素，此时发现，log输出的不是我们期待的数字 1 ·····
而是 —— NaN

• 为什么回这样呢？
  可以确定的是click事件没有问题，那么问题在哪呢？
  事件处理函数中只有一句 this.count++ ，可以先在这里下手找问题
  首先需要确定 this.count++ 中的 this 的指向，
  在函数内打印一下

this.$div.click(function () {
    console.log(this);
});

可以看到输出的是 <div id="div"></div> ，说明此时函数中的 this 并不是我们想要的 pro 对象，而是指向了 .click 前的 div 元素。
那么我们要如何才能在事件处理函数中使用对象的 this 呢？

• 1.在函数外部声明 var that = this; 然后在函数中使用 that.count++ 此时就能获得我们想要的对象 pro 的属性 count 了
• 2.还有一种解决方法就是使用 es5 中函数的 bind 方法，绑定函数中 this 的指向

this.$div.click(function () {
    console.log(this); // => 经过$()封装后的对象pro
}.bind(this));

还有一个问题就是：如果我们要使用 .click 前的 div 对象了怎么办？

在函数中有个参数 e ，这个参数是指事件 event，里面有个属性叫 target，这个属性就是出发事件的事件源(此处指的就是 div 对象了)

this.$div.click(function (e) {
    console.log(e.target); // => <div id="div"></div>
}.bind(this));

写在最后：关于 this 这个问（东）题（西）很多人都迷茫，不知晓其指向，代表的是什么，但如果弄清楚并且可以熟练使用它的时候，你就会发现 this 其实很友好(?)
在面向对象编程的很多情况下，会出现与我们所期待的结果不同，这个时候需要慢(快)慢(速)的找到问题源头，解决它