jQuery Vs MVC中关键字“this”的含义答案

【问题标题】：Meaning of keyword "this" in jQuery Vs MVCjQuery Vs MVC中关键字“this”的含义
【发布时间】：2012-04-04 21:07:05
【问题描述】：

我试图理解使用关键字“this”或者更确切地说它在 jQuery 与像 Backbone 这样的 MVC 框架中所代表的区别。

下面是每个的 2 个代码示例；所以在 jQuery 中，我们有

$("#result").click(function(){
$(this).html(someval);
})

在 Backbone 中，我们的代码为；

var HandlebarsView = Backbone.View.extend({
el: '#result'
initialize: function(){
this.template = Handlebars.compile($('#template').html());     
},
render: function(){
var html = this.template(this.model.toJSON());
this.$el.html(html);
}
});

现在我明白“this”指的是 jQuery 中的 DOM 元素。

我想了解它在主干代码的情况下代表什么。

请告诉我。

【问题讨论】：

this 指的是HandlebarsView 的实例。 this.model、this.template 和 this.$el 是 HandlebarsView 视图的成员，您可以参考文档了解更多详细信息 backbonejs.org/#View
要知道某物是什么，请使用console.log( this ); 或console.dir( this );。这应该对你有帮助。
“现在我明白了“this”指的是 jQuery 中的 DOM 元素。” - 除非它不...

标签： javascript jquery backbone.js javascript-framework

【解决方案1】：

this 是函数执行的上下文。

理解this 的诀窍是理解它是你执行函数的方式决定了它。

当你将一个函数传递给一个像 jQuery 这样的方法时，你就是在使用那个函数作为回调方法。 jQuery 在执行时显式设置回调的上下文。

当您使用点表示法在对象上调用方法时：myView.render() 是点表示法将方法调用的上下文显式设置为点前面的对象。

在 JavaScript 中设置上下文的规则非常简单，但会引起很多混乱。大多数语言将自引用上下文变量设置为定义方法的对象。不过，JavaScript 使用方法调用模式来确定上下文。

当我们将任何对象的方法作为回调方法传递时，调用它的代码会设置该方法的上下文 - 这包括 Backbone 的视图和其他对象。您可以使用 Underscore.js 的 bind 和 bindAll 函数 ( http://documentcloud.github.com/underscore/#bind ) 以及其他一些技巧来显式覆盖它。


Backbone.View.extend({
  initialize: function(){
    _.bindAll(this);
  }
});

例如，此代码会将当前视图对象上所有函数的上下文绑定到视图。这保证了您的视图方法的上下文将始终是视图本身。

更多信息见：

http://es5.github.com/ - 带注释的 ES5 规范
http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
http://lostechies.com/derickbailey/2011/06/15/solving-backbones-this-model-view-problem-with-underscore-js/
http://www.watchmecode.net/javascript-context（我自己的截屏视频，涵盖了所有规则以及如何使用它们 - 付费截屏视频）

【讨论】：

【解决方案2】：

在Backbone 'this' 里面的view 指的是当前的view 对象。在模型中，“this”指的是当前模型对象。同样，对于集合，“this”指的是当前集合对象。

但是对于视图 'this' 在 jQuery 选择的 dom 元素和视图对象之间是瞬态的，这就是我们使用 _.bindAll 函数的原因，以便我们可以确保在调用某些时 'this' 仍然是当前视图对象'render' 等函数见http://documentcloud.github.com/underscore/#bindAll

【讨论】：