Question

在之前的一个问题中，我描述了以适当的方式对JS进行调解的困惑。

现在我需要一些帮助来处理特定的用例。

我正在尝试开发一个能够使用facebook-sdk登录facebook的ember应用程序。因此，我生成了一个组件，它将一个按钮放入dom并对点击作出反应。请看这个：

import Ember from 'ember';

export default Ember.Component.extend({

  actions: {
    loginintofb: function() {
      console.log("loginintofb");
      FB.login(this.checkLoginState);
    }
  },

  checkLoginState: function() {
    console.log("checkLoginState"); // --> output | component.js:15
    //statusChangeCallback(response) //--> is not defined | also sdk.js:95 (???)
    FB.getLoginStatus(function(response) {

      // ##### HERE Ive got problems! #####
      statusChangeCallback(response); // --> is not defined | sdk.js:95

    });
  },

  statusChangeCallback: function(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
      ...
    } else if (response.status === 'not_authorized') {
      ...
    } else {
      ...
    }
  }


});

问题是注释行：Iv必须将函数调用作为回调处理程序传递给facebook api。换句话说：Iam in the ember coomponent context - ＆gt;去facebook-api - ＆gt;想要在组件中调用一个函数。

正如您可能已经提到的：浏览器打电话给我，statusChangeCallback(response);不是一个功能。因此，浏览器调用该函数的位置（在我所讨论的Facebook-SDK中）超出了该函数的范围。

另外：当将statusChangeCallback()置于console.log("checkLoginState");下方（请参阅评论 - ＆gt;未定义）时，浏览器会说未定义statusChangeCallback！奇怪的是：终端说，这个引用错误来自sdk.js，但就是那条线 one（ console.log（...））来自component.js。那可能是吗？

我怎样才能摆脱它？任何人都可以帮助我解决这个＆＃34;范围问题？

Answer 1

这里有两个不同的问题。

要引用statusChangeCallback，您需要将其从对象中删除。
回调中的上下文不同。

考虑一下：

checkLoginState: function() {
  // This will display undefined:
  console.log(statusChangeCallback);
  // this will display the function:
  console.log(this.statusChangeCallback);

  // This will work:
  FB.getLoginStatus(response => {
    this.statusChangeCallback(response);
  });
},

来自fat arrow的es2015表示内部范围是从父checkLoginState继承的。

我们可以简化您尝试做的事情。之一：

checkLoginState: function() {
  FB.getLoginStatus(this.statusChangeCallback);
}

或者，如果您希望statusChangeCallback的上下文保留在组件上，请将其绑定：

checkLoginState: function() {
  FB.getLoginStatus(this.statusChangeCallback.bind(this));
}

在es7的一个尚未确定的未来中，有一个绑定提案，它会将其简化为（在experimental babel之外不要使用它）：

checkLoginState: function() {
  FB.getLoginStatus(::this.statusChangeCallback);
}

在单独的SDK中传递函数回调（例如Facebook-SDK）

1 个答案: