关于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);

好久没写博客,完全生疏了~,以后争取多写一点,记录知识,分享知识。

我这样理解js里的this的更多相关文章

  1. 深入理解js里面的this

    闲聊两句(可以忽略): 毕业有半年了,时间还过得真快,不过还好,感觉自己相对于刚毕业那会确实成长了很多:好久没有打游戏了(自己决心要戒掉的),消磨时光的时候就看看电影或者追追电视剧,再无聊就洗洗衣服. ...

  2. 理解JS里的偏函数与柯里化

    联系到上篇博客讲的bind完整的语法为: let bound = func.bind(context, arg1, arg2, ...); 可以绑定上下文this和函数的初始参数.举例,我们有个乘法函 ...

  3. 理解JS里的稀疏数组与密集数组

    一般来说,JavaScript中的数组是稀疏的. 什么是稀疏呢?稀疏也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组. 1.稀疏数组 创 ...

  4. 理解 Node.js 里的 process.nextTick()

    有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...

  5. 对于js里的闭包的理解

    Ali的回答: 当function里嵌套function时,内部的function可以访问外部function里的变量. function foo(x) {     var tmp = 3;      ...

  6. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  7. 简单理解js的this

    js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是 ...

  8. js笔记——理解js中的call及apply

    call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...

  9. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

随机推荐

  1. JAVA中获取路径

    内容来自于snannan_268 关键字: java中获取路径 JAVA中获取路径: 1.jsp中取得路径:   以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.get ...

  2. Asp.net MVC使用Filter解除Session, Cookie等依赖

    本文,介绍了Filter在MVC请求的生命周期中的作用和角色,以及Filter的一些常用应用场景. 同时针对MVC中的对于Session,Cookie等的依赖,如何使用Filter解依赖. 如果大家有 ...

  3. 将dll程序集添加到缓存里

    1.点击开始---所有程序---...如下图 并以管理员身份运行. 2.输入命令行 gacutil.exe /i D:\Word\CRS_BPM_Sln\SourceCode\BPM\Referenc ...

  4. Linux服务器宕机案例第二则

    邮件告警发现海外工厂一Linux服务器连接不上,DPA(Database Performance Analyzer)系统也发现其出现问题,ping这台服务器发现网络不通,联系不到当地系统管理员,邮件咨 ...

  5. ORACLE 查看有多个执行计划的SQL语句

    在SQL优化过程,有时候需要查看哪些SQL具有多个执行计划(Multiple Executions Plans for the same SQL statement),因为同一个SQL有多个执行计划一 ...

  6. Spark SQL 之 Migration Guide

    Spark SQL 之 Migration Guide 支持的Hive功能 转载请注明出处:http://www.cnblogs.com/BYRans/ Migration Guide 与Hive的兼 ...

  7. MySQL-procedure(cursor,loop)

    现有一张表spam_keyword,共629条记录,每条记录的word字段的字符数量不等. CREATE TABLE `spam_keyword` ( `kid` ) NOT NULL, `word` ...

  8. shell流程控制

    if语句 判断条件用[]包裹起来 if [ $a > $b ] then echo ‘a > b’ elif [ $a < $b ] then echo ‘a < b’ els ...

  9. POJ1651Multiplication Puzzle[区间DP]

    Multiplication Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8737   Accepted:  ...

  10. hdu 1255

    覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...