我有一个注册事件处理程序的构造函数:

函数MyConstructor(数据,传输){this.data=数据;transport.on('数据',函数(){警报(this.data);});}//模拟传输对象var传输={on:函数(事件,回调){setTimeout(回调,1000);}};//称为var obj=新MyConstructor('o',传输);

但是,我无法访问回调中创建的对象的数据属性。看起来这不是指创建的对象,而是指另一个对象。

我还尝试使用对象方法而不是匿名函数:

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

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

但它表现出相同的问题。

如何访问正确的对象?


当前回答

首先,您需要清楚地了解这个关键字在范围上下文中的范围和行为。

此范围(&S):


JavaScript中有两种类型的作用域。他们是:

全球范围功能范围

简而言之,全局范围是指窗口对象。全局范围中声明的变量可以从任何地方访问。

另一方面,函数范围位于函数内部。在函数内部声明的变量通常无法从外部世界访问。

全局范围中的this关键字引用窗口对象。函数内部的这个也指窗口对象。因此,这将始终引用窗口,直到我们找到一种方法来处理它,以指示我们自己选择的上下文。

--------------------------------------------------------------------------------
-                                                                              -
-   Global Scope                                                               -
-   (globally "this" refers to window object)                                  -
-                                                                              -
-   function outer_function(callback){                                         -
-                                                                              -
-       // Outer function scope                                                -
-       // Inside the outer function, the "this" keyword                       -
-       //  refers to window object                                            -
-       callback() // "this" inside callback also refers to the  window object -
-   }                                                                          -
-                                                                              -
-   function callback_function(){                                              -
-                                                                              -
-       // Function to be passed as callback                                   -
-                                                                              -
-       // Here "THIS" refers to the window object also                        -
-   }                                                                          -
-                                                                              -
-   outer_function(callback_function)                                          -
-   // Invoke with callback                                                    -
-                                                                              -
--------------------------------------------------------------------------------

在回调函数中操作此函数的不同方法:

这里有一个名为Person的构造函数。它有一个名为name的属性和四个名为sayNameVersion1、sayNameVersion 2、sayName Version3和sayNameversion 4的方法。他们四人都有一项具体任务。接受回调并调用它。回调有一个特定的任务,即记录Person构造函数实例的name属性。

function Person(name){

    this.name = name

    this.sayNameVersion1 = function(callback){
        callback.bind(this)()
    }
    this.sayNameVersion2 = function(callback){
        callback()
    }

    this.sayNameVersion3 = function(callback){
        callback.call(this)
    }

    this.sayNameVersion4 = function(callback){
        callback.apply(this)
    }

}

function niceCallback(){

    // Function to be used as callback

    var parentObject = this

    console.log(parentObject)
}

现在,让我们从person构造函数创建一个实例,并使用niceCallback调用不同版本的sayNameVersionX(X引用1,2,3,4)方法,以了解我们可以用多少种方式操纵这个内部回调来引用person实例。

var p1 = new Person('zami') // Create an instance of Person constructor

绑定:

bind所做的是创建一个新函数,将此关键字设置为所提供的值。

sayNameVersion1和sayNameVersion 2使用bind来操纵回调函数的这一点。

this.sayNameVersion1 = function(callback){
    callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
    callback()
}

第一个方法将其与方法本身内的回调绑定。对于第二个回调,将传递与之绑定的对象。

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method

p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

电话:

调用方法的第一个参数在函数中用作此参数,该函数通过附加的调用进行调用。

sayNameVersion3使用调用来操纵this,以引用我们创建的person对象,而不是window对象。

this.sayNameVersion3 = function(callback){
    callback.call(this)
}

其名称如下:

p1.sayNameVersion3(niceCallback)

应用:

与调用类似,apply的第一个参数引用将由this关键字指示的对象。

sayNameVersion4使用apply操作此对象以引用person对象

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

它的名称如下。简单地传递回调,

p1.sayNameVersion4(niceCallback)

其他回答

我们不能将其绑定到setTimeout(),因为它总是使用全局对象(Window)执行。如果您想在回调函数中访问this上下文,那么通过对回调函数使用bind(),我们可以如下实现:

setTimeout(function(){
    this.methodName();
}.bind(this), 2000);

首先,您需要清楚地了解这个关键字在范围上下文中的范围和行为。

此范围(&S):


JavaScript中有两种类型的作用域。他们是:

全球范围功能范围

简而言之,全局范围是指窗口对象。全局范围中声明的变量可以从任何地方访问。

另一方面,函数范围位于函数内部。在函数内部声明的变量通常无法从外部世界访问。

全局范围中的this关键字引用窗口对象。函数内部的这个也指窗口对象。因此,这将始终引用窗口,直到我们找到一种方法来处理它,以指示我们自己选择的上下文。

--------------------------------------------------------------------------------
-                                                                              -
-   Global Scope                                                               -
-   (globally "this" refers to window object)                                  -
-                                                                              -
-   function outer_function(callback){                                         -
-                                                                              -
-       // Outer function scope                                                -
-       // Inside the outer function, the "this" keyword                       -
-       //  refers to window object                                            -
-       callback() // "this" inside callback also refers to the  window object -
-   }                                                                          -
-                                                                              -
-   function callback_function(){                                              -
-                                                                              -
-       // Function to be passed as callback                                   -
-                                                                              -
-       // Here "THIS" refers to the window object also                        -
-   }                                                                          -
-                                                                              -
-   outer_function(callback_function)                                          -
-   // Invoke with callback                                                    -
-                                                                              -
--------------------------------------------------------------------------------

在回调函数中操作此函数的不同方法:

这里有一个名为Person的构造函数。它有一个名为name的属性和四个名为sayNameVersion1、sayNameVersion 2、sayName Version3和sayNameversion 4的方法。他们四人都有一项具体任务。接受回调并调用它。回调有一个特定的任务,即记录Person构造函数实例的name属性。

function Person(name){

    this.name = name

    this.sayNameVersion1 = function(callback){
        callback.bind(this)()
    }
    this.sayNameVersion2 = function(callback){
        callback()
    }

    this.sayNameVersion3 = function(callback){
        callback.call(this)
    }

    this.sayNameVersion4 = function(callback){
        callback.apply(this)
    }

}

function niceCallback(){

    // Function to be used as callback

    var parentObject = this

    console.log(parentObject)
}

现在,让我们从person构造函数创建一个实例,并使用niceCallback调用不同版本的sayNameVersionX(X引用1,2,3,4)方法,以了解我们可以用多少种方式操纵这个内部回调来引用person实例。

var p1 = new Person('zami') // Create an instance of Person constructor

绑定:

bind所做的是创建一个新函数,将此关键字设置为所提供的值。

sayNameVersion1和sayNameVersion 2使用bind来操纵回调函数的这一点。

this.sayNameVersion1 = function(callback){
    callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
    callback()
}

第一个方法将其与方法本身内的回调绑定。对于第二个回调,将传递与之绑定的对象。

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method

p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

电话:

调用方法的第一个参数在函数中用作此参数,该函数通过附加的调用进行调用。

sayNameVersion3使用调用来操纵this,以引用我们创建的person对象,而不是window对象。

this.sayNameVersion3 = function(callback){
    callback.call(this)
}

其名称如下:

p1.sayNameVersion3(niceCallback)

应用:

与调用类似,apply的第一个参数引用将由this关键字指示的对象。

sayNameVersion4使用apply操作此对象以引用person对象

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

它的名称如下。简单地传递回调,

p1.sayNameVersion4(niceCallback)

以下是访问子上下文中的父上下文的几种方法-

您可以使用bind()函数。在另一个变量中存储对context/this的引用(参见下面的示例)。使用ES6箭头功能。改变代码、功能设计和架构——为此,您应该能够控制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);

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

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

2.在另一个变量中存储对context/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关键字在JavaScript中的行为。这表现如下不同,

其值通常由函数执行上下文确定。在全局范围中,这是指全局对象(窗口对象)。如果为任何函数启用了严格模式,则其值将是未定义的,因为在严格模式中,全局对象是指未定义的窗口对象。位于点之前的对象是this关键字将绑定到的对象。我们可以使用call()、bind()和apply()显式设置此值当使用new关键字(构造函数)时,它将绑定到正在创建的新对象。箭头函数不绑定此 — 相反,这是在词汇上绑定的(即,基于原始上下文)

正如大多数答案所建议的那样,我们可以使用arrow函数或bind()方法或Self var。我将引用GoogleJavaScript风格指南中关于lambdas(arrow函数)的一点

更喜欢使用箭头函数而不是f.bind(this),尤其是在goog.绑定(f,this)。避免写入常量self=this。箭头功能对于有时意外传递的回调特别有用其他参数。

谷歌明确建议使用lambdas,而不是bind或const self=this

因此,最好的解决方案是使用如下lambdas,

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

参考文献:

https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c箭头函数与绑定

“上下文”的问题

术语“上下文”有时用于指代此引用的对象。它的使用是不合适的,因为它在语义上或技术上都不符合ECMAScript的this。

“上下文”是指围绕着某事物的环境,它增加了意义,或是一些前后信息赋予了额外的意义。ECMAScript中使用术语“上下文”来指代执行上下文,它是一些执行代码范围内的所有参数、范围和内容。

如ECMA-262第10.4.2节所示:

将ThisBinding设置为与调用执行上下文

这清楚地表明这是执行上下文的一部分。

执行上下文提供为正在执行的代码添加意义的周围信息。它包含了比thisBinding更多的信息。

它的价值不是“上下文”。它只是执行上下文的一部分。它本质上是一个局部变量,可以通过对任何对象的调用,在严格模式下,设置为任何值。