美文网首页
JavaScript中this的指向问题

JavaScript中this的指向问题

作者: 7月7日晴i | 来源:发表于2017-07-20 08:58 被阅读0次

    继续说一下面向对象开发。

    下面我简单说一下this的指向问题
    this在js中主要研究的是函数中的this**

    console.log(this);  //打印出来的是window
    

    表明,不代表函数外没有this 函数外的this=>window

    我是一个分割线
    js中的this代表的是当前行为执行的主体(行为:方法,事件,函数等)
    function eat(){ //这是函数的定义
      this 指向 jam
    }
    jam.eat();  //执行
    

    在js中还有一个概念叫 context(上下文),代表当前行为执行的环境。eg:在饭店吃饭
    主体:jam this:jam
    context:饭店(环境可以不同 但不影响this的指向)
    由此可以得出,this的指向只跟当前执行的主体有关系,跟行为在哪发生没有关系。

    行为主体怎么判断?

    函数执行首先看函数名有没有“.”,有的话看“.”前面是谁,是谁就指向谁,没有“.”的话,this就指向window。

    1)

    function fn(){
      console.log(this);
    }
    fn(); //window
    

    根据上面的判断,这个this没有“.”,由此可以推断它是指向window的

    var obj = {fn:fn};  //fn的属性是上面的fn函数
    obj.fn(); //会调用上面的函数
    //Object
    

    根据判断,前面有“.”,所以这个this指向的是obj【执行前把上面fn()调用的注释】
    2)

    function fn(){
      console.log(this);
    }
    function sum(){
      fn();
    }
    sum(); //this=>window
    

    this前面没有“.”,只是换了个环境执行,所以还是没有主体,所以是指向window的
    3)

    function fn(){
      console.log(this);
    }
    var oo = {
      sum:function(){
        fn();
      }
    }
    oo.sum();  //this=>window
    

    4)

    html:
    <button>按钮</button>
    js:
    var oBtn = document.getElementsByTagName("button")[0];
    oBtn.onclick = function(){
      console.log(this);
    } // 点击按钮打印出来的是 <button>按钮</button>
    

    5)

    var obj = new Object();
    obj.say = function(){
      console.log(this);
    }
    obj.say(); //Object
    

    通过4)5)可以看出来,函数里面的this指向谁,只跟函数在运行时前面有没有“.”,有就指向前面的,没有就指向window

    以上是我理解和整理的一些看法和总结,以后还会多多学习,谢谢。

    相关文章

      网友评论

          本文标题:JavaScript中this的指向问题

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