代码之家 › 专栏 › 技术社区 › sumanta.k

ionic 3 javascript google map marker onclick错误[重复]

ionic3 ionic-framework angular javascript

sumanta.k · 技术社区 · 7 年前

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

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

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);

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

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

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

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

但也有同样的问题。

0 回复 | 直到 8 年前

Vivek Anand 6 年前

你应该知道些什么 `this`

(也称为“上下文”)是每个函数中的一个特殊关键字,其值仅取决于怎样

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`

了解更多 ,请查看 MDN documentation .

`这`

不使用

你实际上不想访问 这 它所指的对象 . 这就是为什么一个简单的解决方案是简单地创建一个新的变量,它也引用那个对象。变量可以有任何名称,但常见的是 self 和 that .

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

自从是一个普通变量,它遵循词法范围规则,并且可以在回调中访问。这还有一个优点,就是您可以访问回调本身的值。

显式设置回拨的第1部分

看起来你无法控制因为它的值是自动设置的,但事实并非如此。

每个函数都有方法 .bind ^[docs] ,它返回一个新函数绑定到值。函数的行为与您调用的函数完全相同 .绑定 只有那个是你安排的。无论如何调用或何时调用该函数, 这 将始终引用传递的值。

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);
}

这 价值 MyConstructor 的 .

为jQuery绑定上下文时,使用 jQuery.proxy ^[docs]

ECMAScript 6:使用 arrow functions

ECMAScript 6介绍 ,可以认为是lambda函数。他们没有自己的 这 结合。相反, 在作用域中查找,就像正常变量一样。也就是说你不必打电话 . 这并不是他们唯一的特殊行为,请参阅MDN文档了解更多信息。

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

套 `这`

一些接受回调的函数/方法也接受回调的 这 应该参考。这基本上与您自己绑定它是一样的,但是函数/方法会为您这样做。 Array#map ^[docs] 就是这样一种方法。其签名为:

array.map(callback[, thisArg])

这 应该参考。下面是一个人为的例子:

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

是否可以为 这 jQuery's $.ajax method ^[docs] 描述一个名为 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 这 文档.正文 Foo .
正如前面提到的,什么 这 打电话 ,不是怎么回事定义 .

function method() {
    console.log(this.data);
}


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

Foo.prototype.method = method;

解决方案 与上述相同:如果可用,使用 .绑定 这 特定值

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

或者显式地将函数作为对象的“方法”调用,方法是使用匿名函数作为回调/事件处理程序并分配对象( )到另一个变量:

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

或使用箭头功能:

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