JavaScript中函数this指向，修改this指向，闭包，深浅拷贝等问题

dimingda

已于 2022-01-19 13:25:44 修改

阅读量157

点赞数

分类专栏： js 文章标签： javascript

于 2022-01-18 17:12:02 首次发布

本文链接：https://blog.csdn.net/dimingda/article/details/122557399

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.函数的this指向问题

this在不同的函数下，代表的也不同，大概整理了以下几种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.普通函数
        function fun1() {
            console.log(this);
        }
        window.fun1();
        // this指向的是window

        // 2.对象方法
        var o = {
            hi: function() {
                console.log(this);
            }
        }
        o.hi();
        // this指向o

        // 3.构造函数
        function Poeple() {
            console.log(this);
        }
        var p = new Poeple();
        // this指向p

        // 4.绑定事件函数
        var btn = document.querySelector('.btn')
        btn.click = function() {
            console.log(this);
        }
        // 指向btn

        // 5.定时器函数
        setInterval(function() {
            console.log(this);
        }, 100);
        // 指向window
    </script>
</body>
</html>

2.this指向修改

当然this的指向不是不变的，可以利用函数进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        var o = {
            id: 1
        }
        function fn(x) {
            console.log(this);
        }
        // 1.call()
        // this指向了o对象
        // fn.call(o, x);

        // 2.apply()
        // 除了o以外，再传递其他值的时候，和上边的区别必须传递数组
        // fn.apply(o, ['hello']);

        // 3.bind()
        // 不会调用函数，拷贝原函数进行操作
        var fn1 = fn.bind(o);
        fn1();
    </script>
</body>
</html>

3.闭包

闭包就是指有权访问另一个函数作用域中的变量的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn() {
            var num = 10;
            // 访问了fn函数的局部变量num,fn为闭包函数
            function fn1() {
                console.log(num);
            }
            fun1();                               
        }
        fn();
    </script>
</body>
</html>

4.深浅拷贝

浅拷贝拷贝的是地址，拷贝前后指向同一数据
在这里插入图片描述深拷贝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <script>
         var o = {
             id: 1,
             age: 19,
             msg: {
                name: 'eee'
             }
         }
         var obj = {};
        //  obj = o;
        // 浅拷贝此时会将原来的也改了
        //  obj.msg.name = 'ssss';

        // 浅拷贝
        Object.assign(obj, o);
        obj.msg.name = '33232'
        console.log(o);
     </script>   
</body>
</html>

5.正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明
        var re = new RegExp(/123/);
        // 测试
        console.log(re.test('abcd'));
        // 包含abc
        var reg = /abc/;
        // abc开头
        var re1 = /^abc/;
        // abc结尾
        var re2 = /abc$/;
        // 开头结尾都是abc，必须是abc这个字符
        var re3 = /^abc$/;
        // 只要包含a，或b， 或c就可以
        var re4 = /[abc]/;
        // 范围a到z
        var re5 = /^[a-z]$/;
        // 范围a到z,或大写A-Z，或数字或下划线横线
        var re6 = /^[a-zA-Z0-9_-]$/;
        // 取反
        var re7 = /^[^a-zA-Z0-9_-]$/;
        // 出现次数0或者多次
        var re8 = /^a*$/;
        // 出现次数1或者多次
        var re9 = /^a+$/;
        // 出现次数1或者0
        var re10 = /^a?$/;
        // 出现次数3次
        var re11 = /^a{3}$/;
        // 出现次数大于等于3次
        var re12 = /^a{3,}$/;
        // 出现次数大于等于3次小于等于10
        var re13 = /^a{3,10}$/;
        // 出现次数大于等于3次小于等于10
        var re13 = /^a{3,10}$/;
        // \d相当于[0-9],0或9 
        // \D是除了0或9
        // \w 是匹配字母数字下划线
        // \W 是匹配除了字母数字下划线
        // \s 是匹配空格，回车等
        // \S 是匹配除了 空格，回车等
        var a = /^[a-zA-Z]{1,}.[a-zA-Z]{1,}@qq.com$/
        console.log(a.test("mingda.di@qq.com"));
    </script>
</body>
</html>