javascript - js的this 指向问题:为什么点击按钮执行函数内部创建的函数this指向的事window?

查看:159
本文介绍了javascript - js的this 指向问题:为什么点击按钮执行函数内部创建的函数this指向的事window?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

this一直有点晕,今天写了一个测试,但是还是不理解,求高手给个通俗易懂的简答:
以下代码,为什么点击按钮执行函数内部创建的函数this指向的事window?

(function(){
            console.log(self);
            console.log(this);//这里的this指向window
        })();


    
<body>
<button id="di" >ssss</button>
<script type="text/javascript">
var d=document.getElementById('di');
    function a(){
        name='111'
        console.log(this);
    }

    d.addEventListener('click',function(){
        a();//a打印的this是window
        console.log(this);//打印的是d对应的button元素
        var self=this;、//保存this
        //为什么内部创建的函数this指向window
        (function(){
            console.log(self);
            console.log(this);//这里的this指向window
        })();
    });
</script>
</body>
</html>

解决方案

d.addEventListener('click',function(){
    a();//a打印的this是window
    你这么调用a不就相当于window.a(),this肯定是window啊
    console.log(this);//打印的是d对应的button元素
    这个this和当前dom元素绑定的处理函数有关,应该是addEventListener方法绑定事件的时候给callback函数的this绑定d元素吧。这个你可以查查资料是不是。
    
    var self=this;//保存this
    //为什么内部创建的函数this指向window
    (function(){
        console.log(self);
        这里self是你这个匿名函数的父作用域的self,就是父作用域的this,和上一句一样。
        console.log(this);//这里的this指向window
        
        这个匿名函数不就和a函数一样吗?
        换种写法:
        
        function test(){
            console.log(this);
        }
        test() === window.test();
    })();
});

这篇关于javascript - js的this 指向问题:为什么点击按钮执行函数内部创建的函数this指向的事window?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆