关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:knockout,有时候不明白为什么不直接使用this,而要把 this 作为参数传入。

接下来你谈谈我对它的理解,也作为一个笔记,方便以后参阅。有不对的地方,欢迎指出批评。

1. 不像C#,this一定是指向当前对象。js的this指向是不确定的,也就是说是可以动态改变的。call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高。

2. this 一般情况下,都是指向函数的拥有者。这一点很重要!这一点很重要!这一点很重要!

这也是一道常见的面试题,如下代码:

<script type="text/javascript">
  var number = 1;
  var obj = {
   number: 2,
  showNumber: function(){
  this.number = 3;
  (function(){
  console.log(this.number);
  })();
  console.log(this.number);
  }
  };
  obj.showNumber();
</script>

由于showNumber方法的拥有者是obj,所以this.number=3; this 指向的就是 obj 的属性 number。同理,第二个 console.log 打印的也是属性 number。

为什么第二点说一般情况下this都是指向函数的拥有者,因为有特殊情况。函数自执行就是特殊情况,在函数自执行里,this 指向的是:window。所以第一个 console.log 打印的是 window 的属性 number。

所以要加一点:

3. 在函数自执行里,this 指向的是 window 对象。

扩展,关于this,还有一个地方比较让人模糊的是在 dom 事件里,通常有如下3种情况:

如下:

1. 使用标签属性注册事件,此时this 指向的是 window 对象。

<input id="test" type="button" value="按钮" onClick="test()"/>

function test(){alert(this)}

2. 对于1,要让 this 指向 input,可以将 this 作为参数传递。

3. 使用 addEventListener 等注册。此时this 也是指向 input。

document.getElementById("test").addEventListener("click",test);

一点关于this的理解的更多相关文章

  1. 一点对Promise的理解与总结

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10959411.html,多谢,=.=~ axios用多了就开始疑惑它里面到底是个啥,虽然总被告知 ...

  2. SVM(支持向量机)的一点理解

    最近有被问到SVM的问题,不懂装懂,羞愧不已.百度有很多深入浅出介绍SVM的文章,我就不赘述了,这里写一点自己肤浅的理解. SVM的核心思想是把求解低维空间上的高维分类器转化为求解高维函数空间上的线性 ...

  3. Python - 001 - 类与实例间属性的理解

    Python是个很灵活的语言,光看它的类和实例间属性的访问机制就可以看出这一点,不过这一点还真的不好理解,做了些测试之后我的理解是这样的: 实例在访问class属性时,先检索自己的names, 如果有 ...

  4. 读完了csapp(中文名:深入理解计算机系统)

    上个星期最终把csapp看完了. 我买的是中文版的,由于除了貌似评价不错以外,由于涉及到些自己不了解的底层东西,怕是看英文会云里雾里.如今看来,大概不能算是个长处,可是的确可以加快我的看书速度,否则一 ...

  5. 对SVM的个人理解

    对SVM的个人理解 之前以为SVM很强大很神秘,自己了解了之后发现原理并不难,不过,“大师的功力在于将idea使用数学定义它,使用物理描述它”,这一点在看SVM的数学部分的时候已经深刻的体会到了,最小 ...

  6. c/c++性能优化--- cache优化的一点杂谈

    之前写了一篇关于c/c++优化的一点建议,被各种拍砖和吐槽,有赞成的有反对的,还有中立的,网友对那篇博客的的评论和吐槽,我一个都没有删掉,包括一些具有攻击性的言论.笔者有幸阅读过IBM某个项目的框架代 ...

  7. 认为C/C++很难理解、找工作面试笔试,快看看这本书!

    假设你是C/C++谁刚开始学习,看这本书.因为也许你读其他的书还不如不看.一定要选择一本好书. 假设你正在准备工作,请认真看这本书,由于这本书会教会你工作中必备的知识,相信你即将面临的语法类题目不会超 ...

  8. java方法的多态性理解

    1.什么是java的多态 浏览了别人博客中的一些介绍多态的文章,发现大家的描述有点不一样,主要区别在于是否把方法的重写算做多态.一种我比较认同的说法如下: 多态分为两种 a. 编译时多态:方法的重载: ...

  9. 深入理解 JavaScript 事件循环(二)— task and microtask

    引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...

随机推荐

  1. 部分常用Express方法详解

    app.set(name, value) 分配给name一个value,并将name作为app settings table的一个属性. 使用app.set('foo', true) 相当于调用 ap ...

  2. Crash的旅行计划

    除草了.. Crash的旅行计划 [问题描述] 过不了多久,Crash就要迎来他朝思暮想的暑假.在这个暑假里,他计划着到火星上旅游.在火星上有N个旅游景点,Crash用1至N这N个正整数对这些景点标号 ...

  3. BNUOJ-15505 Largest Rectangle in a Histogram DP

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=15505 每个h[i]维护两个值l[i]和r[i],分别表示大于h[i]的左边最远距离和小于 ...

  4. HDU-4607 Park Visit bfs | DP | dfs

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4607 首先考虑找一条最长链长度k,如果m<=k+1,那么答案就是m.如果m>k+1,那么最 ...

  5. 总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站

    总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站 极分享:高质分享+专业互助=没有难做的软件+没有不得已的加班 极分享:高质分享+专业互助=没有 ...

  6. drag and drop

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  7. [iOS基础控件 - 6.8] 各种数据类型的@property属性

    A.内存管理 NSString: copy 基本数据类型.结构体(int, CGFloat, BOOL, CGRect等):assign 对象(如自定义model类型.NSArray.NSDictio ...

  8. XMPP——Smack[5]文件传输及离线消息的获取

    三天时间,赶在最后一下午实现了文件的传输,本来需要实现离线文件的发送的,一直没想好怎么弄,找openfire的离线文件插件没找到,后来想出一种方法,起服务器时起了一个系统用户,一直在线,当用户发送离线 ...

  9. 从零开始学android开发-Json转换利器Gson之实例

    Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库.可以将一个 JSON 字符串转成一个 Java 对象,或者反过来. jar和源码下载地址: h ...

  10. hdu 5452 Minimum Cut 树形dp

    Minimum Cut Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=54 ...