Question

我有一个存储一堆方法的Javascript对象，还存储了一些变量。在正常情况下，当方法试图相互访问或变量时，它工作正常，但如果从范围外调用方法（例如，通过另一个回调），则它们不再能够访问变量。

示例JSFiddle：http://jsfiddle.net/3Lkuz2Lk/2/

以下是用于说明问题的示例代码：

＆＃13;

    var obj = {
      x: null,
      func1: function() {
	    console.log('func1, x is ' + this.x);
      },

      func2: function() {
	    console.log("func2");
        this.func1();

	    var func1 = this.func1;
        func3(function() {
  	      func1();
        });
      }
    };

    function func3(callback) {
	  console.log("func3");
	  return callback();
    }

    obj.func2();

＆＃13;

以上代码的输出是：

func2
func1, x is null
func3
func1, x is undefined

我不清楚为什么第二次调用func1 x是未定义的？

如果我需要完成这个（即，无论他们从哪个上下文调用，都能够访问对象中的方法和变量），我该如何实现呢？我发现上面的方法是不洁净的，因为我需要存储func1引用以使其可用于调用func3，并且我希望它有一个更简洁/更简单的方法。

Answer 1

您必须使用bind(this)，详细了解here：

var func1 = this.func1.bind(this);

Answer 2

＆＃13;

var obj = {
      x: null,
      func1: function() {
    console.log('func1, x is ' + this);
      },

      func2: function() {
    console.log("func2");
        this.func1();

    var func1 = this.func1;
        func3(func1);
      }
    };

    function func3(callback) {
  console.log("func3");
  return callback();
    }

obj.func2();

＆＃13;

这是因为在两种情况下都不同，在第一种情况下 this 指向Object，而在下一种中指的是全局对象/窗口。你必须要做

＆＃13;

var obj = {
      x: null,
      func1: function() {
    console.log('func1, x is ' + this.x);
      },

      func2: function() {
    console.log("func2");
        this.func1();

    var func1 = this.func1.bind(this);
        func3(func1);
      }
    };

    function func3(callback) {
  console.log("func3");
  return callback();
    }

obj.func2();

＆＃13;

Answer 3

我已经简化了代码。问题是参考。您调用func3，它位于自己的范围内，而不是obj范围链的一部分。所以这指的是func3的范围。如果bind this从obj到回调，则可以使用。

＆＃13;

var obj = {
  x: null,
  func1: function() {
    console.log('func1, x is ' + this.x);
  },

  func2: function() {
    console.log("func2");
    this.func1();

    func3(this.func1.bind(this));
  }
};

function func3(callback) {
  console.log("func3");
  return callback();
}

obj.func2();

＆＃13;

使用call的另一个解决方案就是这个小提琴http://jsfiddle.net/3Lkuz2Lk/3/

从另一个对象方法

3 个答案: