Question

我希望我有合适的地方要求这个...... 下面是我正在处理的两个文件中的一些代码。当我将函数中的“this.”更改为箭头函数时，代码将不再按预期运行。

是否有人能够解释我做错了什么？使用箭头功能时，是否需要做一些不同的事情？我使用'这个'。错误地开始？我不应该以这种方式使用箭头功能吗？

非常感谢帮助。

客户端/视图/ jobList.html

{{#each jobs}}
    <tr>
        <td>{{jobID}}</td>
            <td>{{user.fullname}}</td>
            <td>{{product.type}}</td>
            <td>{{shortDesc}}</td>
            <td>{{formattedDate}}</td>
            <td>{{phone}}</td>
            <td>{{user.username}}</td>
            <td>{{jobType}}</td>
            <td>{{product.brand}}</td>
            <td>{{product.type}}</td>
            <td>{{product.model}}</td>
        </tr>
    {{/each}}

客户端/视图/ jobList.js

Template.jobList.helpers({
    jobs: ()=> Jobs.find({}, {sort: {jobDate: 1}}),

    formattedDate: function() { // Changing this to arrow function breaks functionality
        let d = this.jobDate;
        let e = formatDate(d);
        return e;
    },
    shortDesc: function () { // Changing this to arrow function breaks functionality
        if (this.description.length > 40) {
            return this.description.substr(0, 50) + '...';
        } else {
            return this.description
        }
    },
    jobID: function () { // Changing this to arrow function breaks functionality
        let a = this.jobNum;
        let e = this.jobType.substr(0, 1);
        return e + a
    }
});

Answer 1

关于箭头函数的一个基本要素是它们在创建它们的上下文中继承（ close over ）this。你的代码依赖于this被调用函数的方式设置，所以箭头函数不是那里的好选择。

以下是差异和问题的说明：

var obj = {
    foo: () => {
        console.log("foo: this.prop:", this.prop);
    },
    bar: function() {
        console.log("bar: this.prop:", this.prop);
    },
    prop: "the property"
};
obj.foo(); // Doesn't show `prop` because `this` != `obj`
obj.bar(); // Does show `prop` because `this` == `obj`

Meteor - Arrow功能打破了ES6中的#each循环

1 个答案: