同一函数中$(this)与this指向冲突的解决方案咨询

你猜的没错！在你当前的代码里，直接调用app.addFriend()时，addFriend函数内部的this确实指向的是app实例；而点击事件回调里的this才是被点击的.user元素——这俩this天生指向不同对象，没法在同一个函数里同时让它们指代各自的目标。不过别担心，有好几种简单的办法能搞定这个问题：

方案1：把点击元素作为参数传给addFriend #

直接在点击回调里把当前的元素（也就是this）传递给addFriend，这样函数里就不用纠结this指向，直接用参数获取文本：

var App = function () {
  this.friends = [];
};

App.prototype.addFriend = function (clickedElement) {
  var name = $(clickedElement).text();
  this.friends.push(name);
}

var app = new App();

$(document).ready(function () {
  $(document).on("click", ".user", function () {
    app.addFriend(this); // 把点击的DOM元素传进去
  });
});

方案2：提前获取名称，再传给addFriend #

把DOM操作和业务逻辑分开，先在点击回调里拿到用户名称，再把名称作为参数传给addFriend——这种方式让函数职责更单一，后期维护起来更省心：

var App = function () {
  this.friends = [];
};

App.prototype.addFriend = function (name) {
  this.friends.push(name);
}

var app = new App();

$(document).ready(function () {
  $(document).on("click", ".user", function () {
    var userName = $(this).text();
    app.addFriend(userName);
  });
});

方案3：用call/apply显式指定this指向（可选） #

如果你非要在addFriend里同时保留app的this和点击元素，也可以用call来调用函数，显式指定addFriend内部的this为app，同时把点击元素作为参数传递：

var App = function () {
  this.friends = [];
};

App.prototype.addFriend = function (clickedElement) {
  var name = $(clickedElement).text();
  this.friends.push(name);
}

var app = new App();

$(document).ready(function () {
  $(document).on("click", ".user", function () {
    app.addFriend.call(app, this); // 第一个参数指定addFriend的this为app，第二个是点击元素
  });
});

个人最推荐第二种方案，它把“获取DOM文本”和“添加好友”的逻辑拆分开，代码更清晰，也更符合模块化的思路。

内容的提问来源于stack exchange，提问作者Leo Tsang