处理“this”以访问类字段/方法

时间:2016-12-27 01:23:01

标签: javascript typescript this

通过查看此代码

,我对使用打字稿中的this感到困惑
class GoogleMapsClass {
    public map;

    constructor(selector) {
        var _this = this;
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
                _this.map = this.responseText;
            }
        };
        xhttp.open("GET", "/test.php", false);
        xhttp.send();
    }
}

你可以看到我正在使用上下文切换技巧var _this = this;

我不知道这是否是使用打字稿中的类字段的正确方法,我也担心通过使用这个技巧我只是重复内存所以它不利于性能和整体代码质量(我知道JS不适用于某些繁重的操作,但在优化代码时,复制对象仍然是最微不足道的错误。

处理上下文切换的最正确方法是什么?

2 个答案:

答案 0 :(得分:3)

代码中没有重复的对象。 _this只是对class GoogleMapsClass { public map; constructor(selector) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4) { this.map = xhttp.responseText; } }.bind(this); xhttp.open("GET", "/test.php", false); xhttp.send(); } } 的引用。实际上,您可以避免class GoogleMapsClass { public map; constructor(selector) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = () => { if (xhttp.readyState == 4) { this.map = xhttp.responseText; } } xhttp.open("GET", "/test.php", false); xhttp.send(); } } 使用箭头功能或绑定您的功能。

http://dev.mysql.com/doc/refman/5.7/en/group-by-functions.html

collection

bind

<%= f.input :role, collection: [:admin, :subscriber, :poster] %>

答案 1 :(得分:0)

我没有在代码中看到重复对象的任何地方。

$(document).ready(function(){
  
  var first = {};
  var second = first;
  second.value = "whatever";

  $('#test1').text(first.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1"></div>

在上面的示例中,第一个和第二个指向同一个对象,没有对象的重复。我在第二个上设置了一个值,可以从第一个读取它,因为它们实际上是同一个对象。

  

处理上下文切换的最正确方法是什么?

许多人会执行以下一行代码:

var _this = this;
var $this = this;
var self = this;

它们都有效,并且没有有形的性能或内存问题。