JavaScript 异常

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 能够在 try 和 catch 之后执行代码，无论结果如何

try && catch

1
2
3
4
5
6
try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块	// document.getElementById("demo").innerHTML = err.message;
}

Js抛出异常

当发生错误时，JavaScript 通常会停止并产生错误消息。 实际上会创建带有两个属性的 Error 对象：name 和 message。

属性 描述
name 设置或返回错误名
message 设置或返回错误消息（一条字符串）

error 的 name 属性可返回六个不同的值：

错误名 描述
EvalError 已在 eval() 函数中发生的错误
RangeError 已发生超出数字范围的错误
ReferenceError 已发生非法引用
SyntaxError 已发生语法错误
TypeError 已发生类型错误
URIError 在 encodeURI() 中已发生的错误

throw 语句

允许创建自定义错误。异常可以是 字符串、数字、布尔、对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>

<p id="p01"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "是空的";
    if(isNaN(x)) throw "不是数字";
    x = Number(x);
    if(x < 5)  throw "太小";
    if(x > 10)   throw "太大";
  }
  catch(err) {
    message.innerHTML = "输入：" + err;
  }
}
</script>

现代浏览器通常会结合 JavaScript 与内置的 HTML 验证，通过使用在 HTML 属性中定义的预定义的验证规则：

1
<input id="demo" type="number" min="5" max="10" step="1">

finally 语句

1
2
3
4
5
6
7
8
9
try {
     //供测试的代码块
}
 catch(err) {
     //处理错误的代码块
} 
finally {
     //无论 try / catch 结果如何都执行的代码块
}

JavaScript 变量作用域

如果为尚未声明的变量赋值，此变量会自动成为全局变量。（在严格模式中不会自动创建全局变量）

HTML的全局变量

通过 JavaScript，全局作用域形成了完整的 JavaScript 环境。

在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象。

1
2
var carName = "porsche";
// 此处的代码能够使用 window.carName

全局变量会在关闭页面时被删除。

JavaScript 提升（Hoisting）

Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）。因此，可以在声明变量之前使用它。

注意：变量的初始化不会被提升

严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。

JavaScript 严格模式

通过在脚本或函数的开头添加"use strict";来声明严格模式。

不允许的事项

在不声明变量的情况下使用变量，是不允许的：

1
2
3
"use strict";
x = 3.14;                // 这将引发错误
x = {p1:10, p2:20};      // 这将引发错误

删除变量和函数是不允许的：

1
2
3
4
5
"use strict";
function x(p1, p2) {}; 
delete x;                 // 这将引发错误
var x = 3.14;
delete x;                 // 这将引发错误

重复参数名不允许；

八进制数值文本不允许；

转义字符不允许；

写入只读属性不允许；

1
2
3
4
5
"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 这将引发错误

JavaScript this 关键词

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

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

  • 在方法中，this 指的是所有者对象。
  • 单独的情况下，this 指的是全局对象。 ( 在浏览器窗口中，全局对象是[object Window])
  • 在函数中，this 指的是全局对象。
  • 在函数中，严格模式下，this 是 undefined。
  • 在事件中，this 指的是接收事件的元素。

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

1
2
3
<button onclick="this.style.display='none'">
  点击来删除我！
</button>

显示函数绑定

call() 和apply()方法是预定义的 JavaScript 方法。它们都可以用于将另一个对象作为参数调用对象方法。

1
2
3
4
5
6
7
8
9
10
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

JavaScript let

循环作用域

1
2
3
4
5
var i = 7;
for (var i = 0; i < 10; i++) {	// var 重新声明了变量
  // 一些语句
}
// 此处，i 为 10

而使用let:

1
2
3
4
5
let i = 7;
for (let i = 0; i < 10; i++) {	// let 没有重新声明变量
  // 一些语句
}
// 此处 i 为 7

在函数内声明，var和let都有函数作用域；

在块外声明，var和let都有全局作用域；在 HTML 中，全局作用域是 window 对象。通过 var 关键词定义的全局变量属于 window 对象。 通过 let 关键词定义的全局变量不属于 window 对象。

在相同的作用域，或在相同的块中，通过let重新声明一个var变量是不允许的。通过let重新声明一个let变量也是不允许的·。

JavaScript const

const 变量必须在声明时赋值

1
const PI = 3.14159265359;

常量对象的属性可以更改：

1
2
3
4
5
6
7
8
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

但无法重新为常量对象赋值：

1
2
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

数组也类似。

JavaScript Json

JSON( JavaScript Object Notation ) 是存储和传输数据的格式。JSON 经常在数据从服务器发送到网页时使用。

语法规则

  • 数据是名称/值对
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组
1
2
3
4
5
6
7
{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

JSON.parse() 把json转换为JavaScript对象

1
var obj = JSON.parse(text);

JavaScript 调试

通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。

console.log()方法

在调试窗口中显示JavaScript的值

1
2
3
4
<script>
a = 5;
console.log(a);
</script>

设置断点

在调试窗口中，您可在 JavaScript 代码中设置断点。在每个断点中，JavaScript 将停止执行，以使您能够检查 JavaScript 的值。在检查值之后，您可以恢复代码执行。

debugger 关键词

会停止 JavaScript 的执行，并调用（如果有）调试函数。这与在调试器中设置断点的功能是一样的。

1
2
3
var x = 15 * 5;
debugger;		// 在这里停住
document.getElementbyId("demo").innerHTML = x;

常见错误

这条 if 语句返回 false（也许不像预期），因为 0 为 false：

1
2
var x = 0;
if (x = 0)			// 赋值总是返回赋值的值。

…