我这样理解js里的this

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

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

时间: 2024-10-31 01:12:36

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

深入理解js里面的this

闲聊两句(可以忽略): 毕业有半年了,时间还过得真快,不过还好,感觉自己相对于刚毕业那会确实成长了很多:好久没有打游戏了(自己决心要戒掉的),消磨时光的时候就看看电影或者追追电视剧,再无聊就洗洗衣服.扫扫地,实在不行就拿起手边的书看.照我以前的习惯,我除了上课时间可能看书,其他的时间是完全看不进的,所以觉得这也是自己进步的地方. 最近自己想开始学习前端工程师现在最流行的东西,nodejs,听说可以写服务端.听说是事件驱动.听说...听说了很多很多关于它的好,所以我也决心要好好学这个.推荐我收集的

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

一般来说,JavaScript中的数组是稀疏的. 什么是稀疏呢?稀疏也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组. 1.稀疏数组 创建一个指定长度的稀疏数组很简单: 当你遍历它时,你会发现,它并没有元素,JavaScript会跳过这些缝隙. 还有一些其他情况会生成稀疏数组,比如:,数组元素实际只有2个,但是长度确实101. 2.密集数组 1.创建密集数组的技巧:var a = Array.apply(null, Array(3)

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

有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之外,在它的事件轮询过程中,同一时间只会处理一个事件.你可以把事件轮询想象成一个大的队列,在每个时间点上,系统只会处理一个事件.即使你的电脑有多个CPU核心,你也无法同时并行的处理多个事件.但也就是这种特性使得node.js适合处理I/O型的应用,不适合那种CPU运算型的应用.在每个I/O型的应用中,

谈谈JS里的{ }大括号和[ ]中括号的用法

谈谈JS里的{ }大括号和[ ]中括号的用法,理解后就可以看懂JSON结构了. 一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen","AGE":"28"}; 上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性, 所以访问时,应该用.(点)来层层访问:LangShe

简单理解js的this

js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是什么对象呢?很简单,this这个对象就是:谁调用它它就指向谁. 关于这一点,其实,博客园的文章已经说明了很多了,有的文章也说到了点子上,只不过,他们解释的还是有点模糊,这里,我给大家做几个简单的对照实验,根据这几个对照实验的结果,大家应该很清楚了. 希望大家根据我的代码重复实现下面的实验. 首先,我

理解JS中的call、apply、bind方法

理解JS中的call.apply.bind方法(*****************************************************************) 在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:apply . call .bind 三者都是用来改变函数的this对象的指向的:apply . call .bind 三者

记js里codePointAt()方法返回的结果的含义。

经过<字符串的扩展>和<字符编码的那些事>这两篇文章的阅读,大概了解js里codePointAt方法返回结果的含义. var str='??'; console.log(str.codePointAt(0))//输出134071 那么这个134071到底是这么来的呢?我们可以根据这段话来理解. 在http://tool.chinaz.com/tools/unicode.aspx这个网站上可以将"??"转换成"\ud842\udfb7". 1.

理解JS引擎的执行机制

首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 技术的出现,都跟现实世界里的应用场景密切相关的. 同样的,我们就结合现实场景,来回答这三个问题 (1) JS为什么是单线程的? JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的. 场景描述: 那么现在有2个线程,process

理解js中的作用域以及初探闭包

前言 对于js中的闭包,无论是老司机还是小白,我想,见得不能再多了,然而有时三言两语却很难说得明白,反正在我初学时是这样的,脑子里虽有概念,但是却道不出个所以然来,在面试中经常会被用来吊自己的胃口,考察基础,虽然网上自己也看过不少相关闭包的文章,帖子,但貌似这玩意,越看越复杂,满满逼格高,生涉难懂的专业词汇常常把自己带到沟里去了,越看越迷糊,其实终归结底,用杨绛先生的一句话就是:"你的问题在于代码写得太少,书读得不够多",其实在我看来前者是主要的,是后者的检验, 自知目标搬砖20年(还