如何从工厂函数中的方法中删除`this`关键字?

时间:2018-04-18 02:48:19

标签: javascript this

我的问题 在下面的简单工厂函数中,我在totalCost方法中使用this来引用其父对象。如何在不使用this的情况下构建这样的东西?我看不出要使用什么模式。

"use strict"

function planeCreator(a, b, c) {
    return {
        manufacturer: a,
        numberOfEngines: b,
        costPerEngine: c,
        totalCost: function() {
            return this.numberOfEngines * this.costPerEngine;
        }
    }
}

let b17 = planeCreator('B-17', 4, 25000);

document.querySelectorAll('.output')[0].textContent = b17.totalCost();
<div class='output'></div>

背景故事 我对Javascript的了解越多,我就越发现对Constructor函数以及newthis关键字的批评。在埃里克·艾略特的The Two Pillars of JavaScript中,他提醒程序员不要使用构造函数,并提到Douglas Crockford从不使用newthis

我的问题是虽然它很容易避免构造函数和新关键字我不太确定如何避免this。我会用什么模式替换它?

1 个答案:

答案 0 :(得分:2)

将新创建的对象分配给变量,并引用该变量:

(另请注意,如果您只选择一个元素,最好使用querySelector而不是querySelectorAll

&#13;
&#13;
function planeCreator(a, b, c) {
  const objToReturn = {
    manufacturer: a,
    numberOfEngines: b,
    costPerEngine: c,
    totalCost: () => objToReturn.numberOfEngines * objToReturn.costPerEngine,
  };
  return objToReturn;
}

const b17 = planeCreator('B-17', 4, 25000);

document.querySelector('.output').textContent = b17.totalCost();
&#13;
<div class='output'></div>
&#13;
&#13;
&#13;

就我个人而言,我不认为使用Class关键字和this有什么问题 - 较少的语法噪音是好的,并且像所有语言结构一样,你只需要学习如何正确使用它。这是真的,当你不需要时,你应该避免使用this,但是你不应该不按照的方式去以避免使用它,我认为。同样,ES6的.reduce也可能会让新手感到困惑,但一旦你理解了如何正确使用它,请继续使用它。它简洁有力。