JavaScript学习笔记（6.0）
JavaScript类
使用关键字class创建类。
始终添加constructor()方法
class ClassName{constructor(){...}
}calss Car{constructor(name,year){this.name=name;this.year=year;
}
}创建了一个名为Car的类，并且拥有两个初始属性name和year。
JavaScript类不是对象，只是JavaScript对象的模板。
<!DOCTYPE html>
<html>
<body><h1>JavaScript 类</h1><p>如何使用 JavaScript 类。</p><p id="demo"></p><script>
class Car {constructor(name, year) {this.name = name;this.year = year;}
}const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script></body>
</html>使用Car类创建了一个个car对象，在创建新对象时会自动调用constructor方法。
constructor方法是一种特殊的方法：
它必须有确切名称的“构造函数”
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法，JavaScript会添加空的构造函数方法。
class Car {constructor(name, year) {this.name = name;this.year = year;}age() {let date = new Date();return date.getFullYear() - this.year;}
}let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";JavaScript JSON
JSON是存储和传输数据的格式。
JSON经常在数据从服务器发送到网页时使用。
JSON（JavaScript Object Notation）
JSON是轻量级的数据交换格式
JSON独立于语言*
JSON是自描述的且易于理解的
*JSON的语法是来自JavaScript对象符号的语法，但JSON格式是存文本。读取和生成JSON数据的代码可以在任何编程语言编写的。
用JSON语法定义包含三条员工记录的数组（对象）的对象：
{
"employees":[{"firstName":"Bill", "lastName":"Gates"}, {"firstName":"Steve", "lastName":"Jobs"},{"firstName":"Alan", "lastName":"Turing"}
]
}JSON格式评估为JavaScript对象
JSON格式在语法上与创建JavaScript对象代码相同。所以JavaScript可以很容易将JSON数据转换成本地的JavaScript对象。
JSON语法规则：
（1）数据是名称/值对
（2）数据由逗号分割
（3）花括号保存对象
（4）方括号保存数组
JSON名称需要双引号。JavaScript名称不需要
"firstName":"Bill"将JSON文本转换为JavaScript对象
JSON的同化成那个用法是从web服务器读取数据，然后在网页中显示数据。
下面使用字符串作为输入
首先，创建包含JSON语法的JavaScript字符串：
var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';然后使用JavaScript的内建函数JSON.parse（）来把这个字符串转换为JavaScript对象：
var obj = JSON.parse(text);<!DOCTYPE html>
<html>
<body><h1>用 JSON 字符串创建对象</h1><p id="demo"></p><script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script></body>
</html>JavaScript调试
在没有调试器的情况下写JavaScript是有难度的。
我们通常通过F12键启动浏览器的调试器，然后在调试器菜单中选择“控制台（console）”
console.log()方法
<!DOCTYPE html>
<html>
<body><h1>My First Web Page</h1><script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script></body>
</html>设置断点
在调试窗口中，您可以在JavaScript代码中设置断点。
在每个断点中，JavaScript将停止执行，以使您能够检查JavaScript的值。
在检查值之后。您可以恢复代码执行。
debugger关键词
debugger关键词会停止JavaScript的执行，并调用调试函数。
这与在调试器中设置断点的功能是一样的。
如果调试器不可用，debugger语句没有效果。
如果调试器已打开，此代码会在第三行之前停止运行。
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-03-12 16:33:12* @LastEditors: Mei* @LastEditTime: 2023-03-12 16:39:28* @FilePath: \vscode\测试断点.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p id="test"></p><script>var x=15*3debuggerdocument.getElementById("test").innerHTML=x;</script>
</body>
</html>
JavaScript最佳实践
避免使用全局变量。
它包括所有的数据类型、对象和函数。
全局变量和函数可被其他脚本覆盖。
JavaScript嵌套函数
所有函数都有权访问全局作用域。
事实上，在JavaScript中，所有函数都有权访问他们“上面”的作用域。
JavaScript支持嵌套函数。嵌套函数可以访问其上的作用域。
内部函数plus()可以访问复函数中的counter计数器变量：
<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-03-12 16:33:12* @LastEditors: Mei* @LastEditTime: 2023-03-12 16:54:18* @FilePath: \vscode\测试断点.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p id="test"></p><script>// var x=15*3// debugger// document.getElementById("test").innerHTML=x;function add() {var counter = 0;function plus() {counter += 1;}plus(); return counter; }document.getElementById("test").innerHTML=add();</script>
</body>
</html>这样可以解决计数器困境，如果我们能够从外面访问plus()函数。
我们还需要找到只执行一次counter=0的方法。
我们需要闭包（closure）。
JavaScript闭包
<!DOCTYPE html>
<html>
<body><h1>JavaScript 闭包</h1><p>使用局部变量计数。</p><button type="button" onclick="myFunction()">计数！</button><p id="demo">0</p><script>
var add = (function () {var counter = 0;return function () {counter += 1; return counter;}
})();function myFunction(){document.getElementById("demo").innerHTML = add();
}
</script></body>
</html>变量add的赋值是自调用函数的返回值。这个自调用函数只运行一次。它设置计数器为零，并返回函数表达式。
这样add称为了函数。最精彩的部分是他能够访问父作用域中的计数器。这样被称为JavaScript闭包。它使函数拥有“私有变量”变成可能。计数器被这个匿名函数的作用域保护，并且只能使用add函数来修改。闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。
转回来
始终声明局部变量
所有在函数中使用的变量应该被声明为局部变量。
局部变量必须通过var关键字来声明，否则他们将变成全局变量。
严格模式下不允许使用未声明的变量