zoukankan      html  css  js  c++  java
  • 一点关于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);

  • 相关阅读:
    创建新用户
    发生tcp丢包(拥堵、超时)重传
    centos7装机和初步运维
    论上山和下山哪个费力
    一、Linux简介
    服务器设置FTP
    自定义部署资源服务器
    代码管理工具 Git
    远程连接工具rdcman
    dubbo学习(八)dubbo项目搭建--消费者(服务消费者)
  • 原文地址:https://www.cnblogs.com/Changero/p/4805117.html
Copyright © 2011-2022 走看看