'this'scope with ES6 and Knockout

我在使用ES6时遇到'this'范围问题。'this'scope with ES6 and Knockout

Here's一个链接到我original and transpiled code与BabelJS。

当调用一个函数从数组中删除一个项时，'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>

来源

2015-07-13 Carlos Mendes

这是不是一个真正的问题ES6，要绑定的'click'事件对象的方法。你正在失去'this'的背景。您需要将该方法绑定到父对象。 –

谢谢@JeffMercado。有关如何实现它的任何建议？ –

sroes提供了一个ES6解决方案。否则，使用[这里]概述的任何方法（http://stackoverflow.com/questions/10737494/context-of-this-when-triggering-method-on-root-from-child）。 –

如果您直接在绑定使用视图模型的功能，你失去的this上下文像杰夫·梅尔卡多解释。 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

来源

2015-07-13 13:59:58 sroes

请向您的解决方案添加说明，尤其是您正在使用ES7提案。这不是ES6。另外，你的解决方案基本上是OP用'this.removeFromArrayWithArrowFunction = value => {this.myArray.remove（value）;}'做的。 –

你是对的@FelixKling。我在本地尝试过，因为我没有使用实验性Babel功能，所以无法正常工作。任何其他选项？ –

正是OP已经做了什么，在构造函数中设置函数。 –

'this'scope with ES6 and Knockout

回答

相关问题