以下是在子上下文中访问父上下文的几种方式：

1. 使用bind()函数。
2. 在另一个变量中存储对上下文/this的引用（请参见下面的示例）。
3. 使用ES6 箭头函数。
4. 改变代码，函数设计和架构——为此，您应该掌握JavaScript中的设计模式。

1. 使用bind()函数

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', ( function () {
        alert(this.data);
    }).bind(this) );
}
// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};
// called as
var obj = new MyConstructor('foo', transport);

如果您正在使用Underscore.js- http://underscorejs.org/#bind

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));

2. 在另一个变量中存储对上下文/this的引用

function MyConstructor(data, transport) {
  var self = this;
  this.data = data;
  transport.on('data', function() {
    alert(self.data);
  });
}

3. 箭头函数

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

关于this你需要了解些什么

this(也称为“上下文context”)是每个函数内部的一个特殊关键字，它的值仅取决于函数被调用的方式，而不是定义它的方式、时间或位置。它不像其他变量那样受词法作用域的影响(除了箭头函数，见下文)。以下是一些例子:

function foo() {
    console.log(this);
}
// normal function call
foo(); // `this` will refer to `window`
// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`
// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`

要了解更多关于this的信息，请查看MDN文档。

如何引用正确的this

使用箭头函数

ECMAScript 6引入了箭头函数，它们可以看作是lambda函数。它们没有自己的this绑定。相反，this在作用域中被查找，就像一个普通的变量一样。这意味着你不必调用.bind。这不是它们唯一的特殊行为，请参阅MDN文档获取更多信息。

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => alert(this.data));
}

不要使用this

实际上，您并不想特别访问this，而是访问它所引用的对象。这就是为什么一个简单的解决方案是只需创建一个也引用该对象的新变量。变量可以有任何名称，但常见的是self和that。

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function() {
        alert(self.data);
    });
}

由于self是一个普通变量，它遵守词法作用域规则并且在回调函数中是可访问的。这也有一个优势，您可以访问回调本身的this值。

显式设置回调的this - 第1部分

看起来好像您无法控制this的值，因为它的值是自动设置的，但实际上并非如此。

每个函数都有一个方法.bind [docs]，它返回一个绑定了this值的新函数。该函数与您调用.bind的函数具有完全相同的行为，只是this由您设置。无论何时何地调用该函数，this始终引用传递的值。

function MyConstructor(data, transport) {
    this.data = data;
    var boundFunction = (function() { // parenthesis are not necessary
        alert(this.data);             // but might improve readability
    }).bind(this); // <- here we are calling `.bind()` 
    transport.on('data', boundFunction);
}

在此情况下，我们将回调的this绑定到MyConstructor的this的值。

注意：当为jQuery绑定上下文时，请使用jQuery.proxy [docs]。这样做的原因是为了在取消绑定事件回调函数时不需要存储对函数的引用。jQuery在内部处理此操作。

设置回调函数的this - 第二部分

一些接受回调函数的函数/方法同时也接受一个值，用于指定回调函数中this的引用。这基本上与自己绑定是一样的，只是函数/方法替你完成了这个工作。 Array#map[文档]就是这样一个方法。它的声明如下：

array.map(callback[, thisArg])

第一个参数是回调函数，第二个参数是this应该引用的值。下面是一个编造的例子：

var arr = [1, 2, 3];
var obj = {multiplier: 42};
var new_arr = arr.map(function(v) {
    return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument

注意：是否能够传递this的值通常在函数/方法的文档中有所提及。例如，jQuery的$.ajax方法[文档]描述了一个叫做context的选项：

该对象将成为与所有 Ajax 相关回调函数的上下文。

常见问题：使用对象方法作为回调函数/事件处理函数

另一个常见问题体现在，当一个对象方法用作回调函数/事件处理函数时。函数是JavaScript中第一类公民，而术语"方法"仅仅是一个指对象属性值为函数的俗称。但是，该函数没有与其所属的对象之间的特定联系。

考虑下面的例子：

function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}
Foo.prototype.method = function() {
    console.log(this.data);
};

虽然函数this.method被分配为单击事件处理程序，但是如果单击了document.body，则记录的值将会是undefined，因为在事件处理程序内部，this指的是document.body，而不是Foo的实例。
如前所述，this引用的内容取决于函数的调用方式，而不是定义方式。
如果代码像下面这样，就更容易看出该函数不具有对象的隐式引用：

function method() {
    console.log(this.data);
}
function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}
Foo.prototype.method = method;

解决方案与上述相同：如果可用，使用.bind明确绑定this到特定值

document.body.onclick = this.method.bind(this);

或通过使用匿名函数作为回调/事件处理程序并将对象(this)分配给另一个变量来明确将函数调用为对象的"方法"：

var self = this;
document.body.onclick = function() {
    self.method();
};

或使用箭头函数：

document.body.onclick = () => this.method();