javascript - 带有 ES6 和 Knockout 的 'this' 作用域

Question

我在使用 ES6 时遇到“this”作用域的问题。

这是我的 original and transpiled code 的链接使用 BabelJS。

当调用一个函数从数组中删除一个项目时，'this' 的范围是未定义的。

如何在不重新定义 this (let self = this) 的情况下实现这一点？

"use strict";

var _createClass = (function() {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function(Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
})();

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Point = (function() {
  function Point() {
    var _this = this;

    _classCallCheck(this, Point);

    this.myArray = ko.observableArray([1, 2, 3, 4]);
    this.removeFromArrayWithArrowFunction = function(value) {
      _this.myArray.remove(value);
    };
  }

  _createClass(Point, [{
    key: "removeFromArray",
    value: function removeFromArray(value) {
      this.myArray.remove(value);
    }
  }]);

  return Point;
})();

ko.applyBindings(new Point());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-bind="text: ko.toJSON(myArray)"></span>
<h2>Issues with this scoping when using a regular Function</h2>
<ul data-bind="foreach: myArray">
  <li>
    <a href="#" data-bind="text: $data, click: $parent.removeFromArray"></a>

  </li>
</ul>

<h2>Works as expected using an arrow function</h2>
<ul data-bind="foreach: myArray">
  <li>
    <a href="#" data-bind="text: $data, click: $parent.removeFromArrayWithArrowFunction"></a>

  </li>
</ul>

Answer 1

如果您直接在绑定(bind)中使用 View 模型函数，您将失去 this 的上下文，就像 Jeff Mercado 解释的那样。 Arrow functions capture the this value of the enclosing context , 所以如果你使用箭头函数符号，你不必担心 var self = this。

因此更改以下内容:

removeFromArray(value) {
  this.myArray.remove(value);
}

进入:

removeFromArray = (value) => {
  this.myArray.remove(value);
}

它应该可以正常工作。

See babel