今天是我参加青训营的第四天

HTML/CSS/JS 各司其责
应当避免不必要的由 JS 直接操作样式
可以用 class 来表示状态
纯展示类交互寻求零 JS 方案

js 简单要点

提升（Hoisting）

提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。 JavaScript 声明会被提升，简单的说就是在Cjava，C++ 这些语言中你若要使用某个变量，这个变量你必须要在使用之前进声明

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html>

如上面代码所示 x在最后声明，运行没有任何问题

JavaScript 只提升声明，而非初始化。
let 和 const 关键词

用 let 和 const 定义的变量被提升到块的顶部，但没有初始化。

意思：代码块知道变量，但在声明之前不能使用它。

在声明之前使用 let 或 const 变量将导致引用错误（ReferenceError）。

从块的开始到声明，变量处于暂时性死区（ temporal dead zone）:

JavaScript 严格模式

什么是严格模式呢？即是在严格的条件下，在严格模式中，您无法使用未声明的命令，例如使用未声明的变量除Internet Explorer 9 及更低版本外，所有现代浏览器都支持"严格使用"：

"use strict" 指令

"use strict"是 JavaScript 1.8.5 中的新指令（ECMAScript version 5）。

它不算一条语句，而是一段文字表达式，更早版本的 JavaScript 会忽略它。

"use strict"; 的作用是指示 JavaScript 代码应该以"严格模式"执行。

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = 3.14;  // This will cause an error (x is not defined).
</script>

</body>
</html>

在严格模式下这是错误的，是不允许的。

this关键词

this 是什么？

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

1.call()和apply()简介

在JavaScript中，每个函数对象都带有call()和apply()方法，即Function.prototype.call()和Function.prototype.apply()，这两个方法都是挂载在原型上的。

MDN官方解释如下：

call：

**call()** 方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。

apply:

**apply()**方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

通过官网的解释，大家可能对这两个方法有了一个大致的了解，其实简单来说，call和apply两个方法最主要的作用就是改变this指向。 this 是一个难点在一些函数方法以及下文提到的箭头函数中 this 的指向不同，以及在js原型链中this的指向一直都是一个问题。

let 与 const

通过 var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

{
  var x = 2;
}
// x 可以在这里使用

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

{
  let x = 2;
}
// x 不可以在这里使用

重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

// 这里 x 是 10
{
  var x = 2;
  //这里 x 是 2
}
// 这里 x 是 2

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

// 这里 x 是 10
{
  let x = 2;
  // 这里 x 是 2
}
// 这里 x 是 10

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

const 定义的不是真正的常数它没有定义常量值。它定义了对值的常量引用。

箭头函数

箭头函数什么大家看看就大概知道是什么意思了

与常规函数相比，箭头函数对 this 的处理也有所不同。

简而言之，使用箭头函数没有对 this 的绑定。

在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。

对于箭头函数，this 关键字始终表示定义箭头函数的对象。

请勿使用 new Object()

请使用 {} 来代替 new Object()
请使用 "" 来代替 new String()
请使用 0 来代替 new Number()
请使用 false 来代替 new Boolean()
请使用 [] 来代替 new Array()
请使用 /()/ 来代替 new RegExp()
请使用 function (){} 来代替 new Function() 想要写好js 一定一定要注意代码规范！！！

js简单教程 | 青训营笔记