JS相关总结2.0(个人学习用)
JS中的错误分类
语法错误
JS代码在预编译时 就发现了错误
特点:
1)代码没有机会执行
2)错误最好找
<script>
//Uncaught SyntaxError: Function statements require a function name
function () {
}
</script>
引用错误
通常访问一个没有定义的变量就会发生引用错误
解决办法: 先定义好这个变量,再使用之
特点: JS代码在执行时的时候,才会发现引用错误,错误之后的代码就不执行
<script>
console.log("start")
// Uncaught ReferenceError: a is not defined
console.log(a);
console.log("end")
</script>
类型错误
使用类型不当: 你提供的数据,不是JS想要的,JS代码在执行时才会发现,类型错误之前的代码也会执行,之后的代码不会执行
解决办法: 一般是数据类型使用不当,修改之就可以了
<script>
console.log("start")
// TypeError: f is not a function
var f = 110;
f();
console.log("end")
</script>
范围错误
使用容器时,范围指定不当
<script>
// Uncaught RangeError: Invalid array length
// 定义一个数组
var arr = ["a","b","c"]; // 定义数组方式1
var arr2 = new Array(10); // 定义数组方式2 10表示数组中可以存储10个数据
var arr3 = new Array(-5);
</script>
上面的4类错误,在控制台都会报错,修改就OK了。还有一类错误,控制台不会报错,叫逻辑错误。
逻辑错误解决办法: 通过debugger,即对所写代码添加断点的方式调试错误。
JS中的异常处理
异常不是错误,异常是指可能出错的错码。
语法:
<script>
try{
// 放可能出错的代码
}catch(e){
// 如果上面的代码错误了,就到这里进行错误的处理,其中e表示错误对象
// 它里面包含了错误信息。通过查看e,可以知道它到底出了什么错误
}finally{
// 无论对错,代码都会执行到此处,在JS中用的不多
}
</script>
示例:
<script>
try{
console.log(a); // 放可能出错的代码
}catch (e) {
console.log("有错误:",e);
}finally {
console.log("最终finally一定会执行");
}
</script>
<script>
try{
var a = 0;
console.log(a);
if(a == 0){
// 主动抛出一个错误
throw new Error("不能为0"); // 抛出错误,catch会捕获到
}
}catch (e) {
console.log("友情提示:这里有点小问题,工程师正在解决中...",e)
}
</script>
JS中的逻辑运算符
逻辑与 &&
双元运算符: 有两个操作数,只有两个操作数都是真,整体的结果才为真
<script>
console.log(true && true); //true
console.log(false && true); //false
console.log(true && false); //false
console.log(false && false); //fale
</script>
逻辑或 ||
双元运算符: 有两个操作数,只要有一个操作数为真,整体的结果就为真
<script>
console.log(true || true); // true
console.log(false || true); // true
console.log(true || false); // true
console.log(false || false); // false
</script>
逻辑非 !
单目运算符: 1个操作数, 如果为真,整体就是假;如果为假,整体就是真
<script>
console.log(!true); // false
console.log(!false); // true
</script>
JS中this总结
普通函数中的this
如果this出现在普通的函数中,this表示window.如果你通过window打点调用一个函数,这个函数中的this也是window。
<script>
let box = document.getElementById("box");
function f() {
console.log(this); // window
}
// f(); 程序员自己调用一个函数 一个普通函数 函数中的this表示window
box.onclick = f();
</script>
<script>
function k() {
console.log(this); // window
}
window.k(); // window打点调用
k(); // 程序员自己调用
</script>
事件中的this
事件绑定,事件处理程序,事件发生时,浏览器帮我们调用这个函数,此函数中的this表示事件源
<script>
let box = document.getElementById("box");
box.onclick = function () {
console.log(this); // this表示事件源
}
</script>
方法中的this
在一个对象中,如果有方法(函数),如果通过这个对象调用方法,方法中的this表示这个对象
<script>
// JS中的对象是属性的无序集合
// 属性:变量/方法
// 无序:容器中的属性没有顺序
// 集合:存放了N个数据
var wc = {
name:"wangcai", // 叫属性 var name = "wangcai"
age:100, // 叫属性
eat:function () { // 叫方法(属性)
console.log("eat...")
console.log(this);
}
}
// 一个方法中的this是谁,就看点前面是谁。
wc.eat(); // 调用一个对象上的方法
</script>
IIFE中的this
在IIFE中,this表示window
<script>
(function () {
console.log(this);
})(); //IIFE中的this表示window
</script>
严格模式下的this
前四点都是在非严格模式下,在严格模式下,调用一个普通函数,this表示und,IIFE中的this也表示und
<script>
"use strict"; // 启用JS的严格模式
function f() {
console.log(this); // und
}
f();
(function () {
console.log(this); // und
})();
</script>
JS中函数的四种角色
一个普通的函数
<script>
function f() {
console.log("f...")
}
// f(); 作用1:让函数体执行 作用2:得到返回值
f();
</script>
在对象中可以当成一个方法
<script>
let obj = {
say:function () { // 方法
console.log("say...")
},
sleep:function () { // 方法
console.log("sleep...")
}
}
obj.say()
obj.sleep()
</script>
类 构造器
<script>
function NBAPlayer() {
}
var nbaPlayer1 = new NBAPlayer();
var nbaPlayer2 = new NBAPlayer();
var nbaPlayer3 = new NBAPlayer();
console.log(nbaPlayer1);
console.log(nbaPlayer2);
console.log(nbaPlayer3);
</script>
当作是一个对象
<script>
function F() {
}
F.name1 = "wangcai";
F.age = 100
console.log(F.name1)
console.log(F.age)
</script>