Question

我使用ES6类遇到绑定上下文的问题。

这是一个jsfiddle来解释。

当我在类上声明一个click函数时，如

if (System.getProperty('CONFIGLOC')) {
    externalConfigPath='file:'+System.getProperty('CONFIGLOC')+File.separator+appName+File.separator
}

我必须在标记中提供绑定，如下所示：class viewModel { constructor() { this.data = ko.observableArray([{ firstName: "phil" }, { firstName: "person" }]); this.selectedPerson = ko.observable("none selected"); } selectUser(data){ console.log(this); this.selectedPerson(data.firstName); } }

但是当我在构造函数中声明click时，我不必提供上下文。

有人知道为什么吗？

Answer 1

Knockout的事件绑定（click在引擎盖下使用）做了三件事：

传递当前绑定上下文的$data，
通过活动
apply事件侦听器绑定到当前$data

（Source）

这意味着当您点击用户时，会发生以下情况：

viewModelInstance.selectUser.apply(user, [user, event]);

如果要在处理程序中引用this，了解箭头函数，原型方法和“未绑定”属性函数之间的区别非常重要：

this.doSomething = function () { /* ... */ };
this.doSomething = () => { /* ... */ };

MyClass.prototype.doSomething = function() { /* ... */ };

当你写：

this.selectUser = (data) => { /* ... */ };

你基本上这样做：

this.selectUser = function(data) { /* ... */ }.bind(this);

这意味着viewModel实例被“固定”/绑定到该方法。在构造函数外部定义它使它成为一个原型方法，可以通过其他代码绑定到任何this上下文。

搜索“es6箭头功能”和this以查找有关其工作原理的更多答案。例如：When should I use Arrow functions in ECMAScript 6?

ES6课程和淘汰赛

1 个答案: