Question

我正在阅读learn.knockoutjs.com教程，我正处于自定义绑定教程的第4步。有以下JavaScript：

update: function(element, valueAccessor) {
    // Give the first x stars the "chosen" class, where x <= rating
    var observable = valueAccessor();
    $("span", element).each(function(index) {
        $(this).toggleClass("chosen", index < observable());
    });
}

我已将其翻译为以下TypeScript：

update: (element, valueAccessor) => {
    var observable = valueAccessor();
    $("span", element).each(index => {
        $(this).toggleClass('chosen', index < observable())
    });
}

这将创建以下内容，其中创建了_this变量以保留“update”函数的范围，而不是内部的“span”函数。

update: function (element, valueAccessor) {
    var _this = this;
    var observable = valueAccessor();
    $("span", element).each(function (index) {
        $(_this).toggleClass('chosen', index < observable());
    });
}

问题在于$(_this)。如何让TypeScript为我提供真正的$(this)。

Answer 1

对于很多人而言，执行_this的打字稿更为直观，实际上这样的代码会导致Stackoverflow上每天多次重复：

  update: function() {
     $(elem).click(function(){
          this.save();
     });
  }

this与this不同，因为在js this的工作方式与其他语言不同 - 它为每个函数调用都有一个单独的绑定。

打字稿会使许多新人对js的预期工作如上所述：

  update: function() {
     //this is the object with update, save methods etc
     $(elem).click( () => {
          this.save();  //this is still the object with update, save methods etc
     });
  }

即使使用胖箭头，通常也有一种方法可以引用你想要的东西：

update: function() {
    $(elem).click( (event) => {
        $(event.currentTarget).hide() //same as $(this).hide() with normal function
        this.save(); //Stays intuitive to non-javascripters
    });
}

或者用你的例子：

update: function() {
    $("span", element).each( (index, elem) => {
        $(elem).toggleClass('chosen', index < observable())
        this.save(); //stays intuitive to non-javascripters
    });
}

当然，对于习惯于this的JS行为的有经验的Javascripters，它可能不那么直观。

顺便说一下，我对打字稿语法不是100％......

Answer 2

答案很简单。不要使用lambda。

update: (element, valueAccessor) => {
    var observable = valueAccessor();
    $("span", element).each(function (index) {
        $(this).toggleClass('chosen', index < observable())
    });
}

请注意，不同之处在于此代码使用... element).each(function (index)...而不是lambda

我不明白为什么如果有人能发布为什么，那就太好了。

Answer 3

Esailija在这里有正确的想法：根本不要在回调中使用$(this)。使用命名参数，您的代码会更清晰。

作为另外一个例子，请考虑这个简单的jQuery插件：

// Set a random opacity on each of the elements in a jQuery object
jQuery.fn.randomOpacity = function() {
    return this.each( function() {
        $(this).css({ opacity: Math.random() });
    });
};

哎哟。一段代码可能会比这更令人困惑吗？ this连续出现在两行中，这意味着完全不同的事情。

而是使用命名参数：

// Set a random opacity on each of the elements in a jQuery object
jQuery.fn.randomOpacity = function() {
    return this.each( function( i, element ) {
        $(element).css({ opacity: Math.random() });
    });
};

更清楚。

打字稿：我如何得到真正的“这个”

3 个答案: