2021-05-12

最新推荐文章于 2024-10-09 11:19:11 发布

emily-0724

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量47

点赞数 1

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/weixin_45373002/article/details/116694257

版权

JSthis指向问题

<!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>this</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
    <p>请选择</p>
    <button id="btn1">张三</button>
    <button id="btn2">李四</button>
    <p id="view"></p>
    <script>
        function f() {
            console.log(this.name);
            $('#view').html(this.name);
        }
        var select1 = {
            name: "张三",
            transfer: f
        }
        var select2 = {
            name: "李四",
            transfer: f
        }
        $('#btn1').click(function () {
            select1.transfer();
        });
        $('#btn2').click(function () {
            select2.transfer();
        });
    </script>
</body>

</html>

上面代码中有一个的函数f和两个名为select1、select2的对象，两个点击事件他们分别绑定id为btn1和btn2的按钮

接下来我们来分析一下this的指向：

select和select2都有两个相同的属性一个属性为name另一个属性为transfer并且他指向名为f的函数，而函数内部使用了this关键字，随着f所在的对象不同，this指向也不同