JS相关总结2.0

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>