Question

一旦我了解了JavaScript =>语法，便会遍历整个代码，并用function替换每个=>关键字。我想感觉很好。但是后来我发现事实并非如此。因此，我将每个=>都替换为function关键字，然后遇到一个奇怪的错误：

const $ = (id) => document.getElementById(id);

class Car {
  constructor(id, name, color, price) {
    this.id = id;
    this.name = name;
    this.color = color;
    this.price = price;
  }

  body() {
    return(`
      <div id="${this.id}">
        <img src="${this.id}Img.png">
      </div>
    `);
  }

  tooltip() {
    return(`
      <div id="tooltip">
        <p>The ${this.name} we offer is painted ${this.color}, and the price would be ${this.price} USD</p>
      </div>
    `);
  }

  generate() {
    $('root').insertAdjacentHTML('beforeend', this.body());

    // Error occurred here:
    $(this.id + 'Img').onclick = function() {
      $(this.id).insertAdjacentHTML('beforeend', this.tooltip());
    }
    // However, arrow function does the trick:
    $(this.id + 'Img').onclick = () => {
      $(this.id).insertAdjacentHTML('beforeend', this.tooltip());
    }
  }
}

const mercedes = new Car('mercedes', 'Mercedes', 'blue', 15000);
mercedes.generate();

现在，如果我调用某个属于全局对象的函数（我想这就是它的调用方式），那么在此示例中，onclick，我也必须将Cars this绑定到它吗？ .bind(this)或=>函数。这是发明箭头功能的原因吗？因为onclick函数中的this实际上是指该全局对象，或其他东西。

另一个例子是我提供的第一行代码。我应该使用箭头函数返回1行代码，还是应该像这样包装它：

function $(id) {
  return document.getElementById(id);
}

，并且在绝对必需时真正使用箭头功能吗？我计算出是否只有1行代码可以返回某些内容，并且由于箭头函数不需要{}和return关键字，因此在这种情况下可以使用它们。例如：

function main() {
  const mercedes = new Car('mercedes', 'Mercedes', 'blue', 15000);
  mercedes.generate();
}

window.onload = () => main();

我发现它们对您有所帮助的另一个示例是回调。 NodeJS代码可能会变得很混乱，因此省略function关键字可以使其更整洁。但是，另一方面，使用function关键字可以减少很多嵌套回调的混乱。

// Shorter syntax:
socket.on('listenEvent', (data) => {
  // do something with data
});
// Less confusing, but longer syntax:
socket.on('listenEvent', function(data) {
  // do something with data
});

因此，如果我希望我的第一个示例能够正常工作，我将不得不这样做：

$(this.id + 'Img').onclick = function() {
  $(this.id).insertAdjacentHTML('beforeend', this.tooltip());
}.bind(this);

因此，再次查看它，如果这就是箭头函数的含义，则执行类似的操作

const $ = function(id) {
  return document.getElementById(id);
}.bind(this);

那种毫无意义……到最后，我知道这个问题主要归因于个人喜好。我提供的课程示例是唯一绝对有人需要使用=>或function进行绑定的地方吗？因此，除了观点之外，我对箭头的理解还可以，还是我遗漏了一点？

谢谢！

我遇到了一个例子，其中使用=>实际上解决了一个实际问题

0 个答案: