JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="#" onclick="alert(this.tagName)">

click me

</a> 这种情况可以正常弹出a <a href="JavaScript:alert(this.tagName)">

click me2

</a> 这样就不行了,会弹出 "undefined" 因为使用 JavaScript: 相当于定义了一个全局函数,this则指向 window对象 如果定义一个全局变量,如 var tagName = 'tag name'; 再点击’click me2‘时就会弹出 'tag name' (2)setTimeout和setInterval //全局变量 var name = "全局"; var duang = { name: "局部", hi: function() { alert("我是 " + this.name); } }; duang.hi(); 执行结果为“我是 局部” setTimeout( duang.hi, 1000); setInterval( duang.hi, 1000); 这两种情况都会弹出“我是 全局” 因为setTimeout和setInterval都会改变this的指向为window (3)Dom节点.on××× <button id="btn" name="button">

btn

</button> var btn = document.getElementById("btn"); var duang = {

name: "duang",

hi: function() { alert("I'm " + this.name); }

}; btn.onclick = duang.hi; 点击按钮后,并没弹出duang的name属性值,而是弹出了button的name属性 说明这种方法会使this指向dom节点本身 如果想this指向duang对象,可以使用匿名函数解决 btn.onclick = function (){ duang.hi(); } 上面的setTimeout和setInterval情况也可以使用此方法处理 setTimeout( function (){ duang.hi();}, 1000); setInterval( function (){ duang.hi();}, 1000); 可以看到,这种直接调用和通过匿名函数间接调用 对this的指向影响很大,开发时需要特别注意 (4)call和apply 接着上面的例子,改动一下调用方式 <button id="btn" name="button">

btn

</button> var name = "全局"; var btn = document.getElementById("btn"); var duang = { name: "duang",

hi: function() { alert("I'm " + this.name); } }; btn.onclick = function (){ duang.hi.call(); } 这里使用了匿名函数,但是通过call方法调用了duang对象的hi函数 这时的点击结果为 "I'm 全局",说明this指向了window对象

注意,使用call和apply调用方法时,this的指向会被改为window

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

js学习总结

转自 http://blog.sina.com.cn/s/blog_75cf5f3201011csu.html

45860
来自专栏DT乱“码”

jQuery.data() 的实现方式

jQuery.data() 的实现方式     jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据。      ...

27070
来自专栏LanceToBigData

Vue.js之Vue计算属性、侦听器、样式绑定

1)el(挂载点) 创建一个Vue这个实例去接管页面中的某个Element(元素)。也就是说el表明和页面上 哪一个节点做绑定! 2)data vue实...

25230
来自专栏技术博文

js去掉字符串前后空格的五种方法

第一种:循环检查替换 [javascript] //供使用者调用   function trim(s){   return trimRight(trimLeft...

43850
来自专栏web前端

JavaScript基础学习--05自定义属性、索引值

一、自定义属性      1、读写操作 <input abc="123" type="button" value="按钮" /> ==============...

20570
来自专栏xingoo, 一个梦想做发明家的程序员

简单选择排序

选择排序时间复杂度也为O(n^2) 算法思想: 选择排序即每次length-i的长度内选择一个最小的元素,与第一个进行替换,这样大循环length次后,就可以得...

23560
来自专栏前端架构与工程

jQuery源码——.html()方法原理解析

在将字符串转化为html碎片时,一般会将字符串作为容器的innerHTML属性赋值。但innerHTML有很多局限性,比如我们想转化的字符串中有<script>...

23880
来自专栏mySoul

属性 元素的内容 创建,插入和删除节点 虚拟节点

表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属...

15930
来自专栏快乐八哥

前端知识小结

1. var a=null==undefined?1:"abc"; var b=typeof(a); var c=typeof(b); var d=typeof...

18690
来自专栏柠檬先生

html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素.     注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元...

246100

扫码关注云+社区

领取腾讯云代金券