sponsored links

面向对象编程(OOP)中 jQuery,事件处理函数的this,以及对象this的问题

在面向对象编程时, 事件处理函数是避免不了的,如果在此过程中使用了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 其实很友好(?)
在面向对象编程的很多情况下,会出现与我们所期待的结果不同,这个时候需要慢(快)慢(速)的找到问题源头,解决它

Tags: