关于js里面的this理解

作者: 独立行走的蚂蚁 | 来源:发表于2018-04-23 11:33 被阅读8次

    在这里主要主要解释的都是函数中的this
    js中的this代表的是当前函数执行的主体;
    1.this是谁和函数在哪里定义的和执行的都没有关系,那么怎么才能去区分this?(非严格模式)
    (1)函数的执行,首先我们先看函数前面有没有“ . ”,如果有的话,“ . ”前面是谁,this就是谁;如果没有电的话,这时候this就是window。
    例:

    function fn () {
      console.log(this)
    }
    var obj = {fn: fn};
    fn() //这时候fn里面的this就是window
    obj.fn()  // 这时候的this就是window
    
    var obj1 = {
      sum: function () {
        fn()  //这个fn里面的this还是window
      }
    }
    obj1.sum()  //这时候sum里面的this是obj1
    

    (2)自执行函数里面的this永远是window。

    (3)给元素的某一个函数绑定方法,当事件触发的时候,执行对应的函数,方法中的this是当前函数。

     <button id='btn'>点击</button>
    <script>
      function fn () {
      console.log(this)
    }
      doucument.getElementById('btn').onclick = fn ; //当点击btn按钮的时候fn中的this是#btn
    
    </script>
    

    (4)在构造函数模式中,类中(函数体中)出现的this.xxx = xxx中的this是当前类的一个实例。
    例:

    function CreatePersonal (name, age) {
    // 浏览器默认创建了p1,这时候this就是指的p1
     this.name = name;  
     this.age = age;
     this.personal = function () {
        console.log('name'+ this.name + ';' + 'age' + this.age)
      }
    }
    var p1 = new CreatePersonal('ant', 35);
    p1.personal()
    

    (5)使用call/apply来改变this的指向(一旦遇到了上述四条都没有用了)

    2.严格模式下 ‘use strict’
    (1)自执行函数中的this永远是undefined

    var obj = {
      fn: (function () {
        // this-> undefined
        return function () {
          // this -> obj
         }
      })(0)
    };
    obj.fn()
    

    (2)方法执行,看方法前面是否有‘.’,有的话,‘.’前面是谁this就是谁,没有的话this就是undefined

    var obj = function () {
      fn: fn
    };
    function () {}
    fn() // undefined
    obj.fn() // this->obj
    

    这时候我们发现严格模式下的this相对于非严格模式下的this主要区别在于: 相对于js代码中没有执行主体的情况下,非严格模式下默认都是window;但是在严格模式下,没有写就是没有执行主体,this指向的是undefined

    相关文章

      网友评论

        本文标题:关于js里面的this理解

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