专栏首页性能与架构JS中控制好this关键字的指向

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),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 Docker Multi-stage 高效构建镜像

    使用 Docker 时,构建高效的 image 镜像是非常重要的,image 最好尽可能的小一点,这样实际部署的时候才能更高效。

    dys
  • 网站性能指标 - Apdex指数

    假设有两个架构设计方案:方案A 和 方案B 方案A 并发请求 < 200 时,响应时间为 0.5秒 并发请求 > 1000 时,响应时间为 10秒 方案...

    dys
  • MongoDB 多对多关系的简单示例

    例如文章的标签,一篇文章可能包含多个标签,一个标签也会对应多篇文章 这是一个多对多的映射关系,在sql中我们一般这样设计 Article: Id ...

    dys
  • 面试官问:JS的this指向

    面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结,再谷歌(或各技术平台)搜索几篇类似文章,看笔者写...

    若川
  • JS中的this指向问题

    可能会误以为window.doSth()是调用的,所以是指向window。虽然本例中window.doSth确实等于doSth。name等于window.nam...

    步履不停凡
  • php学习之类与对象的魔术方法的使用

    访问protected,private不可以直接访问,解决方法是编写一个public的成员方法,来操作protected和private属性

    吾爱乐享
  • Java关键字(五)——this

    IT可乐
  • oracle数据库 如何查询某个表的约束条件

    使用下面语句从all_constraints视图中查看某表上的约束: SELECT constraint_name, table_name, r_owner...

    cloudskyme
  • Flink的sink实战之四:自定义

    Flink官方提供的sink服务可能满足不了我们的需要,此时可以开发自定义的sink,文本就来一起实战;

    程序员欣宸
  • 温故KMP算法

    最近由于某些原因,又回顾了一次KMP算法。上一次回顾KMP算法还是在刷题的时候遇到的: http://blog.csdn.net/dacc123/article...

    ShenduCC

扫码关注云+社区

领取腾讯云代金券