为什么`this`指的是全局对象？

Question

我有一个 Backbone Marionette 应用程序，其模块定义如下。当我运行这个应用程序时，控制台日志语句打印出@ 作为窗口对象。当list 方法运行时，我认为this (@) 会引用List.Controller 对象。我错过了什么？

###
The Header list controller.
###
define [
    'cs!app',
    'cs!./view',
    'cs!modules/header/entities'
], (
  App,
  View
) ->
  App.module 'Header.List', (List, App, Backbone, Marionette, $, _) ->
    List.Controller =
      list: ->
        console.log(@)
        headers = App.request 'header:entities'
        view = new View.Headers {collection: headers}
        App.headerRegion.show view

      setActiveHeader: (headerUrl) ->
        headers = App.request 'header:entities'
        header = headers.find (header) -> (header.get 'url') == headerUrl
        header.select()
        headers.trigger 'reset'

    App.commands.setHandler 'header:setActive', (headerUrl) ->
      List.Controller.setActiveHeader headerUrl

  App.Header.List.Controller

更新

这是调用列表方法的模块：

###
The Header module.
###

define [
    'cs!app',
    'cs!./list/controller'
], (
  App,
  listController
) ->
  App.module 'Header', (Module, App, Backbone, Marionette, $, _) ->
    Module.startWithParent = false

  App.module 'Routers.Header', (ModuleRouter, App, Backbone, Marionette, $, _) ->
    class ModuleRouter.Router extends Marionette.AppRouter
      appRoutes: {}

      executeAction = (action, args) ->
        action(args)

      API =
        list: ->
          executeAction listController.list

      App.Header.on 'start', ->
        API.list()

      App.addInitializer ->
        new ModuleRouter.Router {listController: API}

  App.Header

Answer 1

this 直到函数被调用才被绑定，并且取决于函数的调用方式。您可以将其视为隐式传递给函数的额外参数。

在这种情况下，我认为您正在使用 controller() 调用您的函数。 this 值可以通过将函数作为方法调用（如在foo.bar() 或foo["bar"]() 中）或通过call() 或apply() 显式设置来设置。您的调用都没有这样做，因此这将恢复为全局对象。

来自here。

Answer 2

你应该在初始化函数中使用_.bindAll(this)，只需添加：

initialize:->
  _.bindAll(this, "list") // Like @mu mentioned in the comment, function name is required

编辑：

虽然@KiT-O 是正确的，并且调用者可以使用_.bind 函数将函数绑定到Controller。这不应该是调用者的责任，函数需要绑定到其正确的上下文，调用者不应该关心/知道它。

这就是为什么我更喜欢 _.bindAll 解决方案的原因，尽管它向 Backbone 添加了更多样板代码

Answer 3

问题是调用对象listController 的方法list，上下文为window（全局）。

这是因为您以这种方式调用方法：executeAction listController.list 而从executeAction 这只是调用方法的正常方式：action(args)

您可以将方法绑定到类（使用_.bind）或使用js Function 的call 或apply 方法（绑定方式更容易）：

绑定(_.bind(action, context):

executeAction _.bind(listController.list, listController)

调用（或应用）另一个上下文（method.call(context, arg1, ..) 或 method.apply(context, argsArray)）

  executeAction = (context,action, args) ->
    action.call(context, args)

  API =
    list: ->
      executeAction listController, listController.list