<!--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>

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

  1. JavaScript中的百变大咖~this

    原文链接:http://www.jeffjade.com/2015/08/03/2015-08-03-javascript-this/ JavaScript作为一种脚本语言身份的存在,因此被很多人认为 ...

  2. JavaScript中一些怪异用法的理解

    引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...

  3. delphi 字符串处理中的怪异现象与处理

    1, 怪异现象:字符串相加操作不正常! 以上代码,明显输出字符串应含有后缀“.jpg”,但实际输出却不含后缀(如下),字符串加法操作似乎不起作用了! 采用showMessage进行输出,看看结果如何? ...

  4. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

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

    目录 常见错误一:对于this关键词的不正确引用 常见错误二:传统编程语言的生命周期误区 常见错误三:内存泄露 常见错误四:比较运算符 常见错误五:低效的DOM操作 常见错误6:在for循环中的不正确 ...

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

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...

  7. 你所不了解的float(滥用float的怪异现象)

    float设计初衷就是为了实现文字环绕效果 原本页面流布局显示如上图所示,运用了float属性后就显示为如下图所示,这就是浮动的设计初衷 float的一些特性:包裹性.破坏性. 包裹的特性其实主要有三 ...

  8. JavaScript中的作用域

    很多(JavaScript)开发者都在讨论"作用域",但它是什么?它们在JavaScript中的任何地方!我发现很多年轻的开发者不知道作用域是什么.他们中大多数人可以用jQuery ...

  9. 深入理解Javascript中this, prototype, constructor

    在Javascript面向对象编程中经常需要使用到this,prototype和constructor这3个关键字. 1.首先介绍一下this的使用:this表示当前对象;如果在全局中使用this,则 ...

随机推荐

  1. javascript typeof

    https://zhidao.baidu.com/question/79159257.html typeof 运算符返回一个用来表示表达式的数据类型的字符串. 可能的字符串有:"number ...

  2. flex进行页面的基础布局

    接触flex有一段时间了,由于自己在移动上的经验比较少,一直以为这个和css3的其他属性差不多,就是一个盒模型的缩放之类的.今天一个移动的小项目用到了这个属性,仔细看了下,先不说里面具体的属性,就fl ...

  3. [UCSD白板题] Covering Segments by Points

    Problem Introduction You are given a set of segments on a line and your goal is to mark as few point ...

  4. 使用 AForge.NET 做视频采集

    AForge.NET 是基于C#设计的,在计算机视觉和人工智能方向拥有很强大功能的框架.btw... it's an open source framework. 附上官网地址: http://www ...

  5. linux mysql

    安装mysql 1.使用rpm 安装mysql 或者使用yum安装 使用rpm 安装 下载 Centos 7 所需要的mysql包 tar -xf 解压整合包 根据依赖 安装 common>li ...

  6. 网页的Width ,Height

    Jquery中可直接用接口$().height(); 获取浏览器窗口高$(window).height() 获取内部文档高$("body").height() 原生JS 网页可见区 ...

  7. 做WP程序时遇到的一些问题及解决方法

    问题1:Type 'JDBYSJ.Data.NewsChannel' cannot be serialized. Consider marking it with the DataContractAt ...

  8. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  9. mysql 索引问题

    转自http://www.blogjava.net/happyenjoylife/archive/2011/12/17/366639.html mysql innodb存储与索引的总结 Innodb存 ...

  10. android5.1 for tq335x

    万万没有想到再次编译aosp已经是半年以后了,未完的工作总是要继续进行的. aosp不是通过repo下载的,而是在百度网盘里面找了网友的分享下载的.然后编译的方法直接挂个vpn到谷歌的官网上去看需要什 ...