函数传参时，传值类型和引用类型的区别

最新推荐文章于 2023-02-06 21:13:32 发布

励志成为前端大佬

最新推荐文章于 2023-02-06 21:13:32 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/lizhichengwei/article/details/128107007

版权

传参的值为：简单数据类型：

传递的是值的拷贝，函数内部对参数的修改不会影响到外部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let num = 10
        function fn(a) {
            a = 20
        }
        fn(num)
        console.log(num);//10
    </script>
</body>

</html>

传参的值为：复杂数据类型：

传递的是引用地址：函数内部对参数内容的修改会影响到外部，对参数引用的修改不会影响外面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            name: '张三',
            age: 18
        }
        function fn(a) {
            // 改变属性值
            a.name = '李四'
        }
        // 传值为对象
        fn(obj)
        console.log(obj);//{name: '李四', age: 18} 因为复杂数据类型拷贝的是引用地址
    </script>
</body>

</html>

在函数内部修改参数的引用时，不会影响外面的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let obj = {
            name: '张三',
            age: 18
        }
        function fn(a) {
            //这时候a又创建了新地址，所以外面的obj里面的值不会发生变化
            a = {
                name: '李四'
            }
        }
        // 传值为对象
        fn(obj)
        console.log(obj);//{name:'张三',age:18}

    </script>
</body>

</html>