JavaScript中this的一些怪异现象

 <!--JavaScript伪协议和内联事件对于this的指向不同-->
    <a href="#" onclick="alert(this.tagName);">click me</a><!--弹出A-->
    <a href="javascript:alert(this.tagName);">click me</a><!--弹出undefined-->
    <a href="javascript:alert(this==window);">click me</a><!--弹出true-->

    <input id="btn" type="button" value="this demo" name="button"/>

 

复制代码
<script type="text/javascript">
       
        var name = 'somebody';
        var angela = {
            name: 'angela',
            say: function () {
                alert("I'm " + this.name);
            }
        };
        var btn = document.getElementById('btn');

        //setTimeout和setInterval也会改变this的指向
        /*
        angela.say();//I'm  angela
        setTimeout(angela.say, 1000);//I'm  somebody
        setInterval(angela.say, 1000);//I'm  somebody
        */

        //on...也会改变this的指向
        /*        
        angela.say();//I'm  angela
        btn.onclick = angela.say;//I'm  button
        */

        //匿名函数调整this指向
        setTimeout(function () { angela.say(); }, 1000);//I'm  angela
        setInterval(function () { angela.say(); }, 1000)//I'm  angela
        btn.onclick = function () { angela.say(); };//I'm  angela
        setTimeout(function () { alert(this == window); }, 1000);//true
        btn.onclick = function () { alert(this == btn); }//true


        //call 和 apply调整this的指向
        angela.say.call(btn);//I'm  button
        setTimeout(function () { angela.say.call(btn); }, 1000);//I'm  button
        setTimeout(function () { angela.say.apply(btn); }, 1000);//I'm  button
        btn.onclick = function () { angela.say.apply(btn); }//I'm  button




        //将this指向的对象保存到变量
        var name = 'migo';
        var mydemo = {
            name: 'angela',
            say: function () {
                alert("I'm " + this.name);
            },
            init: function () {
                var that = this;
                document.getElementById('btn').onclick = function () {
                    that.say();//I'm angela
                    this.say();//这儿报错 this.say is not function
                }
            }
        };
    </script>
复制代码
posted @   静逸  阅读(640)  评论(1编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示