this指向误区

最新推荐文章于 2022-02-17 23:13:37 发布

自律并放纵者

最新推荐文章于 2022-02-17 23:13:37 发布

阅读量732

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45689637/article/details/109538418

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div>div</div>
    <script src="jquery-3.5.1的副本.js"></script>
    <script>
       var obj={
           init:function(){
               this.bindEvent();
           },
           bindEvent:function(){
               $('div').click(this.cb);
               console.log(this);
           },
           cb:function(){
               console.log(this);
           }
       }
       obj.init();
        

    </script>
</body>
</html>

输出结果：
在这里插入图片描述
这里解决一下为什么第二个this输出结果为<div>div</div>：
某个元素的事件触发时，会调用事件处理函数，此时事件是被该元素调用的，this指向该元素。
不要被this.cb给误导，this.cb 只是一个事件处理函数。
若想改变this指向=，可借用$.proxy():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div>div</div>
    <script src="jquery-3.5.1的副本.js"></script>
    <script>
       var obj={
           init:function(){
               this.bindEvent();
           },
           bindEvent:function(){
               $('div').click($.proxy(this.cb,this));
               console.log(this);
           },
           cb:function(){
               console.log(this);
               this.aa();
           },
           aa:function(){
           console.log(this);
           }
       }
       obj.init();
        

    </script>
</body>
</html>

在这里插入图片描述