美文网首页
一点关于this的理解

一点关于this的理解

作者: 秃头成就技术 | 来源:发表于2018-09-15 08:44 被阅读8次

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

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

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


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

       var obj = {

   number: 2,

  showNumber: function(){

  this.number =3;

  (function(){

  console.log(this.number);

  })();

  console.log(this.number);

  }

  };

  obj.showNumber();

第一个打印window.number

第二个打印obj.number


由于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 对象。

function test(){alert(this)}


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


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

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

4.this在被apply和call方法改变指向为null时,this代表window

****转载

相关文章

  • 一点关于this的理解

    关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会...

  • 关于幸福的一点理解

    小时候,边吃糖葫芦边逛集市是一种幸福,有一个长长的假期是一种幸福,有了属于自己的脚踏车也是一种幸福。 现在,有了一...

  • 关于投资的一点理解

    说起投资,我印象最深刻的是2015年,楼市和房市都大涨。一年的时间内,深圳的楼市差不多翻翻,股市也特别牛。但是自己...

  • 关于读书的一点理解

    不敢说我很爱读书,但我也算是一个比较喜欢看书的人,爱这个字对我而言不敢轻易说出口。看的书跟一些很爱读书的人比起...

  • 关于沟通的一点理解

    引言 一直以来,有个问题深深的困扰着我,使我百思不得其解。 问题 主要是在职公司的领导和我在工作中的沟通问题。 首...

  • 关于投资的一点理解

    关于投资的一点理解 最近投了一个外卖项目,占了点小股份,昨天大股东告诉我,有人想收点我们的股份,给出的估价还不错。...

  • 关于UITableView的一点理解

    开题 在很多时候感觉嘛,做iOS开发其实很简单嘛,除了UI就是UI,好像看不出还有什么需要做的功能。在苹果的iOS...

  • 关于递归的一点理解

    什么是递归,一幅图表示: 拿到这问题第一时间知道这肯定要用递归来解决,但是总觉着无处下手。这个时候我们不妨找一个我...

  • 关于爱情的一点理解

    虽然爱情很美好,但是该理性还是需要理性;假如对方比你小很多,那么他的心智还不够成熟,还在成长之中;他的职业...

  • js基础知识

    关于this的理解: 关于var let 和 const的使用(首先要理解全局和局部作用域)第一点详见:菜鸟教程之...

网友评论

      本文标题:一点关于this的理解

      本文链接:https://www.haomeiwen.com/subject/mtysgftx.html