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>
时间: 2024-12-28 14:05:40

JavaScript中this的一些怪异现象的相关文章

JavaScript中一些怪异用法的理解

引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaScript中经常看到判断一个对象是否有某一个属性或者在进行客户端检测的时候会出现!!这个用法.相信大家都看到过var isIE=!!document.all这样的代码把.那为什么需要使用!!呢? !!作用就在于:如果明确设置了对象中属性的值(非 null/undefined/0/""等值)

javaScript中的 || 和 &amp;&amp; 所遵循的短路现象

javaScript中的 || 和 && 所遵循的短路现象 很多的编程语言中的 || 和 && 都遵循短路原理,JavaScript同样遵循这个原理:当 || 时,找到为true的分项就停止处理,并返回该分项的值,否则执行完,并返回最后的分项的值:当 && 时,找到为false的分项就停止处理,并返回该分项的值,否则就执行完,并返回最后的分项的值. 原文地址:https://www.cnblogs.com/david-lcw/p/10357175.html

【转】十个JavaScript中易犯的小错误,你中了几枪?

在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听一位喜

关于javascript中apply()和call()方法的区别

如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的”偏见”,因为这对您来说绝对是一片新大陆,让JavaScrip 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上. 区分apply,call就一句话, foo.call(

javascript中变量声明要早于赋值

javascript中变量声明要早于赋值:这里只做简单的现象介绍,具体不做深究,先看一段代码实例: var webName="蚂蚁部落"; document.write(webName); 对于这段代码应该没有任何问题,输出结果是:蚂蚁部落.再来看一段代码: document.write(webName); var webName="蚂蚁部落"; 按照代码是顺序执行的理论,以上代码应该会报错才对,但是这里输出结果却是:undefined.这说明在执行输出之前,变量已

javascript中函数作用域之”提升“

javascript中函数作用域之变量提升 当我们在函数内部用关键字var声明一个变量的时候,此变量的作用域限制在当前函数. 提升:在一个作用域内部,不管一个变量用var声明的位置在哪里,这个变量属于当前整个作用域,并且在当前作用域的任何位置都可以访问它.在javascript中,这种行为/现象称之为"提升",即一个变量在一个作用域的任何位置用var声明,javascript引擎都会把这些用var声明的变量"移动"到当前作用域的开始处. 谈到javascript这种

javascript中奇怪事件

javascript中奇怪事件 为啥叫奇怪事件了,应该是我目前掌握的知识暂时不能解释这种现象滴呀(也许可以用事件流的概念来解释滴呀) 看布局: #hideInfo{ height:100px; width:100px; background:green; position:absolute; top:20px; left:-90px; } #hideInfo span{ height:100px; width:100px; background:blue; position:absolute;

【JavaScript】JavaScript中的陷阱大集合

本文主要介绍怪异的Javascript,毋庸置疑,它绝对有怪异的一面.当软件开发者开始使用世界上使用最广泛的语言编写代码时,他们会在这个过 程中发现很多有趣的“特性”.即便是老练的Javascript开发者也可以在本文找到一些有趣的新陷阱,请留意这些陷阱,当然也可以尽情享受由这些陷阱 带来的“乐趣”! AD: 本文主要介绍怪异的Javascript,毋庸置疑,它绝对有怪异的一面.当软件开发者开始使用世界上使用最广泛的语言编写代码时,他们会在这个过 程中发现很多有趣的“特性”.即便是老练的Java

关于JavaScript中name的意义冲突

在昨天的<Javascript权威指南>学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: <script type="text/javascript"> function Person(){} var per = new Person; Object.defineProperties(per, { "nickName": { value:"Tom",