前端学习笔记（三）

写文章的地方打开f12还有彩蛋呀
mk-cute这个主题是挺可爱的（

按照之前得计划是三个星期把MDN上的HTML，CSS，JS各自的入门教程看完。
今天是最后一天，只有CSS学完了，HTML还差4篇文章，JS看完一半
JS还是太难了，讲对象的部分两篇文章就看了两天。

今天做MDN的测验，用JS写了一个弹球游戏，放在自己的网站里了
其实没什么好总结的，把流程写一遍也没什么意思，想到啥写啥吧

1. 模板字符串

学了js里的这个语法，`Hello, ${variable}`
就像 python 里的f'Hello, {variable}'
或者 C# 里的$"Hello, {variable}"
后两个都是在字符串前加个符号，js却改成用`，为什么？哪个好？哪里都查不到。
而且markdown里打出`太难了

2. 在一个对象里调用另一个对象时要注意this的指向

比如说要在一个对象里定义window.onkeydown
可以用let _this = this,把外面的对象的this储存下来

xxx.prototype.xx = function () {
  //这里this指的是xxx.prototype
  let _this = this;
  window.onkeydown = function () {
    // 这里this指的是window
    console.log(this);
    // 这里用_this可以引用xxx.prototype
    console.log(_this);
  }
}

还可以用箭头函数，箭头函数不带this，因此不用储存外面的this

xxx.prototype.xx = function () {
  window.onkeydown = e => {
    // DO SOMETHING
  }
}

3. js里也有for (i in array)，但是i仍然是指index

python用习惯了这个真不适应

4. 每一帧保留上一帧的一部分透明度，可以做出残影效果。

这个技巧以前学AE的时候也见过，太经典了。

5. 让动画更流畅

玩的时候发现按下后要先走一下，停顿一下，过一会儿再长走，很意义不明。
网上搜了一下,基本都是用setInterval + onkeydown + onkeyup的方法，好像是浏览器只能做到这样了。 于是那就这样写吧，这个不难，不过写这个的时候就又碰到了刚说的this的bug，在setInterval内部的this也是window，因此还是要储存下来。
解决后不仅停顿问题解决了，还可以一次性多按了，可以左上这种角度了。