8、JavaScript 进阶

阿慕路泽

已于 2024-03-19 14:07:35 修改

阅读量94

点赞数

分类专栏： HTML+CSS+JS 文章标签： javascript 开发语言 ecmascript

于 2019-03-29 19:40:10 首次发布

本文链接：https://blog.csdn.net/sinat_33924041/article/details/88784363

版权

HTML+CSS+JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

进阶

值类型和引用类型

值类型

值类型又叫基本数据类型，在 JavaScript 中值类型有以下五种：

数值类型
布尔类型
undefined
null
字符串

值类型存储在栈（stack）中，它们的值直接存储在变量访问的位置。比如：

var num = 18;
var flag = true;
var un = undefined;
var nu = null;
var str = "zhangsan";

值类型的特征

值类型的值是不可变的，不可变是指值类型指向的空间不可变。比如：

var a = 2;
a = a + 2;
console.log(a); //打印结果为 4。

在上述例子中，a 变量指向的值变了，但是 2 的内存没有变。按值传递的变量之间互不影响。比如：

var a = 1;
var b = a;
a = a + 2;
console.log(a,b); // 打印结果为3,1

值类型赋值，直接将值赋值一份。比如：

var num1 = 1;
var num2 = num1;

当参数为值类型的时候，函数内和函数外的两个变量完全不同，仅仅只是存的值一样而已，修改时互不影响。比如：

function foo(num){
    num = num + 1;
}

var a = 1;
foo(a);
console.log(a); //打印结果为 1

引用类型

引用类型又叫复合数据类型，在 JavaScript 中引用类型有以下三种：

对象
数组
函数

引用类型存储在堆中，也就是说存储在变量处的值是一个指针，指向存储对象的内存处。比如：

var arr = [1, 2, 3];
var p = {name:"张三", age:18};

引用类型的特征

引用类型赋值，是将地址复制一份。比如：

var p = {name:"zhangsan", age:18};
var p1 = p;  # p1和p中的存放的地址是一样的

当参数为引用类型的时候，函数内和函数外的两个变量不同，但是共同指向同一个对象，在函数内修改对象数据时会影响外部。比如：

function foo(o){
    o.age = o.age +1;
}

var p = {name:"zhangsan", age:18};

foo(p);

console.log(p.age); // 打印结果为 19。

异常处理

异常捕获

我们使用 try-catch 语句开捕获异常，语法为：

try{
    //这里写可能出现异常的代码
}catch(err){
    //在这里写，出现异常后的处理代码
}

例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <input type="button" value="点击一下" onclick="message()">
        <script>
            var txt = "";

            function message() {
                try {
                    alertt("我爱学习，身体好好"); //故意把alert写错
                } catch(err) {
                    txt = "There was an error on this page.\n\n";
                    txt += "Error description: " + err.message + "\n\n";
                    txt += "Click OK to continue.\n\n";
                    alert(txt);
                }
            }
        </script>
    </body>

</html>

需要注意以下几点：

语句 try 和 catch 是成对出现的。
如果在 try 中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中，catch 处理错误信息，然后再执行后面的代码。
如果 try 中没有出现错误，则不会执行 catch 中的代码，直接执行后面的代码。通过 try-catch 语句进行异常捕获之后，代码将会继续执行，而不会中断。

`throw` 语句

通过 throw 语句，我们可以创建自定义错误。throw 语句常常和 try catch 语句一起使用。

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>请输入 0 到 100 之间的数字：</p>
        <input id="demo" type="text">
        <button type="button" onclick="myFunction()">测试输入值</button>
        <p id="throwText"></p>
        <script>
            function myFunction() {
                try {
                    var x = document.getElementById("demo").value;
                    if(x == "") throw "您输入的值为空";
                    if(isNaN(x)) throw "您输入的不是数字";
                    if(x > 100) throw "您输入的值太大";
                    if(x < 0) throw "您输入的值太小";
                } catch(err) {
                    var y = document.getElementById("throwText");
                    y.innerHTML = "错误提示：" + err + "。";
                }
            }
        </script>
    </body>

</html>