• JS之this那些事


      一直以来,对this的讨论都是热门话题。有人说掌握了this就掌握了JavaScript的80%,说法有点夸张,但可见this的重要性。至今记录了很多关于this的零碎笔记,今天就来个小结。

      本人看过对this解释的最简单的说法:谁调用这个函数,this指向谁。 好啦,就是这么简单。下面再来具体说一下,请随时用这个说法去验证。

      先来看一道js面试题热热身:

    var obj = {
      foo: function(){
        console.log(this)
      }
    }
     
    var bar = obj.foo
    obj.foo() //  obj
    bar() //  window

      obj.foo()套用“谁调用指向谁”的说法就很好理解了,但bar()为啥是window。其实,这个也是可以套用这个简单的说法。前面我们var了一个变量bar,请注意,这个bar是个全局变量,即bar===window.bar,并把函数obj.foo赋给bar,此时直接调用bar(),就等于window.bar()。这样就好理解了,这个函数就是window调用的,没毛病了。关于这道题的解释,也可以参考这篇文章:http://mp.weixin.qq.com/s/ksqtCd8ouxU-cVc_HnA4Aw

     

    牢记这句话:“谁调用指向谁”,搞清谁调用的,解决大部分的this问题足够了。下面说几个this的特殊情况:

     

    1、函数被具体对象调用时,指向直接调用者。如果这个函数里面嵌套有函数,里面函数的this不会指向这个调用者,可通过that=this改变指向。内部函数用that调用该对象属性。

    var name="out";
    var obj={
          name:"in",
          outFoo:function(){
               var that=this;//将this赋给that,内部函数的that指向obj
               function inFoo(){
                     this.name;   // out,此时this指向window
                     that.name;  // in,此时that指向obj
               }
          },
    };

    2、如果函数通过new调用,那么就会创建一个对象,并且this 指向新创建的对象。    

    function Foo(){
         //var this=new Object();函数内部隐式默认创建this对象并返回this
         this.name="foo";
         //return this;
    }
    var obj=new Foo();  //将返回的this赋给obj
    console.log(obj.name);// foo

    3、setTimeOut、setInterval函数中的this指向window。

    4、通过apply或call调用时,this会动态改变它的指向。这俩种方法都接受俩个参数,第一个都是调用这个函数的对象。用法:functionNmae.apply(调用的对象,参数2)。

    5、通过bind()调用时,这个与前面两个用法差不多,只不过bind()静态绑定this,一旦绑定了就不会改变,即使用call或apply也没用,同时返回一个函数体待执行。

     

    最后来一道js的this面试题:http://www.cnblogs.com/macq/p/6526809.html

      

    附:别人面试阿里时的回答

    描述一下this

      this,函数执行的上下文,可以通过apply,call,bind改变this的指向。

      对于匿名函数或者直接调用的函数来说,this指向全局上下文(浏览器为window,nodejs为global),剩下的函数调用,那就是谁调用它,this就指向谁。

      当然还有es6的箭头函数,箭头函数的指向取决于该箭头函数声明的位置,在哪里声明,this就指向哪里。

     

  • 相关阅读:
    C#程序之Main()方法
    JavaScript引用类型之RegExp类型(正则表达式)
    正则表达式之量词(重复出现)?、*、+
    正则表达式一元字符与字符组
    正则表达式简介
    yii自动登录
    Yii学习
    改变Yii2的默认路由
    extract()函数
    html5标签figure、figcaption
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/6770194.html
Copyright © 2020-2023  润新知