Question

我正在学习ES6，我只想将我的ES5知识转换为ES6。

这是我的ES5代码：

function click() {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
};

这是我的ES6代码：

const click = () => {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
  console.log('RENDERING');
}

我的问题是 this.className + ='抓住'; 和 setTimeout（（）=>（this.className ='remove'），0）; 没有不运行该功能。但是 console.log 会显示在日志中。

此方法对箭头功能无效吗？

Answer 1

没有足够的上下文可以给您一个很好的答案，但有一件事情很突出。箭头函数保持范围，因此this和function click()中的const click可能会有所不同。在ES6版本中，this将引用闭包创建期间的this，而这可能并不是您想要的。

Arrow Functions at MDN将其清除：

箭头函数没有自己的this.

…这意味着this将继承自声明范围。

ES6箭头函数不仅仅是一种声明函数的新方法，function myFunction(...)语法本身并没有错，也不会消失。箭头函数在将函数作为参数传递时避免了冗长（例如传递给forEach），并且在某些情况下避免了将函数重新绑定到其他this的麻烦。将所有函数声明转换为箭头语法不是升级。

Answer 2

原因是您只需要稍微调整一下结构即可。

Upload

this._model.findOne(
  { ["user"]: new mongoose.Types.ObjectId(user._id) },
  img => {
    upload(req, res, err => {
      if (err) {
        res.status(500).json(null);
      } else {
        // Create a new image model and fill the properties
        let newImage = new Image();
        newImage.filename = req.file.filename;
        newImage.originalName = req.file.originalname;
        newImage.desc = req.body.desc;
        newImage.url =
          req.protocol + "://" + req.get("host") + "/images/" + newImage._id;
        newImage.user = user._id;
        newImage.save(err => {
          if (err) {
            res.status(400).json(null);
          } else {
            res.status(201).json(img);
          }
        });
      }
    });
  }
);

Retrive 

  getImage = (req, res) => {
    const user = this.getUser(req, res);
    this._model.findOne({ ['user']: new mongoose.Types.ObjectId(user._id) }, (err, image) => {

      if (err) {
        res.status(500).json(null);
      }
      else if (image == null) {
        res.status(200).json(image);
      } else {
        // stream the image back by loading the file
        res.setHeader('Content-Type', 'image/jpeg');
        fs.createReadStream(path.join(UPLOAD_PATH, image.filename)).pipe(res);
      }
    })
  };

您有括号与花括号。

您的setTimeout(() => {this.className = 'remove'}, 0)是否有效，取决于其他代码中事物的结构方式

Answer 3

在箭头功能中，this不是您期望的this。 “箭头函数”中的this是在创建函数时定义的，而不是在调用函数时定义的。有关更多信息，请参见here。

感谢@Jaromanda X的注释-在这种情况下，继续使用标准功能符号（function() {...}）-也就是说，仅仅是因为您购买了新的螺丝起子，并不意味着旧锤子仍然不是敲钉子的最佳工具

Answer 4

       const click = () => {
           console.log(this);
           this.className += ' grab';
          setTimeout(() => (this.className = 'remove'), 0);
          console.log('RENDERING');
      }
      click();

箭头功能中的“ this”表示从何处调用。例如，如果我打开浏览器并转到控制台，然后输入上面的代码，则“ this”将成为窗口对象，因为该函数是从全局环境中调用的。同样，箭头功能没有自己的“ this”。

Answer 5

您可以为箭头功能绑定this以访问功能和数据。您的代码应类似于

const click = () => {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
  console.log('RENDERING');
}.bind(this)

它将为箭头功能绑定this，您可以访问这些变量和功能。

Answer 6

箭头函数表达式在语法上是常规函数表达式的紧凑选择，尽管没有与this，arguments，super或new.target关键字的绑定。箭头函数表达式不适合用作方法，不能用作构造函数。

将函数转换为箭头函数

6 个答案: