zoukankan      html  css  js  c++  java
  • 我这样理解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);

       

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

  • 相关阅读:
    sublime开启vim模式
    git命令行界面
    搬进Github
    【POJ 2886】Who Gets the Most Candies?
    【UVA 1451】Average
    【CodeForces 625A】Guest From the Past
    【ZOJ 3480】Duck Typing
    【POJ 3320】Jessica's Reading Problemc(尺取法)
    【HDU 1445】Ride to School
    【HDU 5578】Friendship of Frog
  • 原文地址:https://www.cnblogs.com/4littleProgrammer/p/4734387.html
Copyright © 2011-2022 走看看