JavaScript学习笔记（六）

37、JavaScript 错误 - Throw 和 Try to Catch

try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

37.1 JavaScript try 和 catch

try 语句允许您定义一个代码块，以便在执行时检测错误。
catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。
语法：

try {供测试的代码块
}catch(err) {处理错误的代码块
}

示例：

<body><p id="demo"></p><script>try {addd("hello");} catch (err) {document.getElementById("demo").innerHTML = err.message;}</script></body>

输出：addd is not defined

37.2 throw 语句

throw 语句允许您创建自定义错误。
从技术上讲您能够抛出异常（抛出错误）。
异常可以是 JavaScript 字符串、数字、布尔或对象。
如果把 throw 与 try 和 catch 一同使用，就可以控制程序流并生成自定义错误消息。

<body><input type="text" id="demo" /><button type="button" onclick="myFunction()">检测输入</button><p id="intro"></p><script>function myFunction() {var inputMess = document.getElementById("demo").value;try {//是否是数字if (isNaN(inputMess)) {throw "请输入数字";}if (inputMess == "") {throw "请输入内容";}if (Number(inputMess) < 5) {throw "太小";}if (Number(inputMess) > 10) {throw "太大";}} catch (err) {document.getElementById("intro").innerHTML = err;}}</script></body>

37.3 finally 语句

finally 语句允许您在 try 和 catch 之后执行代码，无论结果。
语法：

try {// 供测试的代码块
}catch(err) {// 处理错误的代码块
} 
finally {// 无论结果如何都执行的代码块
}

37.5 Error 对象

Error 对象

38、JavaScript 作用域

局部作用域
全局作用域
JavaScript 作用域

39、JavaScript 严格模式

JavaScript 严格模式

40、JavaScript this 关键词

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

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

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

40.1 方法中的 this

在对象方法中，this 指的是此方法的“拥有者”。
在本页最上面的例子中，this 指的是 person 对象。、、

<body><p id="demo"></p><script>var person = {firstName: "文",lastName: "阿花",age: "20",fullName: function () {return this.firstName + this.lastName;},};document.getElementById("demo").innerHTML = person.fullName();</script></body>

输出：文阿花

40.2 单独的 this

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。

<body><p id="demo"></p><script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script></body>

输出：[object Window]

40.3 函数中的 this（默认）

在 JavaScript 函数中，函数的拥有者默认绑定 this。

<body><p id="demo"></p><script>function myFunction() {return this;}document.getElementById("demo").innerHTML = myFunction();</script></body>

输出：[object Window]

40.4 事件处理程序中的 this

在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素

 <button onclick="this.style.display='none'">单击来删除我</button>

40.5 对象方法绑定

在此例中，this 是 person 对象（person 对象是该函数的“拥有者”）：

 <body><p id="demo"></p><script>// 创建对象：var person = {firstName: "Bill",lastName: "Gates",id: 678,myFunction: function () {return this;},};// 显示来自对象的数据：document.getElementById("demo").innerHTML = person.myFunction();</script></body>

输出：[object Object]

40.6 显式函数绑定

call() 和 apply() 方法是预定义的 JavaScript 方法。
它们都可以用于将另一个对象作为参数调用对象方法。
您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

<body><p id="demo"></p><script>var person1 = {fullName: function () {return this.firstName + this.lastName;},};var person2 = {firstName: "文",lastName: "阿花",};document.getElementById("demo").innerHTML =person1.fullName.call(person2);</script></body>

输出：文阿花

41、JavaScript 箭头函数

ES6 中引入了箭头函数。
箭头函数允许我们编写更短的函数
语法：

let myFunction = (a, b) => a * b;

示例一：

 <body><p id="demo"></p><script>let myFunction = (a, b) => a * b;document.getElementById("demo").innerHTML = myFunction(4, 5);</script></body>

输出：20

示例二：

 <body><p id="demo"></p><script>var hello;hello = function () {return "Welcome China";};document.getElementById("demo").innerHTML = hello();</script></body>

使用箭头函数后：

hello = () => {return "Welcome China";
};

42、JavaScript 类

请使用关键字 class 创建类。
请始终添加名为 constructor() 的方法：

语法：

class ClassName {constructor() { ... }
}

示例：

 <body><script>class myDemo {constructor(name, yeasr) {this.name = name;this.yeasr = yeasr;}}</script></body>

JavaScript 类不是对象。它只是 JavaScript 对象的模板。

42.1 使用类

下面的例子使用 myDemo类创建了两个 myDemo对象。

在创建新对象时会自动调用 constructor 方法。

<body><p id="demo"></p><script>class myDemo {constructor(name, yeasr) {this.name = name;this.yeasr = yeasr;}}var myBoys = new myDemo("张三", "2024");document.getElementById("demo").innerHTML =myBoys.name + " " + myBoys.yeasr;</script></body>

输出：张三 2024

42.2 Constructor 方法

构造方法是一种特殊的方法：

它必须拥有确切名称的“构造函数”
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。

42.3 Class 方法

类方法的创建
语法：

与对象方法相同。

请使用关键字 class 创建类。

请始终添加 constructor() 方法。

然后添加任意数量的方法。

class ClassName {constructor() { ... }method_1() { ... }method_2() { ... }method_3() { ... }
}

示例（1）：创建名为 “age” 的类方法，它返回车龄：

<body><p id="demo"></p><script>class myDemo {constructor(name, yeasr) {this.name = name;this.yeasr = yeasr;}age() {let date = new Date();//date.getFullYear()  返回当前年return date.getFullYear() - this.yeasr;}}var myBoys = new myDemo("张三", 2014);document.getElementById("demo").innerHTML = "年纪为：" + myBoys.age();</script></body>

输出：年纪为：10

示例（2）：您可以向类方法发送参数：

 <body><p id="demo"></p><script>class myDemo {constructor(name, yeasr) {this.name = name;this.yeasr = yeasr;}age(x) {return x - this.yeasr;}}let date = new Date();//date.getFullYear()  返回当前年let year = date.getFullYear();var myBoys = new myDemo("张三", 2014);document.getElementById("demo").innerHTML = "年纪为：" + myBoys.age(year);</script></body>

输出：年纪为：10

43 、JavaScript 模块（待补充）

43.1 模块（Modules）

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
JavaScript 模块允许您将代码分解成单独的文件。这会使维护代码库更加容易。
模块是使用 import 语句从外部文件导入的。模块还依赖于 <script> 标签中的 type="module"。

43.2 export 命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

JavaScript 模块

44、补充

JavaScript JSON
JavaScript 调试
JavaScript 样式指南
JavaScript 最佳实践

JavaScript 常见错误
JavaScript 性能

45、对象（知识补充）

45.1 JavaScript 对象访问器

ECMAScript 5 (2009) 引入了 Getter 和 Setter。
Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

45.1.1 JavaScript Getter（get 关键词）

示例：本例使用 lang 属性来获取 age属性的值：

 <body><p id="demo"></p><script>var perdson = {firstName: "文",lastName: "阿花",age: 25,get lang() {return this.age;},};document.getElementById("demo").innerHTML = perdson.lang;</script></body>

输出：25

45.1.2 JavaScript Setter（set 关键词）

示例：本例使用 lang 属性来设置 language 属性的值：

 <body><p id="demo"></p><script>var perdson = {firstName: "文",lastName: "阿花",age: "",set lang(lang) {return (this.age = lang);},};perdson.lang = "25";document.getElementById("demo").innerHTML = perdson.age;</script></body>

输出：25

45.2 JavaScript 函数还是 Getter？

下面两个例子的区别在哪里？

 <body><p id="demo"></p><script>var perdson = {firstName: "文",lastName: "阿花",fullName: function () {return this.firstName + this.lastName;},};document.getElementById("demo").innerHTML = perdson.fullName();</script></body>

  <body><p id="demo"></p><script>var perdson = {firstName: "文",lastName: "阿花",// fullName: function () {//   return this.firstName + this.lastName;// },get fullName() {return this.firstName + this.lastName;},};document.getElementById("demo").innerHTML = perdson.fullName;</script></body>

例子 1 以函数形式访问 fullName：person.fullName()。

例子 2 以属性形式访问 fullName：person.fullName。

第二个例子提供了更简洁的语法。

45.3 为什么使用 Getter 和 Setter？

它提供了更简洁的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
有利于后台工作

45.4 JavaScript 对象构造器

示例：

<body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;}//创建Person 对象var myPerson = new Person("文", "阿花", 25);document.getElementById("demo").innerHTML ="姓名：" +myPerson.firstName +myPerson.lastName +"<br>年龄：" +myPerson.old;</script></body>

输出：
姓名：文阿花
年龄：25

45.5 为对象添加属性

示例：为Person对象添加birthday 属性：

<body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;}//创建Person 对象var myPerson = new Person("文", "阿花", 25);//为对象添加属性myPerson.birthday = "2020-04-21";document.getElementById("demo").innerHTML ="姓名：" +myPerson.firstName +myPerson.lastName +"<br>年龄：" +myPerson.old +"<br>生日：" +myPerson.birthday;</script></body>

输出：姓名：文阿花
年龄：25
生日：2020-04-21

45.6 为对象添加方法

示例：添加获取完整姓名的方法：

  <body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;}//创建Person 对象var myPerson = new Person("文", "阿花", 25);//为对象添加属性myPerson.birthday = "2020-04-21";//为对象添加方法myPerson.fullName = function () {return this.firstName + this.lastName;};document.getElementById("demo").innerHTML ="姓名：" +myPerson.fullName() +"<br>年龄：" +myPerson.old +"<br>生日：" +myPerson.birthday;</script></body>

输出：姓名：文阿花
年龄：25
生日：2020-04-21

45.7 构造器添加属性

与向已有对象添加新属性不同，您无法为对象构造器添加新属性
示例：

  <body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;}//尝试为构造器添加属性Person.birthday = "2020-04-21";//创建Person 对象var myPerson = new Person("文", "阿花", 25);document.getElementById("demo").innerHTML ="生日：" + myPerson.birthday;</script></body>

输出：生日：undefined

如需向构造器添加一个新属性，您必须添加到构造器函数：

 <body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;//添加属性this.birthday = "2020-04-21";}//创建Person 对象var myPerson = new Person("文", "阿花", 25);document.getElementById("demo").innerHTML =myPerson.old + "<br>生日：" + myPerson.birthday;</script></body>

输出：25
生日：2020-04-21

JavaScript prototype 属性允许您为对象构造器添加新属性：

<body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;}//创建Person 对象var myPerson = new Person("文", "阿花", 25);//使用JavaScript prototype 属性允许您为对象构造器添加新属性：Person.prototype.birthday = "2000-09-18";document.getElementById("demo").innerHTML =myPerson.firstName +myPerson.lastName +"<br>生日：" +myPerson.birthday;</script></body>

输出：
文阿花
生日：2000-09-18

45.8 为构造器添加方法

与向已有对象添加新方法不同，您无法为对象构造器添加新方法。
必须在构造器函数内部向一个对象添加方法：

  <body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;//添加属性this.birthday = "2020-04-21";//添加方法this.fullName = function () {return this.firstName + this.lastName;};}//创建Person 对象var myPerson = new Person("文", "阿花", 25);document.getElementById("demo").innerHTML =myPerson.fullName() + "<br>生日：" + myPerson.birthday;</script></body>

输出：文阿花
生日：2020-04-21

JavaScript prototype 属性也允许您为对象构造器添加新方法：

<body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;}//创建Person 对象var myPerson = new Person("文", "阿花", 25);//使用JavaScript prototype 属性允许您为对象构造器添加新属性：Person.prototype.birthday = "2000-09-18";//JavaScript prototype 属性也允许您为对象构造器添加新方法：Person.prototype.fullName = function () {return this.firstName + this.lastName;};document.getElementById("demo").innerHTML =myPerson.fullName() + "<br>生日：" + myPerson.birthday;</script></body>

输出：文阿花
生日：2000-09-18

修改方法对应的值：

<body><p id="demo"></p><script>//创建 Person 对象的构造器函数function Person(first, last, age) {this.firstName = first;this.lastName = last;this.old = age;//添加属性this.birthday = "2020-04-21";//添加方法this.changeName = function (name) {this.lastName = name;};}//创建Person 对象var myPerson = new Person("文", "阿花", 25);//修改方法的值myPerson.changeName("哈哈");document.getElementById("demo").innerHTML =myPerson.firstName +myPerson.lastName +"<br>生日：" +myPerson.birthday;</script></body>